diff --git a/challenges/01-responsive-web-design/applied-accessibility.json b/challenges/01-responsive-web-design/applied-accessibility.json
index 6c53a4273..5930defdc 100644
--- a/challenges/01-responsive-web-design/applied-accessibility.json
+++ b/challenges/01-responsive-web-design/applied-accessibility.json
@@ -6,7 +6,8 @@
   "challenges": [
     {
       "id": "587d774c367417b2b2512a9c",
-      "title": "Add a Text Alternative to Images for Visually Impaired Accessibility",
+      "title":
+        "Add a Text Alternative to Images for Visually Impaired Accessibility",
       "description": [
         "It's likely you've seen an <code>alt</code> attribute on an <code>img</code> tag in other challenges. <code>Alt</code> text describes the content of the image and provides a text-alternative. This helps in case the image fails to load or can't be seen by a user. It's also used by search engines to understand what an image contains to include it in search results. Here's an example:",
         "<code>&lt;img src=&quot;importantLogo.jpeg&quot; alt=&quot;Company logo&quot;&gt;</code>",
@@ -17,8 +18,10 @@
       ],
       "tests": [
         {
-          "text": "Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.",
-          "testString": "assert($('img').attr('alt'), 'Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.');"
+          "text":
+            "Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.",
+          "testString":
+            "assert($('img').attr('alt'), 'Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.');"
         }
       ],
       "solutions": [],
@@ -26,15 +29,14 @@
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
       "translations": {},
-      "guideUrl": "https://guide.freecodecamp.org/certificates/add-alt-text-to-an-image-for-accessibility",
+      "guideUrl":
+        "https://guide.freecodecamp.org/certificates/add-alt-text-to-an-image-for-accessibility",
       "files": {
         "indexhtml": {
           "key": "indexhtml",
           "ext": "html",
           "name": "index",
-          "contents": [
-            "<img src=\"doingKarateWow.jpeg\">"
-          ],
+          "contents": ["<img src=\"doingKarateWow.jpeg\">"],
           "head": [],
           "tail": []
         }
@@ -54,12 +56,16 @@
       ],
       "tests": [
         {
-          "text": "Your <code>img</code> tag should have an <code>alt</code> attribute.",
-          "testString": "assert(!($('img').attr('alt') == undefined), 'Your <code>img</code> tag should have an <code>alt</code> attribute.');"
+          "text":
+            "Your <code>img</code> tag should have an <code>alt</code> attribute.",
+          "testString":
+            "assert(!($('img').attr('alt') == undefined), 'Your <code>img</code> tag should have an <code>alt</code> attribute.');"
         },
         {
-          "text": "The <code>alt</code> attribute should be set to an empty string.",
-          "testString": "assert($('img').attr('alt') == '', 'The <code>alt</code> attribute should be set to an empty string.');"
+          "text":
+            "The <code>alt</code> attribute should be set to an empty string.",
+          "testString":
+            "assert($('img').attr('alt') == '', 'The <code>alt</code> attribute should be set to an empty string.');"
         }
       ],
       "solutions": [],
@@ -107,11 +113,13 @@
       "tests": [
         {
           "text": "Your code should have six <code>h3</code> tags.",
-          "testString": "assert($('h3').length === 6, 'Your code should have six <code>h3</code> tags.');"
+          "testString":
+            "assert($('h3').length === 6, 'Your code should have six <code>h3</code> tags.');"
         },
         {
           "text": "Your code should not have any <code>h5</code> tags.",
-          "testString": "assert($('h5').length === 0, 'Your code should not have any <code>h5</code> tags.');"
+          "testString":
+            "assert($('h5').length === 0, 'Your code should not have any <code>h5</code> tags.');"
         }
       ],
       "solutions": [],
@@ -161,11 +169,14 @@
       "tests": [
         {
           "text": "Your code should have one <code>main</code> tag.",
-          "testString": "assert($('main').length == 1, 'Your code should have one <code>main</code> tag.');"
+          "testString":
+            "assert($('main').length == 1, 'Your code should have one <code>main</code> tag.');"
         },
         {
-          "text": "The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.",
-          "testString": "assert(code.match(/<\\/header>\\s*?<main>\\s*?<\\/main>/gi), 'The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.');"
+          "text":
+            "The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.",
+          "testString":
+            "assert(code.match(/<\\/header>\\s*?<main>\\s*?<\\/main>/gi), 'The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.');"
         }
       ],
       "solutions": [],
@@ -207,11 +218,13 @@
       "tests": [
         {
           "text": "Your code should have three <code>article</code> tags.",
-          "testString": "assert($('article').length == 3, 'Your code should have three <code>article</code> tags.');"
+          "testString":
+            "assert($('article').length == 3, 'Your code should have three <code>article</code> tags.');"
         },
         {
           "text": "Your code should not have any <code>div</code> tags.",
-          "testString": "assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.');"
+          "testString":
+            "assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.');"
         }
       ],
       "solutions": [],
@@ -265,19 +278,25 @@
       "tests": [
         {
           "text": "Your code should have one <code>header</code> tag.",
-          "testString": "assert($('header').length == 1, 'Your code should have one <code>header</code> tag.');"
+          "testString":
+            "assert($('header').length == 1, 'Your code should have one <code>header</code> tag.');"
         },
         {
-          "text": "Your <code>header</code> tags should wrap around the <code>h1</code>.",
-          "testString": "assert($('header').children('h1').length == 1, 'Your <code>header</code> tags should wrap around the <code>h1</code>.');"
+          "text":
+            "Your <code>header</code> tags should wrap around the <code>h1</code>.",
+          "testString":
+            "assert($('header').children('h1').length == 1, 'Your <code>header</code> tags should wrap around the <code>h1</code>.');"
         },
         {
           "text": "Your code should not have any <code>div</code> tags.",
-          "testString": "assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.');"
+          "testString":
+            "assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.');"
         },
         {
-          "text": "Make sure your <code>header</code> element has a closing tag.",
-          "testString": "assert(code.match(/<\\/header>/g) && code.match(/<\\/header>/g).length === code.match(/<header>/g).length, 'Make sure your <code>header</code> element has a closing tag.');"
+          "text":
+            "Make sure your <code>header</code> element has a closing tag.",
+          "testString":
+            "assert(code.match(/<\\/header>/g) && code.match(/<\\/header>/g).length === code.match(/<header>/g).length, 'Make sure your <code>header</code> element has a closing tag.');"
         }
       ],
       "solutions": [],
@@ -334,19 +353,24 @@
       "tests": [
         {
           "text": "Your code should have one <code>nav</code> tag.",
-          "testString": "assert($('nav').length == 1, 'Your code should have one <code>nav</code> tag.');"
+          "testString":
+            "assert($('nav').length == 1, 'Your code should have one <code>nav</code> tag.');"
         },
         {
-          "text": "Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.",
-          "testString": "assert($('nav').children('ul').length == 1, 'Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.');"
+          "text":
+            "Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.",
+          "testString":
+            "assert($('nav').children('ul').length == 1, 'Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.');"
         },
         {
           "text": "Your code should not have any <code>div</code> tags.",
-          "testString": "assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.');"
+          "testString":
+            "assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.');"
         },
         {
           "text": "Make sure your <code>nav</code> element has a closing tag.",
-          "testString": "assert(code.match(/<\\/nav>/g) && code.match(/<\\/nav>/g).length === code.match(/<nav>/g).length, 'Make sure your <code>nav</code> element has a closing tag.');"
+          "testString":
+            "assert(code.match(/<\\/nav>/g) && code.match(/<\\/nav>/g).length === code.match(/<nav>/g).length, 'Make sure your <code>nav</code> element has a closing tag.');"
         }
       ],
       "solutions": [],
@@ -408,15 +432,19 @@
       "tests": [
         {
           "text": "Your code should have one <code>footer</code> tag.",
-          "testString": "assert($('footer').length == 1, 'Your code should have one <code>footer</code> tag.');"
+          "testString":
+            "assert($('footer').length == 1, 'Your code should have one <code>footer</code> tag.');"
         },
         {
           "text": "Your code should not have any <code>div</code> tags.",
-          "testString": "assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.');"
+          "testString":
+            "assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.');"
         },
         {
-          "text": "Your code should have an opening and closing <code>footer</code> tag.",
-          "testString": "assert(code.match(/<footer>\\s*&copy; 2016 Camper Cat\\s*<\\/footer>/g), 'Your code should have an opening and closing <code>footer</code> tag.');"
+          "text":
+            "Your code should have an opening and closing <code>footer</code> tag.",
+          "testString":
+            "assert(code.match(/<footer>\\s*&copy; 2016 Camper Cat\\s*<\\/footer>/g), 'Your code should have an opening and closing <code>footer</code> tag.');"
         }
       ],
       "solutions": [],
@@ -477,7 +505,7 @@
         "HTML5's <code>audio</code> element gives semantic meaning when it wraps sound or audio stream content in your markup. Audio content also needs a text alternative to be accessible to people who are deaf or hard of hearing. This can be done with nearby text on the page or a link to a transcript.",
         "The <code>audio</code> tag supports the <code>controls</code> attribute. This shows the browser default play, pause, and other controls, and supports keyboard functionality. This is a boolean attribute, meaning it doesn't need a value, its presence on the tag turns the setting on.",
         "Here's an example:",
-        "<blockquote>&lt;audio id=&quot;meowClip&quot; controls&gt;<br>    &lt;source src=&quot;audio/meow.mp3&quot; type=&quot;audio/mpeg&quot; /&gt;<br>    &lt;source src=&quot;audio/meow.ogg&quot; type=&quot;audio/ogg&quot; /&gt;<br>&lt;/audio&gt;<br></blockquote>",
+        "<blockquote>&lt;audio id=&quot;meowClip&quot; controls&gt;<br>&nbsp;&nbsp;&lt;source src=&quot;audio/meow.mp3&quot; type=&quot;audio/mpeg&quot; /&gt;<br>&nbsp;&nbsp;&lt;source src=&quot;audio/meow.ogg&quot; type=&quot;audio/ogg&quot; /&gt;<br>&lt;/audio&gt;<br></blockquote>",
         "<strong>Note</strong><br>Multimedia content usually has both visual and auditory components. It needs synchronized captions and a transcript so users with visual and/or auditory impairments can access it. Generally, a web developer is not responsible for creating the captions or transcript, but needs to know to include them.",
         "<hr>",
         "Time to take a break from Camper Cat and meet fellow camper Zersiax (@zersiax), a champion of accessibility and a screen reader user. To hear a clip of his screen reader in action, add an <code>audio</code> element after the <code>p</code>. Include the <code>controls</code> attribute. Then place a <code>source</code> tag inside the <code>audio</code> tags with the <code>src</code> attribute set to \"https://s3.amazonaws.com/freecodecamp/screen-reader.mp3\" and <code>type</code> attribute set to \"audio/mpeg\".",
@@ -486,31 +514,43 @@
       "tests": [
         {
           "text": "Your code should have one <code>audio</code> tag.",
-          "testString": "assert($('audio').length === 1, 'Your code should have one <code>audio</code> tag.');"
+          "testString":
+            "assert($('audio').length === 1, 'Your code should have one <code>audio</code> tag.');"
         },
         {
-          "text": "Make sure your <code>audio</code> element has a closing tag.",
-          "testString": "assert(code.match(/<\\/audio>/g) && code.match(/<audio controls>/g) && code.match(/<\\/audio>/g).length === code.match(/<audio controls>/g).length, 'Make sure your <code>audio</code> element has a closing tag.');"
+          "text":
+            "Make sure your <code>audio</code> element has a closing tag.",
+          "testString":
+            "assert(code.match(/<\\/audio>/g) && code.match(/<audio controls>/g) && code.match(/<\\/audio>/g).length === code.match(/<audio controls>/g).length, 'Make sure your <code>audio</code> element has a closing tag.');"
         },
         {
-          "text": "The <code>audio</code> tag should have the <code>controls</code> attribute.",
-          "testString": "assert($('audio').attr('controls'), 'The <code>audio</code> tag should have the <code>controls</code> attribute.');"
+          "text":
+            "The <code>audio</code> tag should have the <code>controls</code> attribute.",
+          "testString":
+            "assert($('audio').attr('controls'), 'The <code>audio</code> tag should have the <code>controls</code> attribute.');"
         },
         {
           "text": "Your code should have one <code>source</code> tag.",
-          "testString": "assert($('source').length === 1, 'Your code should have one <code>source</code> tag.');"
+          "testString":
+            "assert($('source').length === 1, 'Your code should have one <code>source</code> tag.');"
         },
         {
-          "text": "Your <code>source</code> tag should be inside the <code>audio</code> tags.",
-          "testString": "assert($('audio').children('source').length === 1, 'Your <code>source</code> tag should be inside the <code>audio</code> tags.');"
+          "text":
+            "Your <code>source</code> tag should be inside the <code>audio</code> tags.",
+          "testString":
+            "assert($('audio').children('source').length === 1, 'Your <code>source</code> tag should be inside the <code>audio</code> tags.');"
         },
         {
-          "text": "The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.",
-          "testString": "assert($('source').attr('src') === 'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3', 'The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.');"
+          "text":
+            "The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.",
+          "testString":
+            "assert($('source').attr('src') === 'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3', 'The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.');"
         },
         {
-          "text": "Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.",
-          "testString": "assert($('source').attr('type') === 'audio/mpeg', 'Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.');"
+          "text":
+            "Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.",
+          "testString":
+            "assert($('source').attr('type') === 'audio/mpeg', 'Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.');"
         }
       ],
       "solutions": [],
@@ -548,34 +588,42 @@
         "HTML5 introduced the <code>figure</code> element, along with the related <code>figcaption</code>. Used together, these items wrap a visual representation (like an image, diagram, or chart) along with its caption. This gives a two-fold accessibility boost by both semantically grouping related content, and providing a text alternative that explains the <code>figure</code>.",
         "For data visualizations like charts, the caption can be used to briefly note the trends or conclusions for users with visual impairments. Another challenge covers how to move a table version of the chart's data off-screen (using CSS) for screen reader users.",
         "Here's an example - note that the <code>figcaption</code> goes inside the <code>figure</code> tags and can be combined with other elements:",
-        "<blockquote>&lt;figure&gt;<br>  &lt;img src=&quot;roundhouseDestruction.jpeg&quot; alt=&quot;Photo of Camper Cat executing a roundhouse kick&quot;&gt;<br>  &lt;br&gt;<br>  &lt;figcaption&gt;<br>    Master Camper Cat demonstrates proper form of a roundhouse kick.<br>  &lt;/figcaption&gt;<br>&lt;/figure&gt;<br></blockquote>",
+        "<blockquote>&lt;figure&gt;<br>&nbsp;&nbsp;&lt;img src=&quot;roundhouseDestruction.jpeg&quot; alt=&quot;Photo of Camper Cat executing a roundhouse kick&quot;&gt;<br>&nbsp;&nbsp;&lt;br&gt;<br>&nbsp;&nbsp;&lt;figcaption&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;Master Camper Cat demonstrates proper form of a roundhouse kick.<br>&nbsp;&nbsp;&lt;/figcaption&gt;<br>&lt;/figure&gt;<br></blockquote>",
         "<hr>",
         "Camper Cat is hard at work creating a stacked bar chart showing the amount of time per week to spend training in stealth, combat, and weapons. Help him structure his page better by changing the <code>div</code> tag he used to a <code>figure</code> tag, and the <code>p</code> tag that surrounds the caption to a <code>figcaption</code> tag."
       ],
       "tests": [
         {
           "text": "Your code should have one <code>figure</code> tag.",
-          "testString": "assert($('figure').length == 1, 'Your code should have one <code>figure</code> tag.');"
+          "testString":
+            "assert($('figure').length == 1, 'Your code should have one <code>figure</code> tag.');"
         },
         {
           "text": "Your code should have one <code>figcaption</code> tag.",
-          "testString": "assert($('figcaption').length == 1, 'Your code should have one <code>figcaption</code> tag.');"
+          "testString":
+            "assert($('figcaption').length == 1, 'Your code should have one <code>figcaption</code> tag.');"
         },
         {
           "text": "Your code should not have any <code>div</code> tags.",
-          "testString": "assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.');"
+          "testString":
+            "assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.');"
         },
         {
           "text": "Your code should not have any <code>p</code> tags.",
-          "testString": "assert($('p').length == 0, 'Your code should not have any <code>p</code> tags.');"
+          "testString":
+            "assert($('p').length == 0, 'Your code should not have any <code>p</code> tags.');"
         },
         {
-          "text": "The <code>figcaption</code> should be a child of the <code>figure</code> tag.",
-          "testString": "assert($('figure').children('figcaption').length == 1, 'The <code>figcaption</code> should be a child of the <code>figure</code> tag.');"
+          "text":
+            "The <code>figcaption</code> should be a child of the <code>figure</code> tag.",
+          "testString":
+            "assert($('figure').children('figcaption').length == 1, 'The <code>figcaption</code> should be a child of the <code>figure</code> tag.');"
         },
         {
-          "text": "Make sure your <code>figure</code> element has a closing tag.",
-          "testString": "assert(code.match(/<\\/figure>/g) && code.match(/<\\/figure>/g).length === code.match(/<figure>/g).length, 'Make sure your <code>figure</code> element has a closing tag.');"
+          "text":
+            "Make sure your <code>figure</code> element has a closing tag.",
+          "testString":
+            "assert(code.match(/<\\/figure>/g) && code.match(/<\\/figure>/g).length === code.match(/<figure>/g).length, 'Make sure your <code>figure</code> element has a closing tag.');"
         }
       ],
       "solutions": [],
@@ -644,18 +692,22 @@
         "The <code>label</code> tag wraps the text for a specific form control item, usually the name or label for a choice. This ties meaning to the item and makes the form more readable. The <code>for</code> attribute on a <code>label</code> tag explicitly associates that <code>label</code> with the form control and is used by screen readers.",
         "You learned about radio buttons and their labels in a lesson in the Basic HTML section. In that lesson, we wrapped the radio button input element inside a <code>label</code> element along with the label text in order to make the text clickable. Another way to achieve this is by using the <code>for</code> attribute as explained in this lesson.",
         "The value of the <code>for</code> attribute must be the same as the value of the <code>id</code> attribute of the form control. Here's an example:",
-        "<blockquote>&lt;form&gt;<br>  &lt;label for=&quot;name&quot;&gt;Name:&lt;/label&gt;<br>  &lt;input type=&quottext&quot; id=&quot;name&quot; name=&quot;name&quot;&gt;<br>&lt;/form&gt;<br></blockquote>",
+        "<blockquote>&lt;form&gt;<br>&nbsp;&nbsp;&lt;label for=&quot;name&quot;&gt;Name:&lt;/label&gt;<br>&nbsp;&nbsp;&lt;input type=&quottext&quot; id=&quot;name&quot; name=&quot;name&quot;&gt;<br>&lt;/form&gt;<br></blockquote>",
         "<hr>",
         "Camper Cat expects a lot of interest in his thoughtful blog posts, and wants to include an email sign up form. Add a <code>for</code> attribute on the email <code>label</code> that matches the <code>id</code> on its <code>input</code> field."
       ],
       "tests": [
         {
-          "text": "Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.",
-          "testString": "assert($('label').attr('for'), 'Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.');"
+          "text":
+            "Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.",
+          "testString":
+            "assert($('label').attr('for'), 'Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.');"
         },
         {
-          "text": "Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.",
-          "testString": "assert($('label').attr('for') == 'email', 'Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.');"
+          "text":
+            "Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.",
+          "testString":
+            "assert($('label').attr('for') == 'email', 'Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.');"
         }
       ],
       "solutions": [],
@@ -709,36 +761,46 @@
     },
     {
       "id": "587d778b367417b2b2512aa7",
-      "title": "Wrap Radio Buttons in a fieldset Element for Better Accessibility",
+      "title":
+        "Wrap Radio Buttons in a fieldset Element for Better Accessibility",
       "description": [
         "The next form topic covers accessibility of radio buttons. Each choice is given a <code>label</code> with a <code>for</code> attribute tying to the <code>id</code> of the corresponding item as covered in the last challenge. Since radio buttons often come in a group where the user must choose one, there's a way to semantically show the choices are part of a set.",
         "The <code>fieldset</code> tag surrounds the entire grouping of radio buttons to achieve this. It often uses a <code>legend</code> tag to provide a description for the grouping, which is read by screen readers for each choice in the <code>fieldset</code> element.",
         "The <code>fieldset</code> wrapper and <code>legend</code> tag are not necessary when the choices are self-explanatory, like a gender selection. Using a <code>label</code> with the <code>for</code> attribute for each radio button is sufficient.",
         "Here's an example:",
-        "<blockquote>&lt;form&gt;<br>  &lt;fieldset&gt;<br>    &lt;legend&gt;Choose one of these three items:&lt;/legend&gt;<br>    &lt;input id=&quot;one&quot; type=&quot;radio&quot; name=&quot;items&quot; value=&quot;one&quot;&gt;<br>    &lt;label for=&quot;one&quot;&gt;Choice One&lt;/label&gt;&lt;br&gt;<br>    &lt;input id=&quot;two&quot; type=&quot;radio&quot; name=&quot;items&quot; value=&quot;two&quot;&gt;<br>    &lt;label for=&quot;two&quot;&gt;Choice Two&lt;/label&gt;&lt;br&gt;<br>    &lt;input id=&quot;three&quot; type=&quot;radio&quot; name=&quot;items&quot; value=&quot;three&quot;&gt;<br>    &lt;label for=&quot;three&quot;&gt;Choice Three&lt;/label&gt;<br>  &lt;/fieldset&gt;<br>&lt;/form&gt;<br></blockquote>",
+        "<blockquote>&lt;form&gt;<br>&nbsp;&nbsp;&lt;fieldset&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;legend&gt;Choose one of these three items:&lt;/legend&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;input id=&quot;one&quot; type=&quot;radio&quot; name=&quot;items&quot; value=&quot;one&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;one&quot;&gt;Choice One&lt;/label&gt;&lt;br&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;input id=&quot;two&quot; type=&quot;radio&quot; name=&quot;items&quot; value=&quot;two&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;two&quot;&gt;Choice Two&lt;/label&gt;&lt;br&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;input id=&quot;three&quot; type=&quot;radio&quot; name=&quot;items&quot; value=&quot;three&quot;&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;label for=&quot;three&quot;&gt;Choice Three&lt;/label&gt;<br>&nbsp;&nbsp;&lt;/fieldset&gt;<br>&lt;/form&gt;<br></blockquote>",
         "<hr>",
         "Camper Cat wants information about the ninja level of his users when they sign up for his email list. He's added a set of radio buttons, and learned from our last lesson to use label tags with <code>for</code> attributes for each choice. Go Camper Cat! However, his code still needs some help. Change the div tag surrounding the radio buttons to a fieldset tag, and change the p tag inside it to a legend."
       ],
       "tests": [
         {
-          "text": "Your code should have a <code>fieldset</code> tag around the radio button set.",
-          "testString": "assert($('fieldset').length == 1, 'Your code should have a <code>fieldset</code> tag around the radio button set.');"
+          "text":
+            "Your code should have a <code>fieldset</code> tag around the radio button set.",
+          "testString":
+            "assert($('fieldset').length == 1, 'Your code should have a <code>fieldset</code> tag around the radio button set.');"
         },
         {
-          "text": "Make sure your <code>fieldset</code> element has a closing tag.",
-          "testString": "assert(code.match(/<\\/fieldset>/g) && code.match(/<\\/fieldset>/g).length === code.match(/<fieldset>/g).length, 'Make sure your <code>fieldset</code> element has a closing tag.');"
+          "text":
+            "Make sure your <code>fieldset</code> element has a closing tag.",
+          "testString":
+            "assert(code.match(/<\\/fieldset>/g) && code.match(/<\\/fieldset>/g).length === code.match(/<fieldset>/g).length, 'Make sure your <code>fieldset</code> element has a closing tag.');"
         },
         {
-          "text": "Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.",
-          "testString": "assert($('legend').length == 1, 'Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.');"
+          "text":
+            "Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.",
+          "testString":
+            "assert($('legend').length == 1, 'Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.');"
         },
         {
           "text": "Your code should not have any <code>div</code> tags.",
-          "testString": "assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.');"
+          "testString":
+            "assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.');"
         },
         {
-          "text": "Your code should no longer have a <code>p</code> tag around the text asking what level ninja a user is.",
-          "testString": "assert($('p').length == 4, 'Your code should no longer have a <code>p</code> tag around the text asking what level ninja a user is.');"
+          "text":
+            "Your code should no longer have a <code>p</code> tag around the text asking what level ninja a user is.",
+          "testString":
+            "assert($('p').length == 4, 'Your code should no longer have a <code>p</code> tag around the text asking what level ninja a user is.');"
         }
       ],
       "solutions": [],
@@ -815,20 +877,28 @@
       ],
       "tests": [
         {
-          "text": "Your code should add one <code>input</code> tag for the date selector field.",
-          "testString": "assert($('input').length == 2, 'Your code should add one <code>input</code> tag for the date selector field.');"
+          "text":
+            "Your code should add one <code>input</code> tag for the date selector field.",
+          "testString":
+            "assert($('input').length == 2, 'Your code should add one <code>input</code> tag for the date selector field.');"
         },
         {
-          "text": "Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.",
-          "testString": "assert($('input').attr('type') == 'date', 'Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.');"
+          "text":
+            "Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.",
+          "testString":
+            "assert($('input').attr('type') == 'date', 'Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.');"
         },
         {
-          "text": "Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.",
-          "testString": "assert($('input').attr('id') == 'pickdate', 'Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.');"
+          "text":
+            "Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.",
+          "testString":
+            "assert($('input').attr('id') == 'pickdate', 'Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.');"
         },
         {
-          "text": "Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.",
-          "testString": "assert($('input').attr('name') == 'date', 'Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.');"
+          "text":
+            "Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.",
+          "testString":
+            "assert($('input').attr('name') == 'date', 'Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.');"
         }
       ],
       "solutions": [],
@@ -883,20 +953,27 @@
       ],
       "tests": [
         {
-          "text": "Your <code>time</code> tags should wrap around the text \"Thursday, September 15&lt;sup&gt;th&lt;/sup&gt;\".",
-          "testString": "assert($('time').text().match(/Thursday, September 15th/g), 'Your <code>time</code> tags should wrap around the text \"Thursday, September 15&lt;sup&gt;th&lt;/sup&gt;\".');"
+          "text":
+            "Your <code>time</code> tags should wrap around the text \"Thursday, September 15&lt;sup&gt;th&lt;/sup&gt;\".",
+          "testString":
+            "assert($('time').text().match(/Thursday, September 15th/g), 'Your <code>time</code> tags should wrap around the text \"Thursday, September 15&lt;sup&gt;th&lt;/sup&gt;\".');"
         },
         {
-          "text": "Your <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.",
-          "testString": "assert($('time').attr('datetime'), 'Your <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.');"
+          "text":
+            "Your <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.",
+          "testString":
+            "assert($('time').attr('datetime'), 'Your <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.');"
         },
         {
-          "text": "Your <code>datetime</code> attribute should be set to a value of 2016-09-15.",
-          "testString": "assert($('time').attr('datetime') === \"2016-09-15\", 'Your <code>datetime</code> attribute should be set to a value of 2016-09-15.');"
+          "text":
+            "Your <code>datetime</code> attribute should be set to a value of 2016-09-15.",
+          "testString":
+            "assert($('time').attr('datetime') === \"2016-09-15\", 'Your <code>datetime</code> attribute should be set to a value of 2016-09-15.');"
         },
         {
           "text": "Make sure your <code>time</code> element has a closing tag.",
-          "testString": "assert(code.match(/<\\/time>/g) && code.match(/<\\/time>/g).length === 4, 'Make sure your <code>time</code> element has a closing tag.');"
+          "testString":
+            "assert(code.match(/<\\/time>/g) && code.match(/<\\/time>/g).length === 4, 'Make sure your <code>time</code> element has a closing tag.');"
         }
       ],
       "solutions": [],
@@ -949,12 +1026,13 @@
     },
     {
       "id": "587d778d367417b2b2512aaa",
-      "title": "Make Elements Only Visible to a Screen Reader by Using Custom CSS",
+      "title":
+        "Make Elements Only Visible to a Screen Reader by Using Custom CSS",
       "description": [
         "Have you noticed that all of the applied accessibility challenges so far haven't used any CSS? This is to show the importance of a logical document outline, and using semantically meaningful tags around your content before introducing the visual design aspect.",
         "However, CSS's magic can also improve accessibility on your page when you want to visually hide content meant only for screen readers. This happens when information is in a visual format (like a chart), but screen reader users need an alternative presentation (like a table) to access the data. CSS is used to position the screen reader-only elements off the visual area of the browser window.",
         "Here's an example of the CSS rules that accomplish this:",
-        "<blockquote>.sr-only {<br>  position: absolute;<br>  left: -10000px;<br>  width: 1px;<br>  height: 1px;<br>  top: auto;<br>  overflow: hidden;<br>}</blockquote>",
+        "<blockquote>.sr-only {<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;left: -10000px;<br>&nbsp;&nbsp;width: 1px;<br>&nbsp;&nbsp;height: 1px;<br>&nbsp;&nbsp;top: auto;<br>&nbsp;&nbsp;overflow: hidden;<br>}</blockquote>",
         "<strong>Note</strong><br>The following CSS approaches will NOT do the same thing:",
         "<ul>",
         "<li><code>display: none;</code> or <code>visibility: hidden;</code> hides content for everyone, including screen reader users</li>",
@@ -965,20 +1043,28 @@
       ],
       "tests": [
         {
-          "text": "Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute.",
-          "testString": "assert($('.sr-only').css('position') == 'absolute', 'Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute.');"
+          "text":
+            "Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute.",
+          "testString":
+            "assert($('.sr-only').css('position') == 'absolute', 'Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute.');"
         },
         {
-          "text": "Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px.",
-          "testString": "assert($('.sr-only').css('left') == '-10000px', 'Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px.');"
+          "text":
+            "Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px.",
+          "testString":
+            "assert($('.sr-only').css('left') == '-10000px', 'Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px.');"
         },
         {
-          "text": "Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel.",
-          "testString": "assert(code.match(/width:\\s*?1px/gi), 'Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel.');"
+          "text":
+            "Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel.",
+          "testString":
+            "assert(code.match(/width:\\s*?1px/gi), 'Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel.');"
         },
         {
-          "text": "Your code should set the <code>height</code> property of the <code>sr-only</code> class to a value of 1 pixel.",
-          "testString": "assert(code.match(/height:\\s*?1px/gi), 'Your code should set the <code>height</code> property of the <code>sr-only</code> class to a value of 1 pixel.');"
+          "text":
+            "Your code should set the <code>height</code> property of the <code>sr-only</code> class to a value of 1 pixel.",
+          "testString":
+            "assert(code.match(/height:\\s*?1px/gi), 'Your code should set the <code>height</code> property of the <code>sr-only</code> class to a value of 1 pixel.');"
         }
       ],
       "solutions": [],
@@ -1093,12 +1179,16 @@
       ],
       "tests": [
         {
-          "text": "Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.",
-          "testString": "assert($('body').css('color') == 'rgb(99, 99, 99)', 'Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.');"
+          "text":
+            "Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.",
+          "testString":
+            "assert($('body').css('color') == 'rgb(99, 99, 99)', 'Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.');"
         },
         {
-          "text": "Your code should not change the <code>background-color</code> for the <code>body</code>.",
-          "testString": "assert($('body').css('background-color') == 'rgb(255, 255, 255)', 'Your code should not change the <code>background-color</code> for the <code>body</code>.');"
+          "text":
+            "Your code should not change the <code>background-color</code> for the <code>body</code>.",
+          "testString":
+            "assert($('body').css('background-color') == 'rgb(255, 255, 255)', 'Your code should not change the <code>background-color</code> for the <code>body</code>.');"
         }
       ],
       "solutions": [],
@@ -1149,12 +1239,16 @@
       ],
       "tests": [
         {
-          "text": "Your code should only change the lightness value for the text <code>color</code> property to a value of 15%.",
-          "testString": "assert(code.match(/color:\\s*?hsl\\(0,\\s*?55%,\\s*?15%\\)/gi), 'Your code should only change the lightness value for the text <code>color</code> property to a value of 15%.');"
+          "text":
+            "Your code should only change the lightness value for the text <code>color</code> property to a value of 15%.",
+          "testString":
+            "assert(code.match(/color:\\s*?hsl\\(0,\\s*?55%,\\s*?15%\\)/gi), 'Your code should only change the lightness value for the text <code>color</code> property to a value of 15%.');"
         },
         {
-          "text": "Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.",
-          "testString": "assert(code.match(/background-color:\\s*?hsl\\(120,\\s*?25%,\\s*?55%\\)/gi), 'Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.');"
+          "text":
+            "Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.",
+          "testString":
+            "assert(code.match(/background-color:\\s*?hsl\\(120,\\s*?25%,\\s*?55%\\)/gi), 'Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.');"
         }
       ],
       "solutions": [],
@@ -1194,7 +1288,8 @@
     },
     {
       "id": "587d778f367417b2b2512aad",
-      "title": "Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information",
+      "title":
+        "Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information",
       "description": [
         "There are various forms of colorblindness. These can range from a reduced sensitivity to a certain wavelength of light to the inability to see color at all. The most common form is a reduced sensitivity to detect greens.",
         "For example, if two similar green colors are the foreground and background color of your content, a colorblind user may not be able to distinguish them. Close colors can be thought of as neighbors on the color wheel, and those combinations should be avoided when conveying important information.",
@@ -1204,8 +1299,10 @@
       ],
       "tests": [
         {
-          "text": "Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.",
-          "testString": "assert($('button').css('color') == 'rgb(0, 51, 102)', 'Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.');"
+          "text":
+            "Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.",
+          "testString":
+            "assert($('button').css('color') == 'rgb(0, 51, 102)', 'Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.');"
         }
       ],
       "solutions": [],
@@ -1252,12 +1349,15 @@
       ],
       "tests": [
         {
-          "text": "Your code should move the anchor <code>a</code> tags from around the words \"Click here\" to wrap around the words \"information about batteries\".",
-          "testString": "assert($('a').text().match(/^(information about batteries)$/g), 'Your code should move the anchor <code>a</code> tags from around the words \"Click here\" to wrap around the words \"information about batteries\".');"
+          "text":
+            "Your code should move the anchor <code>a</code> tags from around the words \"Click here\" to wrap around the words \"information about batteries\".",
+          "testString":
+            "assert($('a').text().match(/^(information about batteries)$/g), 'Your code should move the anchor <code>a</code> tags from around the words \"Click here\" to wrap around the words \"information about batteries\".');"
         },
         {
           "text": "Make sure your <code>a</code> element has a closing tag.",
-          "testString": "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/<a href=(''|\"\")>/g).length, 'Make sure your <code>a</code> element has a closing tag.');"
+          "testString":
+            "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/<a href=(''|\"\")>/g).length, 'Make sure your <code>a</code> element has a closing tag.');"
         }
       ],
       "solutions": [],
@@ -1299,20 +1399,28 @@
       ],
       "tests": [
         {
-          "text": "Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of \"first\".",
-          "testString": "assert($('#first').attr('accesskey'), 'Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of \"first\".');"
+          "text":
+            "Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of \"first\".",
+          "testString":
+            "assert($('#first').attr('accesskey'), 'Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of \"first\".');"
         },
         {
-          "text": "Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of \"second\".",
-          "testString": "assert($('#second').attr('accesskey'), 'Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of \"second\".');"
+          "text":
+            "Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of \"second\".",
+          "testString":
+            "assert($('#second').attr('accesskey'), 'Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of \"second\".');"
         },
         {
-          "text": "Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of \"first\" to \"g\". Note that case matters.",
-          "testString": "assert($('#first').attr('accesskey') == 'g', 'Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of \"first\" to \"g\". Note that case matters.');"
+          "text":
+            "Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of \"first\" to \"g\". Note that case matters.",
+          "testString":
+            "assert($('#first').attr('accesskey') == 'g', 'Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of \"first\" to \"g\". Note that case matters.');"
         },
         {
-          "text": "Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of \"second\" to \"c\". Note that case matters.",
-          "testString": "assert($('#second').attr('accesskey') == 'c', 'Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of \"second\" to \"c\". Note that case matters.');"
+          "text":
+            "Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of \"second\" to \"c\". Note that case matters.",
+          "testString":
+            "assert($('#second').attr('accesskey') == 'c', 'Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of \"second\" to \"c\". Note that case matters.');"
         }
       ],
       "solutions": [],
@@ -1367,12 +1475,16 @@
       ],
       "tests": [
         {
-          "text": "Your code should add a <code>tabindex</code> attribute to the <code>p</code> tag that holds the form instructions.",
-          "testString": "assert($('p').attr('tabindex'), 'Your code should add a <code>tabindex</code> attribute to the <code>p</code> tag that holds the form instructions.');"
+          "text":
+            "Your code should add a <code>tabindex</code> attribute to the <code>p</code> tag that holds the form instructions.",
+          "testString":
+            "assert($('p').attr('tabindex'), 'Your code should add a <code>tabindex</code> attribute to the <code>p</code> tag that holds the form instructions.');"
         },
         {
-          "text": "Your code should set the <code>tabindex</code> attribute on the <code>p</code> tag to a value of 0.",
-          "testString": "assert($('p').attr('tabindex') == '0', 'Your code should set the <code>tabindex</code> attribute on the <code>p</code> tag to a value of 0.');"
+          "text":
+            "Your code should set the <code>tabindex</code> attribute on the <code>p</code> tag to a value of 0.",
+          "testString":
+            "assert($('p').attr('tabindex') == '0', 'Your code should set the <code>tabindex</code> attribute on the <code>p</code> tag to a value of 0.');"
         }
       ],
       "solutions": [],
@@ -1441,7 +1553,8 @@
     },
     {
       "id": "587d7790367417b2b2512ab1",
-      "title": "Use tabindex to Specify the Order of Keyboard Focus for Several Elements",
+      "title":
+        "Use tabindex to Specify the Order of Keyboard Focus for Several Elements",
       "description": [
         "The <code>tabindex</code> attribute also specifies the exact tab order of elements. This is achieved when the value of the attribute is set to a positive number of 1 or higher.",
         "Setting a tabindex=\"1\" will bring keyboard focus to that element first. Then it cycles through the sequence of specified <code>tabindex</code> values (2, 3, etc.), before moving to default and <code>tabindex=\"0\"</code> items.",
@@ -1454,20 +1567,28 @@
       ],
       "tests": [
         {
-          "text": "Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.",
-          "testString": "assert($('#search').attr('tabindex'), 'Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.');"
+          "text":
+            "Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.",
+          "testString":
+            "assert($('#search').attr('tabindex'), 'Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.');"
         },
         {
-          "text": "Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.",
-          "testString": "assert($('#submit').attr('tabindex'), 'Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.');"
+          "text":
+            "Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.",
+          "testString":
+            "assert($('#submit').attr('tabindex'), 'Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.');"
         },
         {
-          "text": "Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.",
-          "testString": "assert($('#search').attr('tabindex') == '1', 'Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.');"
+          "text":
+            "Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.",
+          "testString":
+            "assert($('#search').attr('tabindex') == '1', 'Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.');"
         },
         {
-          "text": "Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.",
-          "testString": "assert($('#submit').attr('tabindex') == '2', 'Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.');"
+          "text":
+            "Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.",
+          "testString":
+            "assert($('#submit').attr('tabindex') == '2', 'Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.');"
         }
       ],
       "solutions": [],
diff --git a/challenges/01-responsive-web-design/applied-visual-design.json b/challenges/01-responsive-web-design/applied-visual-design.json
index 865912b48..dfd3b17b7 100644
--- a/challenges/01-responsive-web-design/applied-visual-design.json
+++ b/challenges/01-responsive-web-design/applied-visual-design.json
@@ -19,12 +19,16 @@
       ],
       "tests": [
         {
-          "text": "Your code should use the text-align property on the <code>h4</code> tag to set it to center.",
-          "testString": "assert($('h4').css('text-align') == 'center', 'Your code should use the text-align property on the <code>h4</code> tag to set it to center.');"
+          "text":
+            "Your code should use the text-align property on the <code>h4</code> tag to set it to center.",
+          "testString":
+            "assert($('h4').css('text-align') == 'center', 'Your code should use the text-align property on the <code>h4</code> tag to set it to center.');"
         },
         {
-          "text": "Your code should use the text-align property on the <code>p</code> tag to set it to justify.",
-          "testString": "assert($('p').css('text-align') == 'justify', 'Your code should use the text-align property on the <code>p</code> tag to set it to justify.');"
+          "text":
+            "Your code should use the text-align property on the <code>p</code> tag to set it to justify.",
+          "testString":
+            "assert($('p').css('text-align') == 'justify', 'Your code should use the text-align property on the <code>p</code> tag to set it to justify.');"
         }
       ],
       "solutions": [],
@@ -82,14 +86,16 @@
       "title": "Adjust the Width of an Element Using the width Property",
       "description": [
         "You can specify the width of an element using the <code>width</code> property in CSS. Values can be given in relative length units (such as em), absolute length units (such as px), or as a percentage of its containing parent element. Here's an example that changes the width of an image to 220px:",
-        "<blockquote>img {<br>  width: 220px;<br>}</blockquote>",
+        "<blockquote>img {<br>&nbsp;&nbsp;width: 220px;<br>}</blockquote>",
         "<hr>",
         "Add a <code>width</code> property to the entire card and set it to an absolute value of 245px. Use the <code>fullCard</code> class to select the element."
       ],
       "tests": [
         {
-          "text": "Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.",
-          "testString": "assert(code.match(/.fullCard\\s*{[\\s\\S][^}]*\\n*^\\s*width\\s*:\\s*245px\\s*;/gm), 'Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.');"
+          "text":
+            "Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.",
+          "testString":
+            "assert(code.match(/.fullCard\\s*{[\\s\\S][^}]*\\n*^\\s*width\\s*:\\s*245px\\s*;/gm), 'Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.');"
         }
       ],
       "solutions": [],
@@ -148,14 +154,16 @@
       "title": "Adjust the Height of an Element Using the height Property",
       "description": [
         "You can specify the height of an element using the <code>height</code> property in CSS, similar to the <code>width</code> property. Here's an example that changes the height of an image to 20px:",
-        "<blockquote>img {<br>  height: 20px;<br>}</blockquote>",
+        "<blockquote>img {<br>&nbsp;&nbsp;height: 20px;<br>}</blockquote>",
         "<hr>",
         "Add a <code>height</code> property to the <code>h4</code> tag and set it to 25px."
       ],
       "tests": [
         {
-          "text": "Your code should change the <code>h4</code> <code>height</code> property to a value of 25 pixels.",
-          "testString": "assert($('h4').css('height') == '25px', 'Your code should change the <code>h4</code> <code>height</code> property to a value of 25 pixels.');"
+          "text":
+            "Your code should change the <code>h4</code> <code>height</code> property to a value of 25 pixels.",
+          "testString":
+            "assert($('h4').css('height') == '25px', 'Your code should change the <code>h4</code> <code>height</code> property to a value of 25 pixels.');"
         }
       ],
       "solutions": [],
@@ -220,16 +228,22 @@
       ],
       "tests": [
         {
-          "text": "Your code should add one <code>strong</code> tag to the markup.",
-          "testString": "assert($('strong').length == 1, 'Your code should add one <code>strong</code> tag to the markup.');"
+          "text":
+            "Your code should add one <code>strong</code> tag to the markup.",
+          "testString":
+            "assert($('strong').length == 1, 'Your code should add one <code>strong</code> tag to the markup.');"
         },
         {
-          "text": "The <code>strong</code> tag should be inside the <code>p</code> tag.",
-          "testString": "assert($('p').children('strong').length == 1, 'The <code>strong</code> tag should be inside the <code>p</code> tag.');"
+          "text":
+            "The <code>strong</code> tag should be inside the <code>p</code> tag.",
+          "testString":
+            "assert($('p').children('strong').length == 1, 'The <code>strong</code> tag should be inside the <code>p</code> tag.');"
         },
         {
-          "text": "The <code>strong</code> tag should wrap around the words \"Stanford University\".",
-          "testString": "assert($('strong').text().match(/Stanford University/gi), 'The <code>strong</code> tag should wrap around the words \"Stanford University\".');"
+          "text":
+            "The <code>strong</code> tag should wrap around the words \"Stanford University\".",
+          "testString":
+            "assert($('strong').text().match(/Stanford University/gi), 'The <code>strong</code> tag should wrap around the words \"Stanford University\".');"
         }
       ],
       "solutions": [],
@@ -299,15 +313,20 @@
       "tests": [
         {
           "text": "Your code should add a <code>u</code> tag to the markup.",
-          "testString": "assert($('u').length === 1, 'Your code should add a <code>u</code> tag to the markup.');"
+          "testString":
+            "assert($('u').length === 1, 'Your code should add a <code>u</code> tag to the markup.');"
         },
         {
-          "text": "The <code>u</code> tag should wrap around the text \"Ph.D. students\".",
-          "testString": "assert($('u').text() === 'Ph.D. students', 'The <code>u</code> tag should wrap around the text \"Ph.D. students\".');"
+          "text":
+            "The <code>u</code> tag should wrap around the text \"Ph.D. students\".",
+          "testString":
+            "assert($('u').text() === 'Ph.D. students', 'The <code>u</code> tag should wrap around the text \"Ph.D. students\".');"
         },
         {
-          "text": "The <code>u</code> tag should not wrap around the parent <code>div</code> tag.",
-          "testString": "assert($('u').children('div').length === 0, 'The <code>u</code> tag should not wrap around the parent <code>div</code> tag.');"
+          "text":
+            "The <code>u</code> tag should not wrap around the parent <code>div</code> tag.",
+          "testString":
+            "assert($('u').children('div').length === 0, 'The <code>u</code> tag should not wrap around the parent <code>div</code> tag.');"
         }
       ],
       "solutions": [],
@@ -376,11 +395,14 @@
       "tests": [
         {
           "text": "Your code should add an <code>em</code> tag to the markup.",
-          "testString": "assert($('em').length == 1, 'Your code should add an <code>em</code> tag to the markup.');"
+          "testString":
+            "assert($('em').length == 1, 'Your code should add an <code>em</code> tag to the markup.');"
         },
         {
-          "text": "The <code>em</code> tag should wrap around the contents of the <code>p</code> tag but not the <code>p</code> tag itself.",
-          "testString": "assert($('p').children().length == 1 && $('em').children().length == 2, 'The <code>em</code> tag should wrap around the contents of the <code>p</code> tag but not the <code>p</code> tag itself.');"
+          "text":
+            "The <code>em</code> tag should wrap around the contents of the <code>p</code> tag but not the <code>p</code> tag itself.",
+          "testString":
+            "assert($('p').children().length == 1 && $('em').children().length == 2, 'The <code>em</code> tag should wrap around the contents of the <code>p</code> tag but not the <code>p</code> tag itself.');"
         }
       ],
       "solutions": [],
@@ -448,16 +470,22 @@
       ],
       "tests": [
         {
-          "text": "Your code should add one <code>del</code> tag to the markup.",
-          "testString": "assert($('del').length == 1, 'Your code should add one <code>del</code> tag to the markup.');"
+          "text":
+            "Your code should add one <code>del</code> tag to the markup.",
+          "testString":
+            "assert($('del').length == 1, 'Your code should add one <code>del</code> tag to the markup.');"
         },
         {
-          "text": "A <code>del</code> tag should wrap around the Google text in the <code>h4</code> tag. It should not contain the word Alphabet.",
-          "testString": "assert($('del').text().match(/Google/gi) && !$('del').text().match(/Alphabet/gi), 'A <code>del</code> tag should wrap around the Google text in the <code>h4</code> tag. It should not contain the word Alphabet.');"
+          "text":
+            "A <code>del</code> tag should wrap around the Google text in the <code>h4</code> tag. It should not contain the word Alphabet.",
+          "testString":
+            "assert($('del').text().match(/Google/gi) && !$('del').text().match(/Alphabet/gi), 'A <code>del</code> tag should wrap around the Google text in the <code>h4</code> tag. It should not contain the word Alphabet.');"
         },
         {
-          "text": "Include the word Alphabet in the <code>h4</code> tag, without strikethrough formatting.",
-          "testString": "assert($('h4').html().match(/Alphabet/gi), 'Include the word Alphabet in the <code>h4</code> tag, without strikethrough formatting.');"
+          "text":
+            "Include the word Alphabet in the <code>h4</code> tag, without strikethrough formatting.",
+          "testString":
+            "assert($('h4').html().match(/Alphabet/gi), 'Include the word Alphabet in the <code>h4</code> tag, without strikethrough formatting.');"
         }
       ],
       "solutions": [],
@@ -527,11 +555,14 @@
       "tests": [
         {
           "text": "Your code should add an <code>hr</code> tag to the markup.",
-          "testString": "assert($('hr').length == 1, 'Your code should add an <code>hr</code> tag to the markup.');"
+          "testString":
+            "assert($('hr').length == 1, 'Your code should add an <code>hr</code> tag to the markup.');"
         },
         {
-          "text": "The <code>hr</code> tag should come between the title and the paragraph.",
-          "testString": "assert(code.match(/<\\/h4>\\s*?<hr(>|\\s*?\\/>)\\s*?<em>/gi), 'The <code>hr</code> tag should come between the title and the paragraph.');"
+          "text":
+            "The <code>hr</code> tag should come between the title and the paragraph.",
+          "testString":
+            "assert(code.match(/<\\/h4>\\s*?<hr(>|\\s*?\\/>)\\s*?<em>/gi), 'The <code>hr</code> tag should come between the title and the paragraph.');"
         }
       ],
       "solutions": [],
@@ -595,7 +626,7 @@
       "title": "Adjust the background-color Property of Text",
       "description": [
         "Instead of adjusting your overall background or the color of the text to make the foreground easily readable, you can add a <code>background-color</code> to the element holding the text you want to emphasize. This challenge uses <code>rgba()</code> instead of <code>hex</code> codes or normal <code>rgb()</code>.",
-        "<blockquote>rgba stands for:<br>  r = red<br>  g = green<br>  b = blue<br>  a = alpha/level of opacity</blockquote>",
+        "<blockquote>rgba stands for:<br>&nbsp;&nbsp;r = red<br>&nbsp;&nbsp;g = green<br>&nbsp;&nbsp;b = blue<br>&nbsp;&nbsp;a = alpha/level of opacity</blockquote>",
         "The RGB values can range from 0 to 255. The alpha value can range from 1, which is fully opaque or a solid color, to 0, which is fully transparent or clear. <code>rgba()</code> is great to use in this case, as it allows you to adjust the opacity. This means you don't have to completely block out the background.",
         "You'll use <code>background-color: rgba(45, 45, 45, 0.1)</code> for this challenge. It produces a dark gray color that is nearly transparent given the low opacity value of 0.1.",
         "<hr>",
@@ -604,16 +635,22 @@
       ],
       "tests": [
         {
-          "text": "Your code should add a <code>background-color</code> property to the <code>h4</code> element set to <code>rgba(45, 45, 45, 0.1)</code>.",
-          "testString": "assert(code.match(/background-color:\\s*?rgba\\(\\s*?45\\s*?,\\s*?45\\s*?,\\s*?45\\s*?,\\s*?0?\\.1\\s*?\\)/gi), 'Your code should add a <code>background-color</code> property to the <code>h4</code> element set to <code>rgba(45, 45, 45, 0.1)</code>.');"
+          "text":
+            "Your code should add a <code>background-color</code> property to the <code>h4</code> element set to <code>rgba(45, 45, 45, 0.1)</code>.",
+          "testString":
+            "assert(code.match(/background-color:\\s*?rgba\\(\\s*?45\\s*?,\\s*?45\\s*?,\\s*?45\\s*?,\\s*?0?\\.1\\s*?\\)/gi), 'Your code should add a <code>background-color</code> property to the <code>h4</code> element set to <code>rgba(45, 45, 45, 0.1)</code>.');"
         },
         {
-          "text": "Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels.",
-          "testString": "assert($('h4').css('padding-top') == '10px' && $('h4').css('padding-right') == '10px' && $('h4').css('padding-bottom') == '10px' && $('h4').css('padding-left') == '10px', 'Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels.');"
+          "text":
+            "Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels.",
+          "testString":
+            "assert($('h4').css('padding-top') == '10px' && $('h4').css('padding-right') == '10px' && $('h4').css('padding-bottom') == '10px' && $('h4').css('padding-left') == '10px', 'Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels.');"
         },
         {
-          "text": "The <code>height</code> property on the <code>h4</code> element should be removed.",
-          "testString": "assert(!($('h4').css('height') == '25px'), 'The <code>height</code> property on the <code>h4</code> element should be removed.');"
+          "text":
+            "The <code>height</code> property on the <code>h4</code> element should be removed.",
+          "testString":
+            "assert(!($('h4').css('height') == '25px'), 'The <code>height</code> property on the <code>h4</code> element should be removed.');"
         }
       ],
       "solutions": [],
@@ -684,8 +721,10 @@
       ],
       "tests": [
         {
-          "text": "Your code should add a <code>font-size</code> property to the <code>h4</code> element set to 27 pixels.",
-          "testString": "assert($('h4').css('font-size') == '27px', 'Your code should add a <code>font-size</code> property to the <code>h4</code> element set to 27 pixels.');"
+          "text":
+            "Your code should add a <code>font-size</code> property to the <code>h4</code> element set to 27 pixels.",
+          "testString":
+            "assert($('h4').css('font-size') == '27px', 'Your code should add a <code>font-size</code> property to the <code>h4</code> element set to 27 pixels.');"
         }
       ],
       "solutions": [],
@@ -759,12 +798,16 @@
       ],
       "tests": [
         {
-          "text": "Your code should add a <code>box-shadow</code> property for the <code>thumbnail</code> id.",
-          "testString": "assert(code.match(/#thumbnail\\s*?{\\s*?box-shadow/g), 'Your code should add a <code>box-shadow</code> property for the <code>thumbnail</code> id.');"
+          "text":
+            "Your code should add a <code>box-shadow</code> property for the <code>thumbnail</code> id.",
+          "testString":
+            "assert(code.match(/#thumbnail\\s*?{\\s*?box-shadow/g), 'Your code should add a <code>box-shadow</code> property for the <code>thumbnail</code> id.');"
         },
         {
-          "text": "You should use the given CSS for the <code>box-shadow</code> value.",
-          "testString": "assert(code.match(/box-shadow:\\s*?0\\s+?10px\\s+?20px\\s+?rgba\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0?\\.19\\),\\s*?0\\s+?6px\\s+?6px\\s+?rgba\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0?\\.23\\)/gi), 'You should use the given CSS for the <code>box-shadow</code> value.');"
+          "text":
+            "You should use the given CSS for the <code>box-shadow</code> value.",
+          "testString":
+            "assert(code.match(/box-shadow:\\s*?0\\s+?10px\\s+?20px\\s+?rgba\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0?\\.19\\),\\s*?0\\s+?6px\\s+?6px\\s+?rgba\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0?\\.23\\)/gi), 'You should use the given CSS for the <code>box-shadow</code> value.');"
         }
       ],
       "solutions": [],
@@ -840,8 +883,10 @@
       ],
       "tests": [
         {
-          "text": "Your code should set the <code>opacity</code> property to 0.7 on the anchor tags by selecting the class of <code>links</code>.",
-          "testString": "assert.approximately(parseFloat($('.links').css('opacity')), 0.7, 0.1, 'Your code should set the <code>opacity</code> property to 0.7 on the anchor tags by selecting the class of <code>links</code>.');"
+          "text":
+            "Your code should set the <code>opacity</code> property to 0.7 on the anchor tags by selecting the class of <code>links</code>.",
+          "testString":
+            "assert.approximately(parseFloat($('.links').css('opacity')), 0.7, 0.1, 'Your code should set the <code>opacity</code> property to 0.7 on the anchor tags by selecting the class of <code>links</code>.');"
         }
       ],
       "solutions": [],
@@ -919,11 +964,13 @@
       "tests": [
         {
           "text": "The <code>h4</code> text should be uppercase.",
-          "testString": "assert($('h4').css('text-transform') === 'uppercase', 'The <code>h4</code> text should be uppercase.');"
+          "testString":
+            "assert($('h4').css('text-transform') === 'uppercase', 'The <code>h4</code> text should be uppercase.');"
         },
         {
           "text": "The original text of the h4 should not be changed.",
-          "testString": "assert(($('h4').text() !== $('h4').text().toUpperCase()), 'The original text of the h4 should not be changed.');"
+          "testString":
+            "assert(($('h4').text() !== $('h4').text().toUpperCase()), 'The original text of the h4 should not be changed.');"
         }
       ],
       "solutions": [],
@@ -999,28 +1046,40 @@
       ],
       "tests": [
         {
-          "text": "Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels.",
-          "testString": "assert($('h1').css('font-size') == '68px', 'Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels.');"
+          "text":
+            "Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels.",
+          "testString":
+            "assert($('h1').css('font-size') == '68px', 'Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels.');"
         },
         {
-          "text": "Your code should set the <code>font-size</code> property for the <code>h2</code> tag to 52 pixels.",
-          "testString": "assert($('h2').css('font-size') == '52px', 'Your code should set the <code>font-size</code> property for the <code>h2</code> tag to 52 pixels.');"
+          "text":
+            "Your code should set the <code>font-size</code> property for the <code>h2</code> tag to 52 pixels.",
+          "testString":
+            "assert($('h2').css('font-size') == '52px', 'Your code should set the <code>font-size</code> property for the <code>h2</code> tag to 52 pixels.');"
         },
         {
-          "text": "Your code should set the <code>font-size</code> property for the <code>h3</code> tag to 40 pixels.",
-          "testString": "assert($('h3').css('font-size') == '40px', 'Your code should set the <code>font-size</code> property for the <code>h3</code> tag to 40 pixels.');"
+          "text":
+            "Your code should set the <code>font-size</code> property for the <code>h3</code> tag to 40 pixels.",
+          "testString":
+            "assert($('h3').css('font-size') == '40px', 'Your code should set the <code>font-size</code> property for the <code>h3</code> tag to 40 pixels.');"
         },
         {
-          "text": "Your code should set the <code>font-size</code> property for the <code>h4</code> tag to 32 pixels.",
-          "testString": "assert($('h4').css('font-size') == '32px', 'Your code should set the <code>font-size</code> property for the <code>h4</code> tag to 32 pixels.');"
+          "text":
+            "Your code should set the <code>font-size</code> property for the <code>h4</code> tag to 32 pixels.",
+          "testString":
+            "assert($('h4').css('font-size') == '32px', 'Your code should set the <code>font-size</code> property for the <code>h4</code> tag to 32 pixels.');"
         },
         {
-          "text": "Your code should set the <code>font-size</code> property for the <code>h5</code> tag to 21 pixels.",
-          "testString": "assert($('h5').css('font-size') == '21px', 'Your code should set the <code>font-size</code> property for the <code>h5</code> tag to 21 pixels.');"
+          "text":
+            "Your code should set the <code>font-size</code> property for the <code>h5</code> tag to 21 pixels.",
+          "testString":
+            "assert($('h5').css('font-size') == '21px', 'Your code should set the <code>font-size</code> property for the <code>h5</code> tag to 21 pixels.');"
         },
         {
-          "text": "Your code should set the <code>font-size</code> property for the <code>h6</code> tag to 14 pixels.",
-          "testString": "assert($('h6').css('font-size') == '14px', 'Your code should set the <code>font-size</code> property for the <code>h6</code> tag to 14 pixels.');"
+          "text":
+            "Your code should set the <code>font-size</code> property for the <code>h6</code> tag to 14 pixels.",
+          "testString":
+            "assert($('h6').css('font-size') == '14px', 'Your code should set the <code>font-size</code> property for the <code>h6</code> tag to 14 pixels.');"
         }
       ],
       "solutions": [],
@@ -1065,28 +1124,40 @@
       ],
       "tests": [
         {
-          "text": "Your code should set the <code>font-weight</code> property for the <code>h1</code> tag to 800.",
-          "testString": "assert($('h1').css('font-weight') == '800', 'Your code should set the <code>font-weight</code> property for the <code>h1</code> tag to 800.');"
+          "text":
+            "Your code should set the <code>font-weight</code> property for the <code>h1</code> tag to 800.",
+          "testString":
+            "assert($('h1').css('font-weight') == '800', 'Your code should set the <code>font-weight</code> property for the <code>h1</code> tag to 800.');"
         },
         {
-          "text": "Your code should set the <code>font-weight</code> property for the <code>h2</code> tag to 600.",
-          "testString": "assert($('h2').css('font-weight') == '600', 'Your code should set the <code>font-weight</code> property for the <code>h2</code> tag to 600.');"
+          "text":
+            "Your code should set the <code>font-weight</code> property for the <code>h2</code> tag to 600.",
+          "testString":
+            "assert($('h2').css('font-weight') == '600', 'Your code should set the <code>font-weight</code> property for the <code>h2</code> tag to 600.');"
         },
         {
-          "text": "Your code should set the <code>font-weight</code> property for the <code>h3</code> tag to 500.",
-          "testString": "assert($('h3').css('font-weight') == '500', 'Your code should set the <code>font-weight</code> property for the <code>h3</code> tag to 500.');"
+          "text":
+            "Your code should set the <code>font-weight</code> property for the <code>h3</code> tag to 500.",
+          "testString":
+            "assert($('h3').css('font-weight') == '500', 'Your code should set the <code>font-weight</code> property for the <code>h3</code> tag to 500.');"
         },
         {
-          "text": "Your code should set the <code>font-weight</code> property for the <code>h4</code> tag to 400.",
-          "testString": "assert($('h4').css('font-weight') == '400', 'Your code should set the <code>font-weight</code> property for the <code>h4</code> tag to 400.');"
+          "text":
+            "Your code should set the <code>font-weight</code> property for the <code>h4</code> tag to 400.",
+          "testString":
+            "assert($('h4').css('font-weight') == '400', 'Your code should set the <code>font-weight</code> property for the <code>h4</code> tag to 400.');"
         },
         {
-          "text": "Your code should set the <code>font-weight</code> property for the <code>h5</code> tag to 300.",
-          "testString": "assert($('h5').css('font-weight') == '300', 'Your code should set the <code>font-weight</code> property for the <code>h5</code> tag to 300.');"
+          "text":
+            "Your code should set the <code>font-weight</code> property for the <code>h5</code> tag to 300.",
+          "testString":
+            "assert($('h5').css('font-weight') == '300', 'Your code should set the <code>font-weight</code> property for the <code>h5</code> tag to 300.');"
         },
         {
-          "text": "Your code should set the <code>font-weight</code> property for the <code>h6</code> tag to 200.",
-          "testString": "assert($('h6').css('font-weight') == '200', 'Your code should set the <code>font-weight</code> property for the <code>h6</code> tag to 200.');"
+          "text":
+            "Your code should set the <code>font-weight</code> property for the <code>h6</code> tag to 200.",
+          "testString":
+            "assert($('h6').css('font-weight') == '200', 'Your code should set the <code>font-weight</code> property for the <code>h6</code> tag to 200.');"
         }
       ],
       "solutions": [],
@@ -1148,8 +1219,10 @@
       ],
       "tests": [
         {
-          "text": "Your <code>p</code> tag should have a <code>font-size</code> of 16 pixels.",
-          "testString": "assert($('p').css('font-size') == '16px', 'Your <code>p</code> tag should have a <code>font-size</code> of 16 pixels.');"
+          "text":
+            "Your <code>p</code> tag should have a <code>font-size</code> of 16 pixels.",
+          "testString":
+            "assert($('p').css('font-size') == '16px', 'Your <code>p</code> tag should have a <code>font-size</code> of 16 pixels.');"
         }
       ],
       "solutions": [],
@@ -1187,8 +1260,10 @@
       ],
       "tests": [
         {
-          "text": "Your code should set the <code>line-height</code> of the <code>p</code> tag to 25 pixels.",
-          "testString": "assert($('p').css('line-height') == '25px', 'Your code should set the <code>line-height</code> of the <code>p</code> tag to 25 pixels.');"
+          "text":
+            "Your code should set the <code>line-height</code> of the <code>p</code> tag to 25 pixels.",
+          "testString":
+            "assert($('p').css('line-height') == '25px', 'Your code should set the <code>line-height</code> of the <code>p</code> tag to 25 pixels.');"
         }
       ],
       "solutions": [],
@@ -1223,18 +1298,22 @@
       "description": [
         "This challenge will touch on the usage of pseudo-classes. A pseudo-class is a keyword that can be added to selectors, in order to select a specific state of the element.",
         "For example, the styling of an anchor tag can be changed for its hover state using the <code>:hover</code> pseudo-class selector. Here's the CSS to change the <code>color</code> of the anchor tag to red during its hover state:",
-        "<blockquote>a:hover {<br>  color: red;<br>}</blockquote>",
+        "<blockquote>a:hover {<br>&nbsp;&nbsp;color: red;<br>}</blockquote>",
         "<hr>",
         "The code editor has a CSS rule to style all <code>a</code> tags black. Add a rule so that when the user hovers over the <code>a</code> tag, the <code>color</code> is blue."
       ],
       "tests": [
         {
-          "text": "The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.",
-          "testString": "assert($('a').css('color') == 'rgb(0, 0, 0)', 'The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.');"
+          "text":
+            "The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.",
+          "testString":
+            "assert($('a').css('color') == 'rgb(0, 0, 0)', 'The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.');"
         },
         {
-          "text": "The anchor tag should have a <code>color</code> of blue on hover.",
-          "testString": "assert(code.match(/a:hover\\s*?{\\s*?color:\\s*?blue;\\s*?}/gi), 'The anchor tag should have a <code>color</code> of blue on hover.');"
+          "text":
+            "The anchor tag should have a <code>color</code> of blue on hover.",
+          "testString":
+            "assert(code.match(/a:hover\\s*?{\\s*?color:\\s*?blue;\\s*?}/gi), 'The anchor tag should have a <code>color</code> of blue on hover.');"
         }
       ],
       "solutions": [],
@@ -1269,7 +1348,7 @@
       "description": [
         "CSS treats each HTML element as its own box, which is usually referred to as the <code>CSS Box Model</code>. Block-level items automatically start on a new line (think headings, paragraphs, and divs) while inline items sit within surrounding content (like images or spans). The default layout of elements in this way is called the <code>normal flow</code> of a document, but CSS offers the position property to override it.",
         "When the position of an element is set to <code>relative</code>, it allows you to specify how CSS should move it <i>relative</i> to its current position in the normal flow of the page. It pairs with the CSS offset properties of <code>left</code> or <code>right</code>, and <code>top</code> or <code>bottom</code>. These say how many pixels, percentages, or ems to move the item <i>away</i> from where it is normally positioned. The following example moves the paragraph 10 pixels away from the bottom:",
-        "<blockquote>p {<br>  position: relative;<br>  bottom: 10px;<br>}</blockquote>",
+        "<blockquote>p {<br>&nbsp;&nbsp;position: relative;<br>&nbsp;&nbsp;bottom: 10px;<br>}</blockquote>",
         "Changing an element's position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position.",
         "<strong>Note</strong><br>Positioning gives you a lot of flexibility and power over the visual layout of a page. It's good to remember that no matter the position of elements, the underlying HTML markup should be organized and make sense when read from top to bottom. This is how users with visual impairments (who rely on assistive devices like screen readers) access your content.",
         "<hr>",
@@ -1277,12 +1356,16 @@
       ],
       "tests": [
         {
-          "text": "The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.",
-          "testString": "assert($('h2').css('position') == 'relative', 'The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.');"
+          "text":
+            "The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.",
+          "testString":
+            "assert($('h2').css('position') == 'relative', 'The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.');"
         },
         {
-          "text": "Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.",
-          "testString": "assert($('h2').css('top') == '15px', 'Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.');"
+          "text":
+            "Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.",
+          "testString":
+            "assert($('h2').css('top') == '15px', 'Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.');"
         }
       ],
       "solutions": [],
@@ -1324,12 +1407,16 @@
       ],
       "tests": [
         {
-          "text": "Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.",
-          "testString": "assert($('h2').css('bottom') == '10px', 'Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.');"
+          "text":
+            "Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.",
+          "testString":
+            "assert($('h2').css('bottom') == '10px', 'Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.');"
         },
         {
-          "text": "Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.",
-          "testString": "assert($('h2').css('left') == '15px', 'Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.');"
+          "text":
+            "Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.",
+          "testString":
+            "assert($('h2').css('left') == '15px', 'Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.');"
         }
       ],
       "solutions": [],
@@ -1374,16 +1461,22 @@
       ],
       "tests": [
         {
-          "text": "The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.",
-          "testString": "assert($('#searchbar').css('position') == 'absolute', 'The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.');"
+          "text":
+            "The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.",
+          "testString":
+            "assert($('#searchbar').css('position') == 'absolute', 'The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.');"
         },
         {
-          "text": "Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.",
-          "testString": "assert($('#searchbar').css('top') == '50px', 'Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.');"
+          "text":
+            "Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.",
+          "testString":
+            "assert($('#searchbar').css('top') == '50px', 'Your code should use the <code>top</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.');"
         },
         {
-          "text": "Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.",
-          "testString": "assert($('#searchbar').css('right') == '50px', 'Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.');"
+          "text":
+            "Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.",
+          "testString":
+            "assert($('#searchbar').css('right') == '50px', 'Your code should use the <code>right</code> CSS offset of 50 pixels on the <code>#searchbar</code> element.');"
         }
       ],
       "solutions": [],
@@ -1434,16 +1527,22 @@
       ],
       "tests": [
         {
-          "text": "The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.",
-          "testString": "assert($('#navbar').css('position') == 'fixed', 'The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.');"
+          "text":
+            "The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.",
+          "testString":
+            "assert($('#navbar').css('position') == 'fixed', 'The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.');"
         },
         {
-          "text": "Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.",
-          "testString": "assert($('#navbar').css('top') == '0px', 'Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.');"
+          "text":
+            "Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.",
+          "testString":
+            "assert($('#navbar').css('top') == '0px', 'Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.');"
         },
         {
-          "text": "Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.",
-          "testString": "assert($('#navbar').css('left') == '0px', 'Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.');"
+          "text":
+            "Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.",
+          "testString":
+            "assert($('#navbar').css('left') == '0px', 'Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.');"
         }
       ],
       "solutions": [],
@@ -1505,12 +1604,16 @@
       ],
       "tests": [
         {
-          "text": "The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.",
-          "testString": "assert($('#left').css('float') == 'left', 'The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.');"
+          "text":
+            "The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.",
+          "testString":
+            "assert($('#left').css('float') == 'left', 'The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.');"
         },
         {
-          "text": "The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.",
-          "testString": "assert($('#right').css('float') == 'right', 'The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.');"
+          "text":
+            "The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.",
+          "testString":
+            "assert($('#right').css('float') == 'right', 'The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.');"
         }
       ],
       "solutions": [],
@@ -1561,7 +1664,8 @@
     },
     {
       "id": "587d78a3367417b2b2512acf",
-      "title": "Change the Position of Overlapping Elements with the z-index Property",
+      "title":
+        "Change the Position of Overlapping Elements with the z-index Property",
       "description": [
         "When elements are positioned to overlap, the element coming later in the HTML markup will, by default, appear on the top of the other elements. However, the <code>z-index</code> property can specify the order of how elements are stacked on top of one another. It must be an integer (i.e. a whole number and not a decimal), and higher values for the <code>z-index</code> property of an element move it higher in the stack than those with lower values.",
         "<hr>",
@@ -1569,8 +1673,10 @@
       ],
       "tests": [
         {
-          "text": "The element with class <code>first</code> should have a <code>z-index</code> value of 2.",
-          "testString": "assert($('.first').css('z-index') == '2', 'The element with class <code>first</code> should have a <code>z-index</code> value of 2.');"
+          "text":
+            "The element with class <code>first</code> should have a <code>z-index</code> value of 2.",
+          "testString":
+            "assert($('.first').css('z-index') == '2', 'The element with class <code>first</code> should have a <code>z-index</code> value of 2.');"
         }
       ],
       "solutions": [],
@@ -1624,8 +1730,10 @@
       ],
       "tests": [
         {
-          "text": "The <code>div</code> should have a <code>margin</code> set to auto.",
-          "testString": "assert(code.match(/margin:\\s*?auto;/g), 'The <code>div</code> should have a <code>margin</code> set to auto.');"
+          "text":
+            "The <code>div</code> should have a <code>margin</code> set to auto.",
+          "testString":
+            "assert(code.match(/margin:\\s*?auto;/g), 'The <code>div</code> should have a <code>margin</code> set to auto.');"
         }
       ],
       "solutions": [],
@@ -1669,12 +1777,16 @@
       ],
       "tests": [
         {
-          "text": "The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.",
-          "testString": "assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.');"
+          "text":
+            "The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.",
+          "testString":
+            "assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.');"
         },
         {
-          "text": "The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow.",
-          "testString": "assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)', 'The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow.');"
+          "text":
+            "The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow.",
+          "testString":
+            "assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)', 'The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow.');"
         }
       ],
       "solutions": [],
@@ -1726,16 +1838,22 @@
       ],
       "tests": [
         {
-          "text": "The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.",
-          "testString": "assert($('.orange').css('background-color') == 'rgb(255, 125, 0)', 'The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.');"
+          "text":
+            "The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.",
+          "testString":
+            "assert($('.orange').css('background-color') == 'rgb(255, 125, 0)', 'The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.');"
         },
         {
-          "text": "The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.",
-          "testString": "assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.');"
+          "text":
+            "The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.",
+          "testString":
+            "assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.');"
         },
         {
-          "text": "The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry.",
-          "testString": "assert($('.raspberry').css('background-color') == 'rgb(255, 0, 125)', 'The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry.');"
+          "text":
+            "The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry.",
+          "testString":
+            "assert($('.raspberry').css('background-color') == 'rgb(255, 0, 125)', 'The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry.');"
         }
       ],
       "solutions": [],
@@ -1792,20 +1910,28 @@
       ],
       "tests": [
         {
-          "text": "The <code>header</code> element should have a <code>background-color</code> of #09A7A1.",
-          "testString": "assert($('header').css('background-color') == 'rgb(9, 167, 161)', 'The <code>header</code> element should have a <code>background-color</code> of #09A7A1.');"
+          "text":
+            "The <code>header</code> element should have a <code>background-color</code> of #09A7A1.",
+          "testString":
+            "assert($('header').css('background-color') == 'rgb(9, 167, 161)', 'The <code>header</code> element should have a <code>background-color</code> of #09A7A1.');"
         },
         {
-          "text": "The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.",
-          "testString": "assert($('footer').css('background-color') == 'rgb(9, 167, 161)', 'The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.');"
+          "text":
+            "The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.",
+          "testString":
+            "assert($('footer').css('background-color') == 'rgb(9, 167, 161)', 'The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.');"
         },
         {
-          "text": "The <code>h2</code> element should have a <code>color</code> of #09A7A1.",
-          "testString": "assert($('h2').css('color') == 'rgb(9, 167, 161)', 'The <code>h2</code> element should have a <code>color</code> of #09A7A1.');"
+          "text":
+            "The <code>h2</code> element should have a <code>color</code> of #09A7A1.",
+          "testString":
+            "assert($('h2').css('color') == 'rgb(9, 167, 161)', 'The <code>h2</code> element should have a <code>color</code> of #09A7A1.');"
         },
         {
-          "text": "The <code>button</code> element should have a <code>background-color</code> of #FF790E.",
-          "testString": "assert($('button').css('background-color') == 'rgb(255, 121, 14)', 'The <code>button</code> element should have a <code>background-color</code> of #FF790E.');"
+          "text":
+            "The <code>button</code> element should have a <code>background-color</code> of #FF790E.",
+          "testString":
+            "assert($('button').css('background-color') == 'rgb(255, 121, 14)', 'The <code>button</code> element should have a <code>background-color</code> of #FF790E.');"
         }
       ],
       "solutions": [],
@@ -1878,28 +2004,40 @@
       ],
       "tests": [
         {
-          "text": "Your code should use the <code>hsl()</code> property to declare the color green.",
-          "testString": "assert(code.match(/\\.green\\s*?{\\s*?background-color:\\s*?hsl/gi), 'Your code should use the <code>hsl()</code> property to declare the color green.');"
+          "text":
+            "Your code should use the <code>hsl()</code> property to declare the color green.",
+          "testString":
+            "assert(code.match(/\\.green\\s*?{\\s*?background-color:\\s*?hsl/gi), 'Your code should use the <code>hsl()</code> property to declare the color green.');"
         },
         {
-          "text": "Your code should use the <code>hsl()</code> property to declare the color cyan.",
-          "testString": "assert(code.match(/\\.cyan\\s*?{\\s*?background-color:\\s*?hsl/gi), 'Your code should use the <code>hsl()</code> property to declare the color cyan.');"
+          "text":
+            "Your code should use the <code>hsl()</code> property to declare the color cyan.",
+          "testString":
+            "assert(code.match(/\\.cyan\\s*?{\\s*?background-color:\\s*?hsl/gi), 'Your code should use the <code>hsl()</code> property to declare the color cyan.');"
         },
         {
-          "text": "Your code should use the <code>hsl()</code> property to declare the color blue.",
-          "testString": "assert(code.match(/\\.blue\\s*?{\\s*?background-color:\\s*?hsl/gi), 'Your code should use the <code>hsl()</code> property to declare the color blue.');"
+          "text":
+            "Your code should use the <code>hsl()</code> property to declare the color blue.",
+          "testString":
+            "assert(code.match(/\\.blue\\s*?{\\s*?background-color:\\s*?hsl/gi), 'Your code should use the <code>hsl()</code> property to declare the color blue.');"
         },
         {
-          "text": "The <code>div</code> element with class <code>green</code> should have a <code>background-color</code> of green.",
-          "testString": "assert($('.green').css('background-color') == 'rgb(0, 255, 0)', 'The <code>div</code> element with class <code>green</code> should have a <code>background-color</code> of green.');"
+          "text":
+            "The <code>div</code> element with class <code>green</code> should have a <code>background-color</code> of green.",
+          "testString":
+            "assert($('.green').css('background-color') == 'rgb(0, 255, 0)', 'The <code>div</code> element with class <code>green</code> should have a <code>background-color</code> of green.');"
         },
         {
-          "text": "The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.",
-          "testString": "assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.');"
+          "text":
+            "The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.",
+          "testString":
+            "assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.');"
         },
         {
-          "text": "The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.",
-          "testString": "assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.');"
+          "text":
+            "The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.",
+          "testString":
+            "assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.');"
         }
       ],
       "solutions": [],
@@ -1956,8 +2094,10 @@
       ],
       "tests": [
         {
-          "text": "The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.",
-          "testString": "assert(code.match(/nav\\s*?{\\s*?background-color:\\s*?hsl\\(180,\\s*?80%,\\s*?25%\\)/gi), 'The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.');"
+          "text":
+            "The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.",
+          "testString":
+            "assert(code.match(/nav\\s*?{\\s*?background-color:\\s*?hsl\\(180,\\s*?80%,\\s*?25%\\)/gi), 'The <code>nav</code> element should have a <code>background-color</code> of the adjusted cyan tone using the <code>hsl()</code> property.');"
         }
       ],
       "solutions": [],
@@ -2033,8 +2173,10 @@
       ],
       "tests": [
         {
-          "text": "The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.",
-          "testString": "assert(code.match(/background:\\s*?linear-gradient\\(35deg,\\s*?(#CCFFFF|#CFF),\\s*?(#FFCCCC|#FCC)\\);/gi), 'The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.');"
+          "text":
+            "The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.",
+          "testString":
+            "assert(code.match(/background:\\s*?linear-gradient\\(35deg,\\s*?(#CCFFFF|#CFF),\\s*?(#FFCCCC|#FCC)\\);/gi), 'The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.');"
         }
       ],
       "solutions": [],
@@ -2082,28 +2224,38 @@
       ],
       "tests": [
         {
-          "text": "The angle of the <code>repeating-linear-gradient()</code> should be 45deg.",
-          "testString": "assert(code.match(/background:\\s*?repeating-linear-gradient\\(\\s*?45deg/gi), 'The angle of the <code>repeating-linear-gradient()</code> should be 45deg.');"
+          "text":
+            "The angle of the <code>repeating-linear-gradient()</code> should be 45deg.",
+          "testString":
+            "assert(code.match(/background:\\s*?repeating-linear-gradient\\(\\s*?45deg/gi), 'The angle of the <code>repeating-linear-gradient()</code> should be 45deg.');"
         },
         {
-          "text": "The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg",
-          "testString": "assert(!code.match(/90deg/gi), 'The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg');"
+          "text":
+            "The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg",
+          "testString":
+            "assert(!code.match(/90deg/gi), 'The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg');"
         },
         {
           "text": "The color stop at 0 pixels should be <code>yellow</code>.",
-          "testString": "assert(code.match(/yellow\\s+?0px/gi), 'The color stop at 0 pixels should be <code>yellow</code>.');"
+          "testString":
+            "assert(code.match(/yellow\\s+?0px/gi), 'The color stop at 0 pixels should be <code>yellow</code>.');"
         },
         {
           "text": "One color stop at 40 pixels should be <code>yellow</code>.",
-          "testString": "assert(code.match(/yellow\\s+?40px/gi), 'One color stop at 40 pixels should be <code>yellow</code>.');"
+          "testString":
+            "assert(code.match(/yellow\\s+?40px/gi), 'One color stop at 40 pixels should be <code>yellow</code>.');"
         },
         {
-          "text": "The second color stop at 40 pixels should be <code>black</code>.",
-          "testString": "assert(code.match(/yellow\\s+?40px,\\s*?black\\s+?40px/gi), 'The second color stop at 40 pixels should be <code>black</code>.');"
+          "text":
+            "The second color stop at 40 pixels should be <code>black</code>.",
+          "testString":
+            "assert(code.match(/yellow\\s+?40px,\\s*?black\\s+?40px/gi), 'The second color stop at 40 pixels should be <code>black</code>.');"
         },
         {
-          "text": "The last color stop at 80 pixels should be <code>black</code>.",
-          "testString": "assert(code.match(/black\\s+?80px/gi), 'The last color stop at 80 pixels should be <code>black</code>.');"
+          "text":
+            "The last color stop at 80 pixels should be <code>black</code>.",
+          "testString":
+            "assert(code.match(/black\\s+?80px/gi), 'The last color stop at 80 pixels should be <code>black</code>.');"
         }
       ],
       "solutions": [],
@@ -2144,7 +2296,8 @@
     },
     {
       "id": "587d78a5367417b2b2512ad8",
-      "title": "Create Texture by Adding a Subtle Pattern as a Background Image",
+      "title":
+        "Create Texture by Adding a Subtle Pattern as a Background Image",
       "description": [
         "One way to add texture and interest to a background and have it stand out more is to add a subtle pattern. The key is balance, as you don't want the background to stand out too much, and take away from the foreground. The <code>background</code> property supports the <code>url()</code> function in order to link to an image of the chosen texture or pattern. The link address is wrapped in quotes inside the parentheses.",
         "<hr>",
@@ -2152,8 +2305,10 @@
       ],
       "tests": [
         {
-          "text": "Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.",
-          "testString": "assert(code.match(/background:\\s*?url\\((\"|')https:\\/\\/i\\.imgur\\.com\\/MJAkxbh\\.png(\"|')\\)/gi), 'Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.');"
+          "text":
+            "Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.",
+          "testString":
+            "assert(code.match(/background:\\s*?url\\((\"|')https:\\/\\/i\\.imgur\\.com\\/MJAkxbh\\.png(\"|')\\)/gi), 'Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.');"
         }
       ],
       "solutions": [],
@@ -2168,13 +2323,7 @@
           "key": "indexhtml",
           "ext": "html",
           "name": "index",
-          "contents": [
-            "<style>",
-            "  body {",
-            "    ",
-            "  }",
-            "</style>"
-          ],
+          "contents": ["<style>", "  body {", "    ", "  }", "</style>"],
           "head": [],
           "tail": []
         }
@@ -2182,17 +2331,20 @@
     },
     {
       "id": "587d78a5367417b2b2512ad9",
-      "title": "Use the CSS Transform scale Property to Change the Size of an Element",
+      "title":
+        "Use the CSS Transform scale Property to Change the Size of an Element",
       "description": [
         "To change the scale of an element, CSS has the <code>transform</code> property, along with its <code>scale()</code> function. The following code example doubles the size of all the paragraph elements on the page:",
-        "<blockquote>p {<br>  transform:scale(2);<br>}</blockquote>",
+        "<blockquote>p {<br>&nbsp;&nbsp;transform:scale(2);<br>}</blockquote>",
         "<hr>",
         "Increase the size of the element with the id of <code>ball2</code> to 1.5 times its original size."
       ],
       "tests": [
         {
-          "text": "Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.",
-          "testString": "assert(code.match(/#ball2\\s*?{\\s*?left:\\s*?65%;\\s*?transform:\\s*?scale\\(1\\.5\\);\\s*?}|#ball2\\s*?{\\s*?transform:\\s*?scale\\(1\\.5\\);\\s*?left:\\s*?65%;\\s*?}/gi), 'Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.');"
+          "text":
+            "Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.",
+          "testString":
+            "assert(code.match(/#ball2\\s*?{\\s*?left:\\s*?65%;\\s*?transform:\\s*?scale\\(1\\.5\\);\\s*?}|#ball2\\s*?{\\s*?transform:\\s*?scale\\(1\\.5\\);\\s*?left:\\s*?65%;\\s*?}/gi), 'Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.');"
         }
       ],
       "solutions": [],
@@ -2240,18 +2392,21 @@
     },
     {
       "id": "587d78a5367417b2b2512ada",
-      "title": "Use the CSS Transform scale Property to Scale an Element on Hover",
+      "title":
+        "Use the CSS Transform scale Property to Scale an Element on Hover",
       "description": [
         "The <code>transform</code> property has a variety of functions that lets you scale, move, rotate, skew, etc., your elements. When used with pseudo-classes such as <code>:hover</code> that specify a certain state of an element, the <code>transform</code> property can easily add interactivity to your elements.",
         "Here's an example to scale the paragraph elements to 2.1 times their original size when a user hovers over them:",
-        "<blockquote>p:hover {<br>  transform: scale(2.1);<br>}</blockquote>",
+        "<blockquote>p:hover {<br>&nbsp;&nbsp;transform: scale(2.1);<br>}</blockquote>",
         "<hr>",
         "Add a CSS rule for the <code>hover</code> state of the <code>div</code> and use the <code>transform</code> property to scale the <code>div</code> element to 1.1 times its original size when a user hovers over it."
       ],
       "tests": [
         {
-          "text": "The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.",
-          "testString": "assert(code.match(/div:hover\\s*?{\\s*?transform:\\s*?scale\\(1\\.1\\);/gi), 'The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.');"
+          "text":
+            "The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.",
+          "testString":
+            "assert(code.match(/div:hover\\s*?{\\s*?transform:\\s*?scale\\(1\\.1\\);/gi), 'The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.');"
         }
       ],
       "solutions": [],
@@ -2292,18 +2447,21 @@
     },
     {
       "id": "587d78a6367417b2b2512adb",
-      "title": "Use the CSS Transform Property skewX to Skew an Element Along the X-Axis",
+      "title":
+        "Use the CSS Transform Property skewX to Skew an Element Along the X-Axis",
       "description": [
         "The next function of the <code>transform</code> property is <code>skewX()</code>, which skews the selected element along its X (horizontal) axis by a given degree.",
         "The following code skews the paragraph element by -32 degrees along the X-axis.",
-        "<blockquote>p {<br>  transform: skewX(-32deg);<br>}</blockquote>",
+        "<blockquote>p {<br>&nbsp;&nbsp;transform: skewX(-32deg);<br>}</blockquote>",
         "<hr>",
         "Skew the element with the id of <code>bottom</code> by 24 degrees along the X-axis by using the <code>transform</code> property."
       ],
       "tests": [
         {
-          "text": "The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.",
-          "testString": "assert(code.match(/#bottom\\s*?{\\s*?.*?\\s*?transform:\\s*?skewX\\(24deg\\);/g), 'The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.');"
+          "text":
+            "The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.",
+          "testString":
+            "assert(code.match(/#bottom\\s*?{\\s*?.*?\\s*?transform:\\s*?skewX\\(24deg\\);/g), 'The element with id <code>bottom</code> should be skewed by 24 degrees along its X-axis.');"
         }
       ],
       "solutions": [],
@@ -2344,7 +2502,8 @@
     },
     {
       "id": "587d78a6367417b2b2512adc",
-      "title": "Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis",
+      "title":
+        "Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis",
       "description": [
         "Given that the <code>skewX()</code> function skews the selected element along the X-axis by a given degree, it is no surprise that the <code>skewY()</code> property skews an element along the Y (vertical) axis.",
         "<hr>",
@@ -2352,8 +2511,10 @@
       ],
       "tests": [
         {
-          "text": "The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis.",
-          "testString": "assert(code.match(/#top\\s*?{\\s*?.*?\\s*?transform:\\s*?skewY\\(-10deg\\);/g), 'The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis.');"
+          "text":
+            "The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis.",
+          "testString":
+            "assert(code.match(/#top\\s*?{\\s*?.*?\\s*?transform:\\s*?skewY\\(-10deg\\);/g), 'The element with id <code>top</code> should be skewed by -10 degrees along its Y-axis.');"
         }
       ],
       "solutions": [],
@@ -2404,16 +2565,22 @@
       ],
       "tests": [
         {
-          "text": "The value of the <code>background-color</code> property should be set to <code>transparent</code>.",
-          "testString": "assert(code.match(/background-color:\\s*?transparent;/gi), 'The value of the <code>background-color</code> property should be set to <code>transparent</code>.');"
+          "text":
+            "The value of the <code>background-color</code> property should be set to <code>transparent</code>.",
+          "testString":
+            "assert(code.match(/background-color:\\s*?transparent;/gi), 'The value of the <code>background-color</code> property should be set to <code>transparent</code>.');"
         },
         {
-          "text": "The value of the <code>border-radius</code> property should be set to <code>50%</code>.",
-          "testString": "assert(code.match(/border-radius:\\s*?50%;/gi), 'The value of the <code>border-radius</code> property should be set to <code>50%</code>.');"
+          "text":
+            "The value of the <code>border-radius</code> property should be set to <code>50%</code>.",
+          "testString":
+            "assert(code.match(/border-radius:\\s*?50%;/gi), 'The value of the <code>border-radius</code> property should be set to <code>50%</code>.');"
         },
         {
-          "text": "The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.",
-          "testString": "assert(code.match(/box-shadow:\\s*?25px\\s+?10px\\s+?0(px)?\\s+?0(px)?\\s+?blue\\s*?;/gi), 'The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.');"
+          "text":
+            "The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.",
+          "testString":
+            "assert(code.match(/box-shadow:\\s*?25px\\s+?10px\\s+?0(px)?\\s+?0(px)?\\s+?blue\\s*?;/gi), 'The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.');"
         }
       ],
       "solutions": [],
@@ -2457,7 +2624,7 @@
       "title": "Create a More Complex Shape Using CSS and HTML",
       "description": [
         "One of the most popular shapes in the world is the heart shape, and this challenge creates it with raw CSS. But first, you need to understand the <code>:before</code> and <code>:after</code> selectors. These selectors are used to add something before or after a selected element. In the following example, a <code>:before</code> selector is used to add a rectangle to an element with the class <code>heart</code>:",
-        "<blockquote>.heart:before {<br>  content: \"\";<br>  background-color: yellow;<br>  border-radius: 25%;<br>  position: absolute;<br>  height: 50px;<br>  width: 70px;<br>  top: -50px;<br>  left: 5px;<br>}</blockquote>",
+        "<blockquote>.heart:before {<br>&nbsp;&nbsp;content: \"\";<br>&nbsp;&nbsp;background-color: yellow;<br>&nbsp;&nbsp;border-radius: 25%;<br>&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;height: 50px;<br>&nbsp;&nbsp;width: 70px;<br>&nbsp;&nbsp;top: -50px;<br>&nbsp;&nbsp;left: 5px;<br>}</blockquote>",
         "For the <code>:before</code> and <code>:after</code> selectors to function properly, they must have a defined <code>content</code> property. It usually has content such as a photo or text. When the <code>:before</code> and <code>:after</code> selectors add shapes, the <code>content</code> property is still required, but it's set to an empty string.",
         "In the above example, the element with the class of <code>heart</code> has a <code>:before</code> selector that produces a yellow rectangle with <code>height</code> and <code>width</code> of 50px and 70px, respectively. This rectangle has round corners due to its 25% border radius and is positioned absolutely at 5px from the <code>left</code> and 50px above the <code>top</code> of the element.",
         "<hr>",
@@ -2467,20 +2634,28 @@
       ],
       "tests": [
         {
-          "text": "The <code>background-color</code> property of the <code>heart:after</code> selector should be pink.",
-          "testString": "assert(code.match(/\\.heart:after\\s*?{\\s*?background-color:\\s*?pink;/gi), 'The <code>background-color</code> property of the <code>heart:after</code> selector should be pink.');"
+          "text":
+            "The <code>background-color</code> property of the <code>heart:after</code> selector should be pink.",
+          "testString":
+            "assert(code.match(/\\.heart:after\\s*?{\\s*?background-color:\\s*?pink;/gi), 'The <code>background-color</code> property of the <code>heart:after</code> selector should be pink.');"
         },
         {
-          "text": "The <code>border-radius</code> of the <code>heart:after</code> selector should be 50%.",
-          "testString": "assert(code.match(/border-radius:\\s*?50%/gi).length == 2, 'The <code>border-radius</code> of the <code>heart:after</code> selector should be 50%.');"
+          "text":
+            "The <code>border-radius</code> of the <code>heart:after</code> selector should be 50%.",
+          "testString":
+            "assert(code.match(/border-radius:\\s*?50%/gi).length == 2, 'The <code>border-radius</code> of the <code>heart:after</code> selector should be 50%.');"
         },
         {
-          "text": "The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.",
-          "testString": "assert(code.match(/transform:\\s*?rotate\\(-45deg\\)/gi), 'The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.');"
+          "text":
+            "The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.",
+          "testString":
+            "assert(code.match(/transform:\\s*?rotate\\(-45deg\\)/gi), 'The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.');"
         },
         {
-          "text": "The <code>content</code> of the <code>heart:before</code> selector should be an empty string.",
-          "testString": "assert(code.match(/\\.heart:before\\s*?{\\s*?content:\\s*?(\"|')\\1;/gi), 'The <code>content</code> of the <code>heart:before</code> selector should be an empty string.');"
+          "text":
+            "The <code>content</code> of the <code>heart:before</code> selector should be an empty string.",
+          "testString":
+            "assert(code.match(/\\.heart:before\\s*?{\\s*?content:\\s*?(\"|')\\1;/gi), 'The <code>content</code> of the <code>heart:before</code> selector should be an empty string.');"
         }
       ],
       "solutions": [],
@@ -2543,41 +2718,51 @@
         "<code>animation-name</code> sets the name of the animation, which is later used by <code>@keyframes</code> to tell CSS which rules go with which animations.",
         "<code>animation-duration</code> sets the length of time for the animation.",
         "<code>@keyframes</code> is how to specify exactly what happens within the animation over the duration. This is done by giving CSS properties for specific \"frames\" during the animation, with percentages ranging from 0% to 100%. If you compare this to a movie, the CSS properties for 0% is how the element displays in the opening scene. The CSS properties for 100% is how the element appears at the end, right before the credits roll. Then CSS applies the magic to transition the element over the given duration to act out the scene. Here's an example to illustrate the usage of <code>@keyframes</code> and the animation properties:",
-        "<blockquote>#anim {<br>  animation-name: colorful;<br>  animation-duration: 3s;<br>}<br>@keyframes colorful {<br>  0% {<br>   background-color: blue;<br>  }<br>  100% {<br>    background-color: yellow;<br>  }<br>}</blockquote>",
+        "<blockquote>#anim {<br>&nbsp;&nbsp;animation-name: colorful;<br>&nbsp;&nbsp;animation-duration: 3s;<br>}<br>@keyframes colorful {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp;&nbsp;&nbsp;background-color: yellow;<br>&nbsp;&nbsp;}<br>}</blockquote>",
         "For the element with the <code>anim</code> id, the code snippet above sets the <code>animation-name</code> to <code>colorful</code> and sets the <code>animation-duration</code> to 3 seconds. Then the <code>@keyframes</code> rule links to the animation properties with the name <code>colorful</code>. It sets the color to blue at the beginning of the animation (0%) which will transition to yellow by the end of the animation (100%). You aren't limited to only beginning-end transitions, you can set properties for the element for any percentage between 0% and 100%.",
         "<hr>",
         "Create an animation for the element with the id <code>rect</code>, by setting the <code>animation-name</code> to rainbow and the <code>animation-duration</code> to 4 seconds. Next, declare a <code>@keyframes</code> rule, and set the <code>background-color</code> at the beginning of the animation (<code>0%</code>) to blue, the middle of the animation (<code>50%</code>) to green, and the end of the animation (<code>100%</code>) to yellow."
       ],
       "tests": [
         {
-          "text": "The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.",
-          "testString": "assert($('#rect').css('animation-name') == 'rainbow', 'The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.');"
+          "text":
+            "The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.",
+          "testString":
+            "assert($('#rect').css('animation-name') == 'rainbow', 'The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.');"
         },
         {
-          "text": "The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.",
-          "testString": "assert($('#rect').css('animation-duration') == '4s', 'The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.');"
+          "text":
+            "The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.",
+          "testString":
+            "assert($('#rect').css('animation-duration') == '4s', 'The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.');"
         },
         {
-          "text": "The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.",
-          "testString": "assert(code.match(/@keyframes\\s+?rainbow\\s*?{/g), 'The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.');"
+          "text":
+            "The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.",
+          "testString":
+            "assert(code.match(/@keyframes\\s+?rainbow\\s*?{/g), 'The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.');"
         },
         {
-          "text": "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.",
-          "testString": "assert(code.match(/0%\\s*?{\\s*?background-color:\\s*?blue;\\s*?}/gi), 'The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.');"
+          "text":
+            "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.",
+          "testString":
+            "assert(code.match(/0%\\s*?{\\s*?background-color:\\s*?blue;\\s*?}/gi), 'The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.');"
         },
         {
-          "text": "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.",
-          "testString": "assert(code.match(/50%\\s*?{\\s*?background-color:\\s*?green;\\s*?}/gi), 'The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.');"
+          "text":
+            "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.",
+          "testString":
+            "assert(code.match(/50%\\s*?{\\s*?background-color:\\s*?green;\\s*?}/gi), 'The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.');"
         },
         {
-          "text": "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.",
-          "testString": "assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?yellow;\\s*?}/gi), 'The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.');"
+          "text":
+            "The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.",
+          "testString":
+            "assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?yellow;\\s*?}/gi), 'The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.');"
         }
       ],
       "solutions": [],
-      "hints": [
-        "Make sure the @keyframes rule links to the animation-name."
-      ],
+      "hints": ["Make sure the @keyframes rule links to the animation-name."],
       "releasedOn": "Feb 17, 2017",
       "challengeType": 0,
       "translations": {},
@@ -2618,19 +2803,23 @@
       "description": [
         "You can use CSS <code>@keyframes</code> to change the color of a button in its hover state.",
         "Here's an example of changing the width of an image on hover:",
-        "<blockquote>&lt;style&gt;<br>  img:hover {<br>    animation-name: width;<br>    animation-duration: 500ms;<br>  }<br><br>  @keyframes width {<br>    100% {<br>      width: 40px;<br>    }<br>  }<br>&lt;/style&gt;<br><br>&lt;img src=&quot;https://bit.ly/smallgooglelogo&quot; alt=&quot;Google's Logo&quot; /&gt;</blockquote>",
+        "<blockquote>&lt;style&gt;<br>&nbsp;&nbsp;img:hover {<br>&nbsp;&nbsp;&nbsp;&nbsp;animation-name: width;<br>&nbsp;&nbsp;&nbsp;&nbsp;animation-duration: 500ms;<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;@keyframes width {<br>&nbsp;&nbsp;&nbsp;&nbsp;100% {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 40px;<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;}<br>&lt;/style&gt;<br><br>&lt;img src=&quot;https://bit.ly/smallgooglelogo&quot; alt=&quot;Google's Logo&quot; /&gt;</blockquote>",
         "<hr>",
         "Note that <code>ms</code> stands for milliseconds, where 1000ms is equal to 1s.",
         "Use CSS <code>@keyframes</code> to change the <code>background-color</code> of the <code>button</code> element so it becomes <code>#4791d0</code> when a user hovers over it. The <code>@keyframes</code> rule should only have an entry for <code>100%</code>."
       ],
       "tests": [
         {
-          "text": "The @keyframes rule should use the <code>animation-name</code> background-color.",
-          "testString": "assert(code.match(/@keyframes\\s+?background-color\\s*?{/g), 'The @keyframes rule should use the <code>animation-name</code> background-color.');"
+          "text":
+            "The @keyframes rule should use the <code>animation-name</code> background-color.",
+          "testString":
+            "assert(code.match(/@keyframes\\s+?background-color\\s*?{/g), 'The @keyframes rule should use the <code>animation-name</code> background-color.');"
         },
         {
-          "text": "There should be one rule under <code>@keyframes</code> that changes the <code>background-color</code> to <code>#4791d0</code> at 100%.",
-          "testString": "assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?#4791d0;\\s*?}/gi), 'There should be one rule under <code>@keyframes</code> that changes the <code>background-color</code> to <code>#4791d0</code> at 100%.');"
+          "text":
+            "There should be one rule under <code>@keyframes</code> that changes the <code>background-color</code> to <code>#4791d0</code> at 100%.",
+          "testString":
+            "assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?#4791d0;\\s*?}/gi), 'There should be one rule under <code>@keyframes</code> that changes the <code>background-color</code> to <code>#4791d0</code> at 100%.');"
         }
       ],
       "solutions": [],
@@ -2679,8 +2868,10 @@
       ],
       "tests": [
         {
-          "text": "<code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.",
-          "testString": "assert(code.match(/button\\s*?:\\s*?hover\\s*?{[\\s\\S]*animation-fill-mode\\s*?:\\s*?forwards\\s*?;[\\s\\S]*}/gi) && code.match(/button\\s*?:\\s*?hover\\s*?{[\\s\\S]*animation-name\\s*?:\\s*?background-color\\s*?;[\\s\\S]*}/gi) && code.match(/button\\s*?:\\s*?hover\\s*?{[\\s\\S]*animation-duration\\s*?:\\s*?500ms\\s*?;[\\s\\S]*}/gi), '<code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.');"
+          "text":
+            "<code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.",
+          "testString":
+            "assert(code.match(/button\\s*?:\\s*?hover\\s*?{[\\s\\S]*animation-fill-mode\\s*?:\\s*?forwards\\s*?;[\\s\\S]*}/gi) && code.match(/button\\s*?:\\s*?hover\\s*?{[\\s\\S]*animation-name\\s*?:\\s*?background-color\\s*?;[\\s\\S]*}/gi) && code.match(/button\\s*?:\\s*?hover\\s*?{[\\s\\S]*animation-duration\\s*?:\\s*?500ms\\s*?;[\\s\\S]*}/gi), '<code>button:hover</code> should have a <code>animation-fill-mode</code> property with a value of <code>forwards</code>.');"
         }
       ],
       "solutions": [],
@@ -2726,22 +2917,28 @@
       "description": [
         "When elements have a specified <code>position</code>, such as <code>fixed</code> or <code>relative</code>, the CSS offset properties <code>right</code>, <code>left</code>, <code>top</code>, and <code>bottom</code> can be used in animation rules to create movement.",
         "As shown in the example below, you can push the item downwards then upwards by setting the <code>top</code> property of the <code>50%</code> keyframe to 50px, but having it set to 0px for the first (<code>0%</code>) and the last (<code>100%</code>) keyframe.",
-        "<blockquote>@keyframes rainbow {<br>  0% {<br>    background-color: blue;<br>    top: 0px;<br>  }<br>  50% {<br>    background-color: green;<br>    top: 50px;<br>  }<br>  100% {<br>    background-color: yellow;<br>    top: 0px;<br>  }<br>}</blockquote>",
+        "<blockquote>@keyframes rainbow {<br>&nbsp;&nbsp;0% {<br>&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;<br>&nbsp;&nbsp;&nbsp;&nbsp;top: 0px;<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;50% {<br>&nbsp;&nbsp;&nbsp;&nbsp;background-color: green;<br>&nbsp;&nbsp;&nbsp;&nbsp;top: 50px;<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;100% {<br>&nbsp;&nbsp;&nbsp;&nbsp;background-color: yellow;<br>&nbsp;&nbsp;&nbsp;&nbsp;top: 0px;<br>&nbsp;&nbsp;}<br>}</blockquote>",
         "<hr>",
         "Add a horizontal motion to the <code>div</code> animation. Using the <code>left</code> offset property, add to the <code>@keyframes</code> rule so rainbow starts at 0 pixels at <code>0%</code>, moves to 25 pixels at <code>50%</code>, and ends at -25 pixels at <code>100%</code>. Don't replace the <code>top</code> property in the editor - the animation should have both vertical and horizontal motion."
       ],
       "tests": [
         {
-          "text": "The <code>@keyframes</code> rule for <code>0%</code> should use the <code>left</code> offset of 0px.",
-          "testString": "assert(code.match(/0%\\s*?{\\s*?background-color:\\s*?blue;\\s*?top:\\s*?0px;\\s*?left:\\s*?0px;\\s*?}/gi), 'The <code>@keyframes</code> rule for <code>0%</code> should use the <code>left</code> offset of 0px.');"
+          "text":
+            "The <code>@keyframes</code> rule for <code>0%</code> should use the <code>left</code> offset of 0px.",
+          "testString":
+            "assert(code.match(/0%\\s*?{\\s*?background-color:\\s*?blue;\\s*?top:\\s*?0px;\\s*?left:\\s*?0px;\\s*?}/gi), 'The <code>@keyframes</code> rule for <code>0%</code> should use the <code>left</code> offset of 0px.');"
         },
         {
-          "text": "The <code>@keyframes</code> rule for <code>50%</code> should use the <code>left</code> offset of 25px.",
-          "testString": "assert(code.match(/50%\\s*?{\\s*?background-color:\\s*?green;\\s*?top:\\s*?50px;\\s*?left:\\s*?25px;\\s*?}/gi), 'The <code>@keyframes</code> rule for <code>50%</code> should use the <code>left</code> offset of 25px.');"
+          "text":
+            "The <code>@keyframes</code> rule for <code>50%</code> should use the <code>left</code> offset of 25px.",
+          "testString":
+            "assert(code.match(/50%\\s*?{\\s*?background-color:\\s*?green;\\s*?top:\\s*?50px;\\s*?left:\\s*?25px;\\s*?}/gi), 'The <code>@keyframes</code> rule for <code>50%</code> should use the <code>left</code> offset of 25px.');"
         },
         {
-          "text": "The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.",
-          "testString": "assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?yellow;\\s*?top:\\s*?0px;\\s*?left:\\s*?-25px;\\s*?}/gi), 'The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.');"
+          "text":
+            "The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.",
+          "testString":
+            "assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?yellow;\\s*?top:\\s*?0px;\\s*?left:\\s*?-25px;\\s*?}/gi), 'The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.');"
         }
       ],
       "solutions": [],
@@ -2798,7 +2995,8 @@
     },
     {
       "id": "587d78a7367417b2b2512ae2",
-      "title": "Create Visual Direction by Fading an Element from Left to Right",
+      "title":
+        "Create Visual Direction by Fading an Element from Left to Right",
       "description": [
         "For this challenge, you'll change the <code>opacity</code> of an animated element so it gradually fades as it reaches the right side of the screen.",
         "In the displayed animation, the round element with the gradient background moves to the right by the 50% mark of the animation per the <code>@keyframes</code> rule.",
@@ -2807,8 +3005,10 @@
       ],
       "tests": [
         {
-          "text": "The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.",
-          "testString": "assert(code.match(/@keyframes fade\\s*?{\\s*?50%\\s*?{\\s*?(?:left:\\s*?60%;\\s*?opacity:\\s*?0?\\.1;|opacity:\\s*?0?\\.1;\\s*?left:\\s*?60%;)/gi), 'The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.');"
+          "text":
+            "The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.",
+          "testString":
+            "assert(code.match(/@keyframes fade\\s*?{\\s*?50%\\s*?{\\s*?(?:left:\\s*?60%;\\s*?opacity:\\s*?0?\\.1;|opacity:\\s*?0?\\.1;\\s*?left:\\s*?60%;)/gi), 'The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.');"
         }
       ],
       "solutions": [],
@@ -2868,8 +3068,10 @@
       ],
       "tests": [
         {
-          "text": "The <code>animation-iteration-count</code> property should have a value of infinite.",
-          "testString": "assert($('#ball').css('animation-iteration-count') == 'infinite', 'The <code>animation-iteration-count</code> property should have a value of infinite.');"
+          "text":
+            "The <code>animation-iteration-count</code> property should have a value of infinite.",
+          "testString":
+            "assert($('#ball').css('animation-iteration-count') == 'infinite', 'The <code>animation-iteration-count</code> property should have a value of infinite.');"
         }
       ],
       "solutions": [],
@@ -2933,12 +3135,16 @@
       ],
       "tests": [
         {
-          "text": "The <code>animation-iteration-count</code> property for the <code>heart</code> class should have a value of infinite.",
-          "testString": "assert($('.heart').css('animation-iteration-count') == 'infinite', 'The <code>animation-iteration-count</code> property for the <code>heart</code> class should have a value of infinite.');"
+          "text":
+            "The <code>animation-iteration-count</code> property for the <code>heart</code> class should have a value of infinite.",
+          "testString":
+            "assert($('.heart').css('animation-iteration-count') == 'infinite', 'The <code>animation-iteration-count</code> property for the <code>heart</code> class should have a value of infinite.');"
         },
         {
-          "text": "The <code>animation-iteration-count</code> property for the <code>back</code> class should have a value of infinite.",
-          "testString": "assert($('.back').css('animation-iteration-count') == 'infinite', 'The <code>animation-iteration-count</code> property for the <code>back</code> class should have a value of infinite.');"
+          "text":
+            "The <code>animation-iteration-count</code> property for the <code>back</code> class should have a value of infinite.",
+          "testString":
+            "assert($('.back').css('animation-iteration-count') == 'infinite', 'The <code>animation-iteration-count</code> property for the <code>back</code> class should have a value of infinite.');"
         }
       ],
       "solutions": [],
@@ -3038,8 +3244,10 @@
       ],
       "tests": [
         {
-          "text": "The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.",
-          "testString": "assert(code.match(/twinkle-1\\s*?{\\s*?50%/g), 'The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.');"
+          "text":
+            "The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.",
+          "testString":
+            "assert(code.match(/twinkle-1\\s*?{\\s*?50%/g), 'The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.');"
         }
       ],
       "solutions": [],
@@ -3124,16 +3332,22 @@
       ],
       "tests": [
         {
-          "text": "The <code>animation-duration</code> property for the star with class <code>star-1</code> should remain at 1s.",
-          "testString": "assert($('.star-1').css('animation-duration') == '1s', 'The <code>animation-duration</code> property for the star with class <code>star-1</code> should remain at 1s.');"
+          "text":
+            "The <code>animation-duration</code> property for the star with class <code>star-1</code> should remain at 1s.",
+          "testString":
+            "assert($('.star-1').css('animation-duration') == '1s', 'The <code>animation-duration</code> property for the star with class <code>star-1</code> should remain at 1s.');"
         },
         {
-          "text": "The <code>animation-duration</code> property for the star with class <code>star-2</code> should be 0.9s.",
-          "testString": "assert($('.star-2').css('animation-duration') == '0.9s', 'The <code>animation-duration</code> property for the star with class <code>star-2</code> should be 0.9s.');"
+          "text":
+            "The <code>animation-duration</code> property for the star with class <code>star-2</code> should be 0.9s.",
+          "testString":
+            "assert($('.star-2').css('animation-duration') == '0.9s', 'The <code>animation-duration</code> property for the star with class <code>star-2</code> should be 0.9s.');"
         },
         {
-          "text": "The <code>animation-duration</code> property for the star with class <code>star-3</code> should be 1.1s.",
-          "testString": "assert($('.star-3').css('animation-duration') == '1.1s', 'The <code>animation-duration</code> property for the star with class <code>star-3</code> should be 1.1s.');"
+          "text":
+            "The <code>animation-duration</code> property for the star with class <code>star-3</code> should be 1.1s.",
+          "testString":
+            "assert($('.star-3').css('animation-duration') == '1.1s', 'The <code>animation-duration</code> property for the star with class <code>star-3</code> should be 1.1s.');"
         }
       ],
       "solutions": [],
@@ -3217,12 +3431,16 @@
       ],
       "tests": [
         {
-          "text": "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.",
-          "testString": "assert($('#ball1').css('animation-timing-function') == 'linear', 'The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.');"
+          "text":
+            "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.",
+          "testString":
+            "assert($('#ball1').css('animation-timing-function') == 'linear', 'The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.');"
         },
         {
-          "text": "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.",
-          "testString": "assert($('#ball2').css('animation-timing-function') == 'ease-out', 'The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.');"
+          "text":
+            "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.",
+          "testString":
+            "assert($('#ball2').css('animation-timing-function') == 'ease-out', 'The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.');"
         }
       ],
       "solutions": [],
@@ -3295,12 +3513,16 @@
       ],
       "tests": [
         {
-          "text": "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be the linear-equivalent cubic-bezier function.",
-          "testString": "assert($('#ball1').css('animation-timing-function') == 'cubic-bezier(0.25, 0.25, 0.75, 0.75)', 'The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be the linear-equivalent cubic-bezier function.');"
+          "text":
+            "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be the linear-equivalent cubic-bezier function.",
+          "testString":
+            "assert($('#ball1').css('animation-timing-function') == 'cubic-bezier(0.25, 0.25, 0.75, 0.75)', 'The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be the linear-equivalent cubic-bezier function.');"
         },
         {
-          "text": "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should not change.",
-          "testString": "assert($('#ball2').css('animation-timing-function') == 'ease-out', 'The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should not change.');"
+          "text":
+            "The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should not change.",
+          "testString":
+            "assert($('#ball2').css('animation-timing-function') == 'ease-out', 'The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should not change.');"
         }
       ],
       "solutions": [],
@@ -3372,16 +3594,22 @@
       ],
       "tests": [
         {
-          "text": "The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .",
-          "testString": "assert($('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)', 'The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .');"
+          "text":
+            "The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .",
+          "testString":
+            "assert($('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)', 'The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .');"
         },
         {
-          "text": "The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.",
-          "testString": "assert($('#red').css('animation-timing-function') !== 'linear', 'The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.');"
+          "text":
+            "The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.",
+          "testString":
+            "assert($('#red').css('animation-timing-function') !== 'linear', 'The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.');"
         },
         {
-          "text": "The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.",
-          "testString": "assert($('#blue').css('animation-timing-function') == 'ease-out', 'The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.');"
+          "text":
+            "The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.",
+          "testString":
+            "assert($('#blue').css('animation-timing-function') == 'ease-out', 'The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.');"
         }
       ],
       "solutions": [],
@@ -3447,8 +3675,10 @@
       ],
       "tests": [
         {
-          "text": "The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values as specified.",
-          "testString": "assert($('#green').css('animation-timing-function') == 'cubic-bezier(0.311, 0.441, 0.444, 1.649)', 'The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values as specified.');"
+          "text":
+            "The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values as specified.",
+          "testString":
+            "assert($('#green').css('animation-timing-function') == 'cubic-bezier(0.311, 0.441, 0.444, 1.649)', 'The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values as specified.');"
         }
       ],
       "solutions": [],
@@ -3506,4 +3736,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/challenges/01-responsive-web-design/basic-css.json b/challenges/01-responsive-web-design/basic-css.json
index 898e6239b..f3f5ac9aa 100644
--- a/challenges/01-responsive-web-design/basic-css.json
+++ b/challenges/01-responsive-web-design/basic-css.json
@@ -20,11 +20,14 @@
       "tests": [
         {
           "text": "Your <code>h2</code> element should be red.",
-          "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>h2</code> element should be red.');"
+          "testString":
+            "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>h2</code> element should be red.');"
         },
         {
-          "text": "Your <code>style</code> declaration should end with a <code>;</code> .",
-          "testString": "assert(code.match(/<h2\\s+style\\s*=\\s*(\\'|\")\\s*color\\s*:\\s*(?:rgb\\(\\s*255\\s*,\\s*0\\s*,\\s*0\\s*\\)|rgb\\(\\s*100%\\s*,\\s*0%\\s*,\\s*0%\\s*\\)|red|#ff0000|#f00|hsl\\(\\s*0\\s*,\\s*100%\\s*,\\s*50%\\s*\\))\\s*\\;(\\'|\")>\\s*CatPhotoApp\\s*<\\/h2>/),' Your <code>style</code> declaration should end with a <code>;</code> .');"
+          "text":
+            "Your <code>style</code> declaration should end with a <code>;</code> .",
+          "testString":
+            "assert(code.match(/<h2\\s+style\\s*=\\s*(\\'|\")\\s*color\\s*:\\s*(?:rgb\\(\\s*255\\s*,\\s*0\\s*,\\s*0\\s*\\)|rgb\\(\\s*100%\\s*,\\s*0%\\s*,\\s*0%\\s*\\)|red|#ff0000|#f00|hsl\\(\\s*0\\s*,\\s*100%\\s*,\\s*50%\\s*\\))\\s*\\;(\\'|\")>\\s*CatPhotoApp\\s*<\\/h2>/),' Your <code>style</code> declaration should end with a <code>;</code> .');"
         }
       ],
       "challengeType": 0,
@@ -137,24 +140,32 @@
       ],
       "tests": [
         {
-          "text": "Remove the style attribute from your <code>h2</code> element.",
-          "testString": "assert(!$(\"h2\").attr(\"style\"), 'Remove the style attribute from your <code>h2</code> element.');"
+          "text":
+            "Remove the style attribute from your <code>h2</code> element.",
+          "testString":
+            "assert(!$(\"h2\").attr(\"style\"), 'Remove the style attribute from your <code>h2</code> element.');"
         },
         {
           "text": "Create a <code>style</code> element.",
-          "testString": "assert($(\"style\") && $(\"style\").length > 1, 'Create a <code>style</code> element.');"
+          "testString":
+            "assert($(\"style\") && $(\"style\").length > 1, 'Create a <code>style</code> element.');"
         },
         {
           "text": "Your <code>h2</code> element should be blue.",
-          "testString": "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'Your <code>h2</code> element should be blue.');"
+          "testString":
+            "assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'Your <code>h2</code> element should be blue.');"
         },
         {
-          "text": "Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace.",
-          "testString": "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), 'Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace.');"
+          "text":
+            "Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace.",
+          "testString":
+            "assert(code.match(/h2\\s*\\{\\s*color\\s*:.*;\\s*\\}/g), 'Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace.');"
         },
         {
-          "text": "Make sure all your <code>style</code> elements are valid and have a closing tag.",
-          "testString": "assert(code.match(/<\\/style>/g) && code.match(/<\\/style>/g).length === (code.match(/<style((\\s)*((type|media|scoped|title|disabled)=\"[^\"]*\")?(\\s)*)*>/g) || []).length, 'Make sure all your <code>style</code> elements are valid and have a closing tag.');"
+          "text":
+            "Make sure all your <code>style</code> elements are valid and have a closing tag.",
+          "testString":
+            "assert(code.match(/<\\/style>/g) && code.match(/<\\/style>/g).length === (code.match(/<style((\\s)*((type|media|scoped|title|disabled)=\"[^\"]*\")?(\\s)*)*>/g) || []).length, 'Make sure all your <code>style</code> elements are valid and have a closing tag.');"
         }
       ],
       "challengeType": 0,
@@ -281,19 +292,26 @@
       "tests": [
         {
           "text": "Your <code>h2</code> element should be red.",
-          "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>h2</code> element should be red.');"
+          "testString":
+            "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>h2</code> element should be red.');"
         },
         {
-          "text": "Your <code>h2</code> element should have the class <code>red-text</code>.",
-          "testString": "assert($(\"h2\").hasClass(\"red-text\"), 'Your <code>h2</code> element should have the class <code>red-text</code>.');"
+          "text":
+            "Your <code>h2</code> element should have the class <code>red-text</code>.",
+          "testString":
+            "assert($(\"h2\").hasClass(\"red-text\"), 'Your <code>h2</code> element should have the class <code>red-text</code>.');"
         },
         {
-          "text": "Your stylesheet should declare a <code>red-text</code> 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 <code>red-text</code> class and have its color set to red.');"
+          "text":
+            "Your stylesheet should declare a <code>red-text</code> 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 <code>red-text</code> class and have its color set to red.');"
         },
         {
-          "text": "Do not use inline style declarations like <code>style=\"color&#58; red\"</code> in your <code>h2</code> element.",
-          "testString": "assert($(\"h2\").attr(\"style\") === undefined, 'Do not use inline style declarations like <code>style=\"color&#58; red\"</code> in your <code>h2</code> element.');"
+          "text":
+            "Do not use inline style declarations like <code>style=\"color&#58; red\"</code> in your <code>h2</code> element.",
+          "testString":
+            "assert($(\"h2\").attr(\"style\") === undefined, 'Do not use inline style declarations like <code>style=\"color&#58; red\"</code> in your <code>h2</code> element.');"
         }
       ],
       "challengeType": 0,
@@ -420,23 +438,31 @@
       "tests": [
         {
           "text": "Your <code>h2</code> element should be red.",
-          "testString": "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>h2</code> element should be red.');"
+          "testString":
+            "assert($(\"h2\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your <code>h2</code> element should be red.');"
         },
         {
-          "text": "Your <code>h2</code> element should have the class <code>red-text</code>.",
-          "testString": "assert($(\"h2\").hasClass(\"red-text\"), 'Your <code>h2</code> element should have the class <code>red-text</code>.');"
+          "text":
+            "Your <code>h2</code> element should have the class <code>red-text</code>.",
+          "testString":
+            "assert($(\"h2\").hasClass(\"red-text\"), 'Your <code>h2</code> element should have the class <code>red-text</code>.');"
         },
         {
           "text": "Your first <code>p</code> element should be red.",
-          "testString": "assert($(\"p:eq(0)\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your first <code>p</code> element should be red.');"
+          "testString":
+            "assert($(\"p:eq(0)\").css(\"color\") === \"rgb(255, 0, 0)\", 'Your first <code>p</code> element should be red.');"
         },
         {
-          "text": "Your second and third <code>p</code> 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 <code>p</code> elements should not be red.');"
+          "text":
+            "Your second and third <code>p</code> 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 <code>p</code> elements should not be red.');"
         },
         {
-          "text": "Your first <code>p</code> element should have the class <code>red-text</code>.",
-          "testString": "assert($(\"p:eq(0)\").hasClass(\"red-text\"), 'Your first <code>p</code> element should have the class <code>red-text</code>.');"
+          "text":
+            "Your first <code>p</code> element should have the class <code>red-text</code>.",
+          "testString":
+            "assert($(\"p:eq(0)\").hasClass(\"red-text\"), 'Your first <code>p</code> element should have the class <code>red-text</code>.');"
         }
       ],
       "challengeType": 0,
@@ -551,8 +577,10 @@
       ],
       "tests": [
         {
-          "text": "Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.",
-          "testString": "assert(code.match(/p\\s*{\\s*font-size\\s*:\\s*16\\s*px\\s*;\\s*}/i), 'Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.');"
+          "text":
+            "Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.",
+          "testString":
+            "assert(code.match(/p\\s*{\\s*font-size\\s*:\\s*16\\s*px\\s*;\\s*}/i), 'Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.');"
         }
       ],
       "challengeType": 0,
@@ -656,8 +684,10 @@
       ],
       "tests": [
         {
-          "text": "Your <code>p</code> elements should use the font <code>monospace</code>.",
-          "testString": "assert($(\"p\").not(\".red-text\").css(\"font-family\").match(/monospace/i), 'Your <code>p</code> elements should use the font <code>monospace</code>.');"
+          "text":
+            "Your <code>p</code> elements should use the font <code>monospace</code>.",
+          "testString":
+            "assert($(\"p\").not(\".red-text\").css(\"font-family\").match(/monospace/i), 'Your <code>p</code> elements should use the font <code>monospace</code>.');"
         }
       ],
       "challengeType": 0,
@@ -775,19 +805,25 @@
       "tests": [
         {
           "text": "Import the <code>Lobster</code> font.",
-          "testString": "assert(new RegExp(\"googleapis\", \"gi\").test(code), 'Import the <code>Lobster</code> font.');"
+          "testString":
+            "assert(new RegExp(\"googleapis\", \"gi\").test(code), 'Import the <code>Lobster</code> font.');"
         },
         {
-          "text": "Your <code>h2</code> element should use the font <code>Lobster</code>.",
-          "testString": "assert($(\"h2\").css(\"font-family\").match(/lobster/i), 'Your <code>h2</code> element should use the font <code>Lobster</code>.');"
+          "text":
+            "Your <code>h2</code> element should use the font <code>Lobster</code>.",
+          "testString":
+            "assert($(\"h2\").css(\"font-family\").match(/lobster/i), 'Your <code>h2</code> element should use the font <code>Lobster</code>.');"
         },
         {
           "text": "Use an <code>h2</code> CSS selector to change the font.",
-          "testString": "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?\\s*;\\s*\\}/gi.test(code), 'Use an <code>h2</code> CSS selector to change the font.');"
+          "testString":
+            "assert(/\\s*h2\\s*\\{\\s*font-family\\:\\s*(\\'|\")?Lobster(\\'|\")?\\s*;\\s*\\}/gi.test(code), 'Use an <code>h2</code> CSS selector to change the font.');"
         },
         {
-          "text": "Your <code>p</code> element should still use the font <code>monospace</code>.",
-          "testString": "assert($(\"p\").css(\"font-family\").match(/monospace/i), 'Your <code>p</code> element should still use the font <code>monospace</code>.');"
+          "text":
+            "Your <code>p</code> element should still use the font <code>monospace</code>.",
+          "testString":
+            "assert($(\"p\").css(\"font-family\").match(/monospace/i), 'Your <code>p</code> element should still use the font <code>monospace</code>.');"
         }
       ],
       "challengeType": 0,
@@ -909,19 +945,26 @@
       "tests": [
         {
           "text": "Your h2 element should use the font <code>Lobster</code>.",
-          "testString": "assert($(\"h2\").css(\"font-family\").match(/^\"?lobster/i), 'Your h2 element should use the font <code>Lobster</code>.');"
+          "testString":
+            "assert($(\"h2\").css(\"font-family\").match(/^\"?lobster/i), 'Your h2 element should use the font <code>Lobster</code>.');"
         },
         {
-          "text": "Your h2 element should degrade to the font <code>monospace</code> when <code>Lobster</code> 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 <code>monospace</code> when <code>Lobster</code> is not available.');"
+          "text":
+            "Your h2 element should degrade to the font <code>monospace</code> when <code>Lobster</code> 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 <code>monospace</code> when <code>Lobster</code> is not available.');"
         },
         {
-          "text": "Comment out your call to Google for the <code>Lobster</code> font by putting <code>&#60!--</code> in front of it.",
-          "testString": "assert(new RegExp(\"<!--[^fc]\", \"gi\").test(code), 'Comment out your call to Google for the <code>Lobster</code> font by putting <code>&#60!--</code> in front of it.');"
+          "text":
+            "Comment out your call to Google for the <code>Lobster</code> font by putting <code>&#60!--</code> in front of it.",
+          "testString":
+            "assert(new RegExp(\"<!--[^fc]\", \"gi\").test(code), 'Comment out your call to Google for the <code>Lobster</code> font by putting <code>&#60!--</code> in front of it.');"
         },
         {
-          "text": "Be sure to close your comment by adding <code>--&#62;</code>.",
-          "testString": "assert(new RegExp(\"[^fc]-->\", \"gi\").test(code), 'Be sure to close your comment by adding <code>--&#62;</code>.');"
+          "text":
+            "Be sure to close your comment by adding <code>--&#62;</code>.",
+          "testString":
+            "assert(new RegExp(\"[^fc]-->\", \"gi\").test(code), 'Be sure to close your comment by adding <code>--&#62;</code>.');"
         }
       ],
       "challengeType": 0,
@@ -1044,12 +1087,16 @@
       ],
       "tests": [
         {
-          "text": "Your <code>img</code> element should have the class <code>smaller-image</code>.",
-          "testString": "assert($(\"img[src='https://bit.ly/fcc-relaxing-cat']\").attr('class') === \"smaller-image\", 'Your <code>img</code> element should have the class <code>smaller-image</code>.');"
+          "text":
+            "Your <code>img</code> element should have the class <code>smaller-image</code>.",
+          "testString":
+            "assert($(\"img[src='https://bit.ly/fcc-relaxing-cat']\").attr('class') === \"smaller-image\", 'Your <code>img</code> element should have the class <code>smaller-image</code>.');"
         },
         {
-          "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%.');"
         }
       ],
       "challengeType": 0,
@@ -1174,24 +1221,32 @@
       ],
       "tests": [
         {
-          "text": "Your <code>img</code> element should have the class <code>smaller-image</code>.",
-          "testString": "assert($(\"img\").hasClass(\"smaller-image\"), 'Your <code>img</code> element should have the class <code>smaller-image</code>.');"
+          "text":
+            "Your <code>img</code> element should have the class <code>smaller-image</code>.",
+          "testString":
+            "assert($(\"img\").hasClass(\"smaller-image\"), 'Your <code>img</code> element should have the class <code>smaller-image</code>.');"
         },
         {
-          "text": "Your <code>img</code> element should have the class <code>thick-green-border</code>.",
-          "testString": "assert($(\"img\").hasClass(\"thick-green-border\"), 'Your <code>img</code> element should have the class <code>thick-green-border</code>.');"
+          "text":
+            "Your <code>img</code> element should have the class <code>thick-green-border</code>.",
+          "testString":
+            "assert($(\"img\").hasClass(\"thick-green-border\"), 'Your <code>img</code> element should have the class <code>thick-green-border</code>.');"
         },
         {
           "text": "Give your image a border width of <code>10px</code>.",
-          "testString": "assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\"), 10) >= 8 && parseInt($(\"img\").css(\"border-top-width\"), 10) <= 12, 'Give your image a border width of <code>10px</code>.');"
+          "testString":
+            "assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\"), 10) >= 8 && parseInt($(\"img\").css(\"border-top-width\"), 10) <= 12, 'Give your image a border width of <code>10px</code>.');"
         },
         {
           "text": "Give your image a border style of <code>solid</code>.",
-          "testString": "assert($(\"img\").css(\"border-right-style\") === \"solid\", 'Give your image a border style of <code>solid</code>.');"
+          "testString":
+            "assert($(\"img\").css(\"border-right-style\") === \"solid\", 'Give your image a border style of <code>solid</code>.');"
         },
         {
-          "text": "The border around your <code>img</code> element should be green.",
-          "testString": "assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", 'The border around your <code>img</code> element should be green.');"
+          "text":
+            "The border around your <code>img</code> element should be green.",
+          "testString":
+            "assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", 'The border around your <code>img</code> element should be green.');"
         }
       ],
       "challengeType": 0,
@@ -1250,7 +1305,8 @@
           ]
         }
       },
-      "guideUrl": "https://guide.freecodecamp.org/certificates/add-borders-around-your-elements",
+      "guideUrl":
+        "https://guide.freecodecamp.org/certificates/add-borders-around-your-elements",
       "files": {
         "indexhtml": {
           "key": "indexhtml",
@@ -1325,12 +1381,15 @@
       ],
       "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 <code>10px</code>",
-          "testString": "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'Your image should have a border radius of <code>10px</code>');"
+          "testString":
+            "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'Your image should have a border radius of <code>10px</code>');"
         }
       ],
       "challengeType": 0,
@@ -1372,7 +1431,8 @@
           ]
         }
       },
-      "guideUrl": "https://guide.freecodecamp.org/certificates/add-rounded-corners-a-border-radius",
+      "guideUrl":
+        "https://guide.freecodecamp.org/certificates/add-rounded-corners-a-border-radius",
       "files": {
         "indexhtml": {
           "key": "indexhtml",
@@ -1452,12 +1512,15 @@
       ],
       "tests": [
         {
-          "text": "Your image should have a border radius of <code>50%</code>, making it perfectly circular.",
-          "testString": "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'Your image should have a border radius of <code>50%</code>, making it perfectly circular.');"
+          "text":
+            "Your image should have a border radius of <code>50%</code>, making it perfectly circular.",
+          "testString":
+            "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'Your image should have a border radius of <code>50%</code>, making it perfectly circular.');"
         },
         {
           "text": "Be sure to use a percentage value of <code>50%</code>.",
-          "testString": "assert(code.match(/50%/g), 'Be sure to use a percentage value of <code>50%</code>.');"
+          "testString":
+            "assert(code.match(/50%/g), 'Be sure to use a percentage value of <code>50%</code>.');"
         }
       ],
       "challengeType": 0,
@@ -1577,12 +1640,16 @@
       ],
       "tests": [
         {
-          "text": "Give your <code>div</code> element the class <code>silver-background</code>.",
-          "testString": "assert($(\"div\").hasClass(\"silver-background\"), 'Give your <code>div</code> element the class <code>silver-background</code>.');"
+          "text":
+            "Give your <code>div</code> element the class <code>silver-background</code>.",
+          "testString":
+            "assert($(\"div\").hasClass(\"silver-background\"), 'Give your <code>div</code> element the class <code>silver-background</code>.');"
         },
         {
-          "text": "Your <code>div</code> element should have a silver background.",
-          "testString": "assert($(\"div\").css(\"background-color\") === \"rgb(192, 192, 192)\", 'Your <code>div</code> element should have a silver background.');"
+          "text":
+            "Your <code>div</code> element should have a silver background.",
+          "testString":
+            "assert($(\"div\").css(\"background-color\") === \"rgb(192, 192, 192)\", 'Your <code>div</code> element should have a silver background.');"
         }
       ],
       "challengeType": 0,
@@ -1714,8 +1781,10 @@
       ],
       "tests": [
         {
-          "text": "Give your <code>form</code> element the id of <code>cat-photo-form</code>.",
-          "testString": "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your <code>form</code> element the id of <code>cat-photo-form</code>.');"
+          "text":
+            "Give your <code>form</code> element the id of <code>cat-photo-form</code>.",
+          "testString":
+            "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your <code>form</code> element the id of <code>cat-photo-form</code>.');"
         }
       ],
       "challengeType": 0,
@@ -1857,20 +1926,28 @@
       ],
       "tests": [
         {
-          "text": "Give your <code>form</code> element the id of <code>cat-photo-form</code>.",
-          "testString": "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your <code>form</code> element the id of <code>cat-photo-form</code>.');"
+          "text":
+            "Give your <code>form</code> element the id of <code>cat-photo-form</code>.",
+          "testString":
+            "assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your <code>form</code> element the id of <code>cat-photo-form</code>.');"
         },
         {
-          "text": "Your <code>form</code> element should have the <code>background-color</code> of green.",
-          "testString": "assert($(\"#cat-photo-form\").css(\"background-color\") === \"rgb(0, 128, 0)\", 'Your <code>form</code> element should have the <code>background-color</code> of green.');"
+          "text":
+            "Your <code>form</code> element should have the <code>background-color</code> of green.",
+          "testString":
+            "assert($(\"#cat-photo-form\").css(\"background-color\") === \"rgb(0, 128, 0)\", 'Your <code>form</code> element should have the <code>background-color</code> of green.');"
         },
         {
-          "text": "Make sure your <code>form</code> element has an <code>id</code> attribute.",
-          "testString": "assert(code.match(/<form.*cat-photo-form.*>/gi) && code.match(/<form.*cat-photo-form.*>/gi).length > 0, 'Make sure your <code>form</code> element has an <code>id</code> attribute.');"
+          "text":
+            "Make sure your <code>form</code> element has an <code>id</code> attribute.",
+          "testString":
+            "assert(code.match(/<form.*cat-photo-form.*>/gi) && code.match(/<form.*cat-photo-form.*>/gi).length > 0, 'Make sure your <code>form</code> element has an <code>id</code> attribute.');"
         },
         {
-          "text": "Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.",
-          "testString": "assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi), 'Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.');"
+          "text":
+            "Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.",
+          "testString":
+            "assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi), 'Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.');"
         }
       ],
       "challengeType": 0,
@@ -2011,8 +2088,10 @@
       ],
       "tests": [
         {
-          "text": "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.",
-          "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"20px\", 'Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.');"
+          "text":
+            "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.",
+          "testString":
+            "assert($(\".blue-box\").css(\"padding-top\") === \"20px\", 'Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.');"
         }
       ],
       "challengeType": 0,
@@ -2069,7 +2148,8 @@
           ]
         }
       },
-      "guideUrl": "https://guide.freecodecamp.org/certificates/adjust-the-padding-of-an-element",
+      "guideUrl":
+        "https://guide.freecodecamp.org/certificates/adjust-the-padding-of-an-element",
       "files": {
         "indexhtml": {
           "key": "indexhtml",
@@ -2130,8 +2210,10 @@
       ],
       "tests": [
         {
-          "text": "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.",
-          "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"20px\", 'Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.');"
+          "text":
+            "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.",
+          "testString":
+            "assert($(\".blue-box\").css(\"margin-top\") === \"20px\", 'Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.');"
         }
       ],
       "challengeType": 0,
@@ -2177,7 +2259,8 @@
           ]
         }
       },
-      "guideUrl": "https://guide.freecodecamp.org/certificates/adjust-the-margin-of-an-element",
+      "guideUrl":
+        "https://guide.freecodecamp.org/certificates/adjust-the-margin-of-an-element",
       "files": {
         "indexhtml": {
           "key": "indexhtml",
@@ -2240,8 +2323,10 @@
       ],
       "tests": [
         {
-          "text": "Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.",
-          "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"-15px\", 'Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.');"
+          "text":
+            "Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.",
+          "testString":
+            "assert($(\".blue-box\").css(\"margin-top\") === \"-15px\", 'Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.');"
         }
       ],
       "challengeType": 0,
@@ -2287,7 +2372,8 @@
           ]
         }
       },
-      "guideUrl": "https://guide.freecodecamp.org/certificates/add-a-negative-margin-to-an-element",
+      "guideUrl":
+        "https://guide.freecodecamp.org/certificates/add-a-negative-margin-to-an-element",
       "files": {
         "indexhtml": {
           "key": "indexhtml",
@@ -2348,26 +2434,35 @@
       ],
       "tests": [
         {
-          "text": "Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.",
-          "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.');"
+          "text":
+            "Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.",
+          "testString":
+            "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.');"
         },
         {
-          "text": "Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.",
-          "testString": "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.');"
+          "text":
+            "Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.",
+          "testString":
+            "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.');"
         },
         {
-          "text": "Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.",
-          "testString": "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.');"
+          "text":
+            "Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.",
+          "testString":
+            "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.');"
         },
         {
-          "text": "Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.",
-          "testString": "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.');"
+          "text":
+            "Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.",
+          "testString":
+            "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.');"
         }
       ],
       "challengeType": 0,
       "translations": {
         "de": {
-          "title": "Gib jeder Seite eines Elements einen unterschiedlichen Innenabstand",
+          "title":
+            "Gib jeder Seite eines Elements einen unterschiedlichen Innenabstand",
           "description": [
             "Manchmal wirst du einem Element auf jeder Seite unterschiedliche Innenabstände – also <code>padding</code> – geben wollen.",
             "CSS erlaubt dir den Innenabstand - <code>padding</code> - eines Elements auf allen Seiten einzeln mit den Eigenschaften <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> und <code>padding-left</code> zu steuern.",
@@ -2385,7 +2480,8 @@
           ]
         },
         "pt-br": {
-          "title": "Dê Valores Diferentes de Preenchimento a Cada Lado de um Elemento",
+          "title":
+            "Dê Valores Diferentes de Preenchimento a Cada Lado de um Elemento",
           "description": [
             "As vezes pode ser que você queira personalizar um elemento para que tenha um preenchimento (<code>padding</code>) diferente em cada um de seus lados.",
             "O CSS permite controlar o preenchimento (<code>padding</code>) de um elemento em todos os quatro lados: superior, direito, inferior e esquerdo, com as propriedades <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> e <code>padding-left</code>.",
@@ -2394,7 +2490,8 @@
           ]
         },
         "ru": {
-          "title": "Добавьте разный отступ содердимого с каждой стороны элемента",
+          "title":
+            "Добавьте разный отступ содердимого с каждой стороны элемента",
           "description": [
             "Иногда вам может потребоваться изменить элемент таким образом, чтобы отступ содержимого <code>padding</code> с каждой из сторон был разным.",
             "CSS позволяет вам контролировать значение свойства <code>padding</code> элемента со всех сторон с помощью свойств: <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, <code>padding-left</code>.",
@@ -2403,7 +2500,8 @@
           ]
         }
       },
-      "guideUrl": "https://guide.freecodecamp.org/certificates/add-different-padding-to-each-side-of-an-element",
+      "guideUrl":
+        "https://guide.freecodecamp.org/certificates/add-different-padding-to-each-side-of-an-element",
       "files": {
         "indexhtml": {
           "key": "indexhtml",
@@ -2465,26 +2563,35 @@
       ],
       "tests": [
         {
-          "text": "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.",
-          "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.');"
+          "text":
+            "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.",
+          "testString":
+            "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.');"
         },
         {
-          "text": "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.",
-          "testString": "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.');"
+          "text":
+            "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.",
+          "testString":
+            "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.');"
         },
         {
-          "text": "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.",
-          "testString": "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.');"
+          "text":
+            "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.",
+          "testString":
+            "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.');"
         },
         {
-          "text": "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.",
-          "testString": "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.');"
+          "text":
+            "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.",
+          "testString":
+            "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.');"
         }
       ],
       "challengeType": 0,
       "translations": {
         "de": {
-          "title": "Füge jeder Seite eines Elements einen unterschiedlichen Außenabstand hinzu",
+          "title":
+            "Füge jeder Seite eines Elements einen unterschiedlichen Außenabstand hinzu",
           "description": [
             "Manchmal wirst du einem Element auf jeder Seite einen unterschiedlichen Außenabstand - <code>margin</code> - geben wollen.",
             "CSS erlaubt dir ebenfalls den Außenabstand - <code>margin</code> - eines Elements auf jeder Seite einzeln mit den Eigenschaften <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code> und <code>margin-left</code> zu steuern.",
@@ -2582,30 +2689,41 @@
       ],
       "tests": [
         {
-          "text": "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.",
-          "testString": "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.');"
+          "text":
+            "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.",
+          "testString":
+            "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.');"
         },
         {
-          "text": "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.",
-          "testString": "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.');"
+          "text":
+            "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.",
+          "testString":
+            "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.');"
         },
         {
-          "text": "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.",
-          "testString": "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.');"
+          "text":
+            "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.",
+          "testString":
+            "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.');"
         },
         {
-          "text": "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.",
-          "testString": "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.');"
+          "text":
+            "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.",
+          "testString":
+            "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.');"
         },
         {
-          "text": "You should use the clockwise notation to set the padding of <code>blue-box</code> class.",
-          "testString": "assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), 'You should use the clockwise notation to set the padding of <code>blue-box</code> class.');"
+          "text":
+            "You should use the clockwise notation to set the padding of <code>blue-box</code> class.",
+          "testString":
+            "assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), 'You should use the clockwise notation to set the padding of <code>blue-box</code> class.');"
         }
       ],
       "challengeType": 0,
       "translations": {
         "de": {
-          "title": "Nutze die Notation im Uhrzeigersinn um den Innenabstand eines Elements zu bestimmen",
+          "title":
+            "Nutze die Notation im Uhrzeigersinn um den Innenabstand eines Elements zu bestimmen",
           "description": [
             "Anstatt die Eigenschaften <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> und <code>padding-left</code> zu verwenden, kannst du sie alle in einer Zeile schreiben:",
             "<code>padding: 10px 20px 10px 20px;</code>",
@@ -2615,7 +2733,8 @@
           ]
         },
         "es": {
-          "title": "Utiliza notación en sentido horario para especificar el relleno de un elemento",
+          "title":
+            "Utiliza notación en sentido horario para especificar el relleno de un elemento",
           "description": [
             "En lugar de especificar las propiedades <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> y <code>padding-left</code> de un elemento, puedes especificar todas en una sóla línea, así: ",
             "<code>padding: 10px 20px 10px 20px;</code>",
@@ -2625,7 +2744,8 @@
           ]
         },
         "pt-br": {
-          "title": "Use Notação em Sentido Horário para Especificar o Preenchimento de um Elemento",
+          "title":
+            "Use Notação em Sentido Horário para Especificar o Preenchimento de um Elemento",
           "description": [
             "Ao invés de especificar as propriedades <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code> e <code>padding-left</code> de um elemento, você pode especificar todas elas em uma só linha, assim:",
             "<code>padding: 10px 20px 10px 20px;</code>",
@@ -2635,7 +2755,8 @@
           ]
         },
         "ru": {
-          "title": "Используйте систему ссылок по часовой стрелке для установки отступа содержмого элемента",
+          "title":
+            "Используйте систему ссылок по часовой стрелке для установки отступа содержмого элемента",
           "description": [
             "Вместо указания свойств элемента: <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, <code>padding-left</code>, вы можете указать их в строку, например:",
             "<code>padding: 10px 20px 10px 20px;</code>",
@@ -2705,26 +2826,35 @@
       ],
       "tests": [
         {
-          "text": "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.",
-          "testString": "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.');"
+          "text":
+            "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.",
+          "testString":
+            "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.');"
         },
         {
-          "text": "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.",
-          "testString": "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.');"
+          "text":
+            "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.",
+          "testString":
+            "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.');"
         },
         {
-          "text": "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.",
-          "testString": "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.');"
+          "text":
+            "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.",
+          "testString":
+            "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.');"
         },
         {
-          "text": "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.",
-          "testString": "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.');"
+          "text":
+            "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.",
+          "testString":
+            "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.');"
         }
       ],
       "challengeType": 0,
       "translations": {
         "de": {
-          "title": "Nutze die Notation im Uhrzeigersinn um den Außenabstand eines Elements zu bestimmen",
+          "title":
+            "Nutze die Notation im Uhrzeigersinn um den Außenabstand eines Elements zu bestimmen",
           "description": [
             "Versuchen wir das noch einmal, aber diesmal mit dem Außenabstand – also <code>margin</code>.",
             "Anstatt die Eigenschaften <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code> und <code>margin-left</code> zu verwenden, kannst du alle in eine Zeile schreiben:",
@@ -2735,7 +2865,8 @@
           ]
         },
         "es": {
-          "title": "Utiliza notación en sentido horario para especificar el margen de un elemento",
+          "title":
+            "Utiliza notación en sentido horario para especificar el margen de un elemento",
           "description": [
             "Vamos a intentar esto de nuevo, pero esta vez con el margen (<code>margin</code>).",
             "En lugar de especificar las propiedades <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, y <code>margin-left</code> de un elemento, puedes especificarlas en una sóla línea así: ",
@@ -2746,7 +2877,8 @@
           ]
         },
         "pt-br": {
-          "title": "Use Notação em Sentido Horário para Especificar a Margem de um Elemento",
+          "title":
+            "Use Notação em Sentido Horário para Especificar a Margem de um Elemento",
           "description": [
             "Vamos praticar isso outra vez, mas desta vez será com a margem (<code>margin</code>).",
             "Ao invés de especificar as propriedades <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, e <code>margin-left</code> de um elemento, você pode especificar todas elas em apenas uma linha assim:",
@@ -2757,7 +2889,8 @@
           ]
         },
         "ru": {
-          "title": "Используйте систему ссылок по часовой стрелке для установки отступа элемента",
+          "title":
+            "Используйте систему ссылок по часовой стрелке для установки отступа элемента",
           "description": [
             "Давайте попробуем то же самое, но со свойством <code>margin</code> на этот раз.",
             "Вмето указания свойств элемента: <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, <code>margin-left</code>, вы можете указать их в строку, например:",
@@ -2822,22 +2955,26 @@
         "You have been giving <code>id</code> or <code>class</code> attributes to elements that you wish to specifically style. These are known as ID and class selectors. There are other CSS Selectors you can use to select custom groups of elements to style.",
         "Let's bring out CatPhotoApp again to practice using CSS Selectors.",
         "For this challenge, you will use the <code>[attr=value]</code> attribute selector to style the checkboxes in CatPhotoApp. This selector matches and styles elements with a specific attribute value. For example, the below code changes the margins of all elements with the attribute <code>type</code> and a corresponding value of <code>radio</code>:",
-        "<blockquote>[type='radio'] {<br>  margin: 20px 0px 20px 0px;<br>}</blockquote>",
+        "<blockquote>[type='radio'] {<br>&nbsp;&nbsp;margin: 20px 0px 20px 0px;<br>}</blockquote>",
         "<hr>",
         "Using the <code>type</code> attribute selector, try to give the checkboxes in CatPhotoApp a top margin of 10px and a bottom margin of 15px."
       ],
       "tests": [
         {
-          "text": "The <code>type</code> attribute selector should be used to select the checkboxes.",
-          "testString": "assert(code.match(/<style>[\\s\\S]*?\\[type=(\"|')checkbox\\1\\]\\s*?{[\\s\\S]*?}[\\s\\S]*?<\\/style>/gi),'The <code>type</code> attribute selector should be used to select the checkboxes.');"
+          "text":
+            "The <code>type</code> attribute selector should be used to select the checkboxes.",
+          "testString":
+            "assert(code.match(/<style>[\\s\\S]*?\\[type=(\"|')checkbox\\1\\]\\s*?{[\\s\\S]*?}[\\s\\S]*?<\\/style>/gi),'The <code>type</code> attribute selector should be used to select the checkboxes.');"
         },
         {
           "text": "The top margins of the checkboxes should be 10px.",
-          "testString": "assert((function() {var count=0; $(\"[type='checkbox']\").each(function() { if($(this).css('marginTop') === '10px') {count++;}});return (count===3)}()),'The top margins of the checkboxes should be 10px.');"
+          "testString":
+            "assert((function() {var count=0; $(\"[type='checkbox']\").each(function() { if($(this).css('marginTop') === '10px') {count++;}});return (count===3)}()),'The top margins of the checkboxes should be 10px.');"
         },
         {
           "text": "The bottom margins of the checkboxes should be 15px.",
-          "testString": "assert((function() {var count=0; $(\"[type='checkbox']\").each(function() { if($(this).css('marginBottom') === '15px') {count++;}});return (count===3)}()),'The bottom margins of the checkboxes should be 15px.');"
+          "testString":
+            "assert((function() {var count=0; $(\"[type='checkbox']\").each(function() { if($(this).css('marginBottom') === '15px') {count++;}});return (count===3)}()),'The bottom margins of the checkboxes should be 15px.');"
         }
       ],
       "solutions": [],
@@ -2932,12 +3069,16 @@
       ],
       "tests": [
         {
-          "text": "Your <code>red-box</code> class should have a <code>padding</code> property.",
-          "testString": "assert($('.red-box').css('padding-top') != '0px' && $('.red-box').css('padding-right') != '0px' && $('.red-box').css('padding-bottom') != '0px' && $('.red-box').css('padding-left') != '0px', 'Your <code>red-box</code> class should have a <code>padding</code> property.');"
+          "text":
+            "Your <code>red-box</code> class should have a <code>padding</code> property.",
+          "testString":
+            "assert($('.red-box').css('padding-top') != '0px' && $('.red-box').css('padding-right') != '0px' && $('.red-box').css('padding-bottom') != '0px' && $('.red-box').css('padding-left') != '0px', 'Your <code>red-box</code> class should have a <code>padding</code> property.');"
         },
         {
-          "text": "Your <code>red-box</code> class should give elements 1.5em of <code>padding</code>.",
-          "testString": "assert(code.match(/\\.red-box\\s*?{\\s*?.*?\\s*?.*?\\s*?padding:\\s*?1\\.5em/gi), 'Your <code>red-box</code> class should give elements 1.5em of <code>padding</code>.');"
+          "text":
+            "Your <code>red-box</code> class should give elements 1.5em of <code>padding</code>.",
+          "testString":
+            "assert(code.match(/\\.red-box\\s*?{\\s*?.*?\\s*?.*?\\s*?padding:\\s*?1\\.5em/gi), 'Your <code>red-box</code> class should give elements 1.5em of <code>padding</code>.');"
         }
       ],
       "challengeType": 0,
@@ -3002,16 +3143,21 @@
       ],
       "tests": [
         {
-          "text": "Give your <code>body</code> element the <code>background-color</code> of black.",
-          "testString": "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'Give your <code>body</code> element the <code>background-color</code> of black.');"
+          "text":
+            "Give your <code>body</code> element the <code>background-color</code> of black.",
+          "testString":
+            "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'Give your <code>body</code> element the <code>background-color</code> of black.');"
         },
         {
-          "text": "Make sure your CSS rule is properly formatted with both opening and closing curly brackets.",
-          "testString": "assert(code.match(/<style>\\s*body\\s*\\{\\s*background.*\\s*:\\s*.*;\\s*\\}\\s*<\\/style>/i), 'Make sure your CSS rule is properly formatted with both opening and closing curly brackets.');"
+          "text":
+            "Make sure your CSS rule is properly formatted with both opening and closing curly brackets.",
+          "testString":
+            "assert(code.match(/<style>\\s*body\\s*\\{\\s*background.*\\s*:\\s*.*;\\s*\\}\\s*<\\/style>/i), 'Make sure your CSS rule is properly formatted with both opening and closing curly brackets.');"
         },
         {
           "text": "Make sure your CSS rule ends with a semi-colon.",
-          "testString": "assert(code.match(/<style>\\s*body\\s*\\{\\s*background.*\\s*:\\s*.*;\\s*\\}\\s*<\\/style>/i), 'Make sure your CSS rule ends with a semi-colon.');"
+          "testString":
+            "assert(code.match(/<style>\\s*body\\s*\\{\\s*background.*\\s*:\\s*.*;\\s*\\}\\s*<\\/style>/i), 'Make sure your CSS rule ends with a semi-colon.');"
         }
       ],
       "challengeType": 0,
@@ -3068,11 +3214,7 @@
           "key": "indexhtml",
           "ext": "html",
           "name": "index",
-          "contents": [
-            "<style>",
-            "",
-            "</style>"
-          ],
+          "contents": ["<style>", "", "</style>"],
           "head": [],
           "tail": []
         }
@@ -3092,31 +3234,43 @@
       "tests": [
         {
           "text": "Create an <code>h1</code> element.",
-          "testString": "assert(($(\"h1\").length > 0), 'Create an <code>h1</code> element.');"
+          "testString":
+            "assert(($(\"h1\").length > 0), 'Create an <code>h1</code> element.');"
         },
         {
-          "text": "Your <code>h1</code> element should have the text <code>Hello World</code>.",
-          "testString": "assert(($(\"h1\").length > 0 && $(\"h1\").text().match(/hello world/i)), 'Your <code>h1</code> element should have the text <code>Hello World</code>.');"
+          "text":
+            "Your <code>h1</code> element should have the text <code>Hello World</code>.",
+          "testString":
+            "assert(($(\"h1\").length > 0 && $(\"h1\").text().match(/hello world/i)), 'Your <code>h1</code> element should have the text <code>Hello World</code>.');"
         },
         {
           "text": "Make sure your <code>h1</code> element has a closing tag.",
-          "testString": "assert(code.match(/<\\/h1>/g) && code.match(/<h1/g) && code.match(/<\\/h1>/g).length === code.match(/<h1/g).length, 'Make sure your <code>h1</code> element has a closing tag.');"
+          "testString":
+            "assert(code.match(/<\\/h1>/g) && code.match(/<h1/g) && code.match(/<\\/h1>/g).length === code.match(/<h1/g).length, 'Make sure your <code>h1</code> element has a closing tag.');"
         },
         {
-          "text": "Give your <code>body</code> element the <code>color</code> property of <code>green</code>.",
-          "testString": "assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Give your <code>body</code> element the <code>color</code> property of <code>green</code>.');"
+          "text":
+            "Give your <code>body</code> element the <code>color</code> property of <code>green</code>.",
+          "testString":
+            "assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Give your <code>body</code> element the <code>color</code> property of <code>green</code>.');"
         },
         {
-          "text": "Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.",
-          "testString": "assert(($(\"body\").css(\"font-family\").match(/monospace/i)), 'Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.');"
+          "text":
+            "Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.",
+          "testString":
+            "assert(($(\"body\").css(\"font-family\").match(/monospace/i)), 'Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.');"
         },
         {
-          "text": "Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.",
-          "testString": "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"font-family\").match(/monospace/i)), 'Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.');"
+          "text":
+            "Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.",
+          "testString":
+            "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"font-family\").match(/monospace/i)), 'Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.');"
         },
         {
-          "text": "Your <code>h1</code> element should inherit the color green from your <code>body</code> element.",
-          "testString": "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Your <code>h1</code> element should inherit the color green from your <code>body</code> element.');"
+          "text":
+            "Your <code>h1</code> element should inherit the color green from your <code>body</code> element.",
+          "testString":
+            "assert(($(\"h1\").length > 0 && $(\"h1\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Your <code>h1</code> element should inherit the color green from your <code>body</code> element.');"
         }
       ],
       "challengeType": 0,
@@ -3197,16 +3351,21 @@
       ],
       "tests": [
         {
-          "text": "Your <code>h1</code> element should have the class <code>pink-text</code>.",
-          "testString": "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');"
+          "text":
+            "Your <code>h1</code> element should have the class <code>pink-text</code>.",
+          "testString":
+            "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');"
         },
         {
-          "text": "Your <code>&#60;style&#62;</code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.",
-          "testString": "assert(code.match(/\\.pink-text\\s*\\{\\s*color\\s*:\\s*.+\\s*;\\s*\\}/g), 'Your <code>&#60;style&#62;</code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.');"
+          "text":
+            "Your <code>&#60;style&#62;</code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.",
+          "testString":
+            "assert(code.match(/\\.pink-text\\s*\\{\\s*color\\s*:\\s*.+\\s*;\\s*\\}/g), 'Your <code>&#60;style&#62;</code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.');"
         },
         {
           "text": "Your <code>h1</code> element should be pink.",
-          "testString": "assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'Your <code>h1</code> element should be pink.');"
+          "testString":
+            "assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'Your <code>h1</code> element should be pink.');"
         }
       ],
       "challengeType": 0,
@@ -3290,20 +3449,27 @@
       ],
       "tests": [
         {
-          "text": "Your <code>h1</code> element should have the class <code>pink-text</code>.",
-          "testString": "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');"
+          "text":
+            "Your <code>h1</code> element should have the class <code>pink-text</code>.",
+          "testString":
+            "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');"
         },
         {
-          "text": "Your <code>h1</code> element should have the class <code>blue-text</code>.",
-          "testString": "assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.');"
+          "text":
+            "Your <code>h1</code> element should have the class <code>blue-text</code>.",
+          "testString":
+            "assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.');"
         },
         {
-          "text": "Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.",
-          "testString": "assert($(\".pink-text\").hasClass(\"blue-text\"), 'Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.');"
+          "text":
+            "Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.",
+          "testString":
+            "assert($(\".pink-text\").hasClass(\"blue-text\"), 'Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.');"
         },
         {
           "text": "Your <code>h1</code> element should be blue.",
-          "testString": "assert($(\"h1\").css(\"color\") === \"rgb(0, 0, 255)\", 'Your <code>h1</code> element should be blue.');"
+          "testString":
+            "assert($(\"h1\").css(\"color\") === \"rgb(0, 0, 255)\", 'Your <code>h1</code> element should be blue.');"
         }
       ],
       "challengeType": 0,
@@ -3405,38 +3571,51 @@
       ],
       "tests": [
         {
-          "text": "Your <code>h1</code> element should have the class <code>pink-text</code>.",
-          "testString": "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');"
+          "text":
+            "Your <code>h1</code> element should have the class <code>pink-text</code>.",
+          "testString":
+            "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');"
         },
         {
-          "text": "Your <code>h1</code> element should have the class <code>blue-text</code>.",
-          "testString": "assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.');"
+          "text":
+            "Your <code>h1</code> element should have the class <code>blue-text</code>.",
+          "testString":
+            "assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.');"
         },
         {
-          "text": "Give your <code>h1</code> element the id of <code>orange-text</code>.",
-          "testString": "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Give your <code>h1</code> element the id of <code>orange-text</code>.');"
+          "text":
+            "Give your <code>h1</code> element the id of <code>orange-text</code>.",
+          "testString":
+            "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Give your <code>h1</code> element the id of <code>orange-text</code>.');"
         },
         {
           "text": "There should be only one <code>h1</code> element.",
-          "testString": "assert(($(\"h1\").length === 1), 'There should be only one <code>h1</code> element.');"
+          "testString":
+            "assert(($(\"h1\").length === 1), 'There should be only one <code>h1</code> element.');"
         },
         {
-          "text": "Create a CSS declaration for your <code>orange-text</code> id",
-          "testString": "assert(code.match(/#orange-text\\s*{/gi), 'Create a CSS declaration for your <code>orange-text</code> id');"
+          "text":
+            "Create a CSS declaration for your <code>orange-text</code> id",
+          "testString":
+            "assert(code.match(/#orange-text\\s*{/gi), 'Create a CSS declaration for your <code>orange-text</code> id');"
         },
         {
-          "text": "Do not give your <code>h1</code> any <code>style</code> attributes.",
-          "testString": "assert(!code.match(/<h1.*style.*>/gi), 'Do not give your <code>h1</code> any <code>style</code> attributes.');"
+          "text":
+            "Do not give your <code>h1</code> any <code>style</code> attributes.",
+          "testString":
+            "assert(!code.match(/<h1.*style.*>/gi), 'Do not give your <code>h1</code> any <code>style</code> attributes.');"
         },
         {
           "text": "Your <code>h1</code> element should be orange.",
-          "testString": "assert($(\"h1\").css(\"color\") === \"rgb(255, 165, 0)\", 'Your <code>h1</code> element should be orange.');"
+          "testString":
+            "assert($(\"h1\").css(\"color\") === \"rgb(255, 165, 0)\", 'Your <code>h1</code> element should be orange.');"
         }
       ],
       "challengeType": 0,
       "translations": {
         "de": {
-          "title": "Überschreibe Klassen Deklarationen mit Styling von ID Attributen",
+          "title":
+            "Überschreibe Klassen Deklarationen mit Styling von ID Attributen",
           "description": [
             "Wir haben gerade bewiesen, dass der Browser CSS von oben nach unten liest. Das bedeuted, dass im Falle eines Konflikts der Browser immer die letzte CSS Deklaration verwenden wird.",
             "Aber damit sind wir noch nicht fertig. Es gibt andere Wege um CSS zu überschreiben. Erinnerst du dich an Id Attribute?",
@@ -3450,7 +3629,8 @@
           ]
         },
         "es": {
-          "title": "Anula la declaración de clases dando estilo a los atributos ID",
+          "title":
+            "Anula la declaración de clases dando estilo a los atributos ID",
           "description": [
             "Acabamos de demostrar que los navegadores leen CSS de arriba hacia abajo. Eso significa que, en el caso de un conflicto, el navegador utilizará la última declaración CSS. ",
             "Pero no hemos terminado todavía. Hay otras maneras con las que puedes anular CSS. ¿Te acuerdas de los atributos id?",
@@ -3465,7 +3645,8 @@
           ]
         },
         "pt-br": {
-          "title": "Sobreponha a Declaração de Classes Estilizando Atributos ID",
+          "title":
+            "Sobreponha a Declaração de Classes Estilizando Atributos ID",
           "description": [
             "Acabamos de demonstrar que os navegadores fazem a leitura do CSS de cima para baixo. Isso significa que, em caso de um conflito, o navegador utilizará a última declaração CSS.",
             "Mas ainda não terminamos, pois existem outras formas para sobrepor CSS. Você se lembra dos atributos <code>id</code>?",
@@ -3479,7 +3660,8 @@
           ]
         },
         "ru": {
-          "title": "Переопределите значения свойств классов стилизацией атрибутов id",
+          "title":
+            "Переопределите значения свойств классов стилизацией атрибутов id",
           "description": [
             "Мы только что доказали, что браузеры читают CSS сверху-вниз. Это значит, что в случае конфликта значений будет установлено то, которое было объявлено в последнюю очередь.",
             "Но мы ещё не закончилил. Есть и другие способы переопределения CSS. Помните атрибуты id?",
@@ -3533,24 +3715,32 @@
       ],
       "tests": [
         {
-          "text": "Your <code>h1</code> element should have the class <code>pink-text</code>.",
-          "testString": "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');"
+          "text":
+            "Your <code>h1</code> element should have the class <code>pink-text</code>.",
+          "testString":
+            "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');"
         },
         {
-          "text": "Your <code>h1</code> element should have the class <code>blue-text</code>.",
-          "testString": "assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.');"
+          "text":
+            "Your <code>h1</code> element should have the class <code>blue-text</code>.",
+          "testString":
+            "assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.');"
         },
         {
-          "text": "Your <code>h1</code> element should have the id of <code>orange-text</code>.",
-          "testString": "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Your <code>h1</code> element should have the id of <code>orange-text</code>.');"
+          "text":
+            "Your <code>h1</code> element should have the id of <code>orange-text</code>.",
+          "testString":
+            "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Your <code>h1</code> element should have the id of <code>orange-text</code>.');"
         },
         {
           "text": "Give your <code>h1</code> element an inline style.",
-          "testString": "assert(document.querySelector('h1[style]'), 'Give your <code>h1</code> element an inline style.');"
+          "testString":
+            "assert(document.querySelector('h1[style]'), 'Give your <code>h1</code> element an inline style.');"
         },
         {
           "text": "Your <code>h1</code> element should be white.",
-          "testString": "assert($(\"h1\").css(\"color\") === \"rgb(255, 255, 255)\", 'Your <code>h1</code> element should be white.');"
+          "testString":
+            "assert($(\"h1\").css(\"color\") === \"rgb(255, 255, 255)\", 'Your <code>h1</code> element should be white.');"
         }
       ],
       "challengeType": 0,
@@ -3589,7 +3779,8 @@
           ]
         },
         "ru": {
-          "title": "Переопределите значения свойств классов встроенными стилями",
+          "title":
+            "Переопределите значения свойств классов встроенными стилями",
           "description": [
             "Итак, мы доказали, что объявление атрибута <code>id</code> переопределяет значения свойств, определённые в значениях атрибута <code>class</code>, независимо от того, были ли они объявлены в вашем элементе <code>style</code>.",
             "Есть и другие способы переопределения CSS. Помните встроенные стили?",
@@ -3644,28 +3835,39 @@
       ],
       "tests": [
         {
-          "text": "Your <code>h1</code> element should have the class <code>pink-text</code>.",
-          "testString": "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');"
+          "text":
+            "Your <code>h1</code> element should have the class <code>pink-text</code>.",
+          "testString":
+            "assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.');"
         },
         {
-          "text": "Your <code>h1</code> element should have the class <code>blue-text</code>.",
-          "testString": "assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.');"
+          "text":
+            "Your <code>h1</code> element should have the class <code>blue-text</code>.",
+          "testString":
+            "assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.');"
         },
         {
-          "text": "Your <code>h1</code> element should have the id of <code>orange-text</code>.",
-          "testString": "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Your <code>h1</code> element should have the id of <code>orange-text</code>.');"
+          "text":
+            "Your <code>h1</code> element should have the id of <code>orange-text</code>.",
+          "testString":
+            "assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Your <code>h1</code> element should have the id of <code>orange-text</code>.');"
         },
         {
-          "text": "Your <code>h1</code> element should have the inline style of <code>color&#58; white</code>.",
-          "testString": "assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\\s*?:/gi), 'Your <code>h1</code> element should have the inline style of <code>color&#58; white</code>.');"
+          "text":
+            "Your <code>h1</code> element should have the inline style of <code>color&#58; white</code>.",
+          "testString":
+            "assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\\s*?:/gi), 'Your <code>h1</code> element should have the inline style of <code>color&#58; white</code>.');"
         },
         {
-          "text": "Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.",
-          "testString": "assert(code.match(/\\.pink-text\\s*?\\{[\\s\\S]*?color:.*pink.*!important\\s*;?[^\\.]*\\}/g), 'Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.');"
+          "text":
+            "Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.",
+          "testString":
+            "assert(code.match(/\\.pink-text\\s*?\\{[\\s\\S]*?color:.*pink.*!important\\s*;?[^\\.]*\\}/g), 'Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.');"
         },
         {
           "text": "Your <code>h1</code> element should be pink.",
-          "testString": "assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'Your <code>h1</code> element should be pink.');"
+          "testString":
+            "assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'Your <code>h1</code> element should be pink.');"
         }
       ],
       "challengeType": 0,
@@ -3759,18 +3961,22 @@
         "Did you know there are other ways to represent colors in CSS? One of these ways is called hexadecimal code, or <code>hex code</code> for short.",
         "We usually use <code>decimals</code>, or base 10 numbers, which use the symbols 0 to 9 for each digit. <code>Hexadecimals</code> (or <code>hex</code>) are base 16 numbers. This means it uses sixteen distinct symbols. Like decimals, the symbols 0-9 represent the values zero to nine. Then A,B,C,D,E,F represent the values ten to fifteen. Altogether, 0 to F can represent a digit in <code>hexadecimal</code>, giving us 16 total possible values. You can find more information about <a target='_blank' href='https://en.wikipedia.org/wiki/Hexadecimal'>hexadecimal numbers here</a>.",
         "In CSS, we can use 6 hexadecimal digits to represent colors, two each for the red (R), green (G), and blue (B) components. For example, <code>#000000</code> is black and is also the lowest possible value. You can find more information about the <a target='_blank' href='https://en.wikipedia.org/wiki/RGB_color_model'>RGB color system here</a>.",
-        "<blockquote>body {<br>  color: #000000;<br>}</blockquote>",
+        "<blockquote>body {<br>&nbsp;&nbsp;color: #000000;<br>}</blockquote>",
         "<hr>",
         "Replace the word <code>black</code> in our <code>body</code> element's background-color with its <code>hex code</code> representation, <code>#000000</code>."
       ],
       "tests": [
         {
-          "text": "Give your <code>body</code> element the background-color of black.",
-          "testString": "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'Give your <code>body</code> element the background-color of black.');"
+          "text":
+            "Give your <code>body</code> element the background-color of black.",
+          "testString":
+            "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'Give your <code>body</code> element the background-color of black.');"
         },
         {
-          "text": "Use the <code>hex code</code> for the color black instead of the word <code>black</code>.",
-          "testString": "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#000(000)?((\\s*})|(;[\\s\\S]*?}))/gi), 'Use the <code>hex code</code> for the color black instead of the word <code>black</code>.');"
+          "text":
+            "Use the <code>hex code</code> for the color black instead of the word <code>black</code>.",
+          "testString":
+            "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#000(000)?((\\s*})|(;[\\s\\S]*?}))/gi), 'Use the <code>hex code</code> for the color black instead of the word <code>black</code>.');"
         }
       ],
       "challengeType": 0,
@@ -3848,36 +4054,52 @@
       ],
       "tests": [
         {
-          "text": "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.",
-          "testString": "assert($('.red-text').css('color') === 'rgb(255, 0, 0)', 'Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.');"
+          "text":
+            "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.",
+          "testString":
+            "assert($('.red-text').css('color') === 'rgb(255, 0, 0)', 'Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.');"
         },
         {
-          "text": "Use the <code>hex code</code> for the color red instead of the word <code>red</code>.",
-          "testString": "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?#FF0000\\s*?;\\s*?}/gi), 'Use the <code>hex code</code> for the color red instead of the word <code>red</code>.');"
+          "text":
+            "Use the <code>hex code</code> for the color red instead of the word <code>red</code>.",
+          "testString":
+            "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?#FF0000\\s*?;\\s*?}/gi), 'Use the <code>hex code</code> for the color red instead of the word <code>red</code>.');"
         },
         {
-          "text": "Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.",
-          "testString": "assert($('.green-text').css('color') === 'rgb(0, 255, 0)', 'Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.');"
+          "text":
+            "Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.",
+          "testString":
+            "assert($('.green-text').css('color') === 'rgb(0, 255, 0)', 'Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.');"
         },
         {
-          "text": "Use the <code>hex code</code> for the color green instead of the word <code>green</code>.",
-          "testString": "assert(code.match(/\\.green-text\\s*?{\\s*?color:\\s*?#00FF00\\s*?;\\s*?}/gi), 'Use the <code>hex code</code> for the color green instead of the word <code>green</code>.');"
+          "text":
+            "Use the <code>hex code</code> for the color green instead of the word <code>green</code>.",
+          "testString":
+            "assert(code.match(/\\.green-text\\s*?{\\s*?color:\\s*?#00FF00\\s*?;\\s*?}/gi), 'Use the <code>hex code</code> for the color green instead of the word <code>green</code>.');"
         },
         {
-          "text": "Give your <code>h1</code> element with the text <code>I am dodger blue!</code> the <code>color</code> dodger blue.",
-          "testString": "assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)', 'Give your <code>h1</code> element with the text <code>I am dodger blue!</code> the <code>color</code> dodger blue.');"
+          "text":
+            "Give your <code>h1</code> element with the text <code>I am dodger blue!</code> the <code>color</code> dodger blue.",
+          "testString":
+            "assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)', 'Give your <code>h1</code> element with the text <code>I am dodger blue!</code> the <code>color</code> dodger blue.');"
         },
         {
-          "text": "Use the <code>hex code</code> for the color dodger blue instead of the word <code>dodgerblue</code>.",
-          "testString": "assert(code.match(/\\.dodger-blue-text\\s*?{\\s*?color:\\s*?#1E90FF\\s*?;\\s*?}/gi), 'Use the <code>hex code</code> for the color dodger blue instead of the word <code>dodgerblue</code>.');"
+          "text":
+            "Use the <code>hex code</code> for the color dodger blue instead of the word <code>dodgerblue</code>.",
+          "testString":
+            "assert(code.match(/\\.dodger-blue-text\\s*?{\\s*?color:\\s*?#1E90FF\\s*?;\\s*?}/gi), 'Use the <code>hex code</code> for the color dodger blue instead of the word <code>dodgerblue</code>.');"
         },
         {
-          "text": "Give your <code>h1</code> element with the text <code>I am orange!</code> the <code>color</code> orange.",
-          "testString": "assert($('.orange-text').css('color') === 'rgb(255, 165, 0)', 'Give your <code>h1</code> element with the text <code>I am orange!</code> the <code>color</code> orange.');"
+          "text":
+            "Give your <code>h1</code> element with the text <code>I am orange!</code> the <code>color</code> orange.",
+          "testString":
+            "assert($('.orange-text').css('color') === 'rgb(255, 165, 0)', 'Give your <code>h1</code> element with the text <code>I am orange!</code> the <code>color</code> orange.');"
         },
         {
-          "text": "Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>.",
-          "testString": "assert(code.match(/\\.orange-text\\s*?{\\s*?color:\\s*?#FFA500\\s*?;\\s*?}/gi), 'Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>.');"
+          "text":
+            "Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>.",
+          "testString":
+            "assert(code.match(/\\.orange-text\\s*?{\\s*?color:\\s*?#FFA500\\s*?;\\s*?}/gi), 'Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>.');"
         }
       ],
       "challengeType": 0,
@@ -3966,36 +4188,52 @@
       ],
       "tests": [
         {
-          "text": "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.",
-          "testString": "assert($('.red-text').css('color') === 'rgb(255, 0, 0)', 'Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.');"
+          "text":
+            "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.",
+          "testString":
+            "assert($('.red-text').css('color') === 'rgb(255, 0, 0)', 'Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.');"
         },
         {
-          "text": "Use the abbreviate <code>hex code</code> for the color red instead of the hex code <code>#FF0000</code>.",
-          "testString": "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?#F00\\s*?;\\s*?}/gi), 'Use the abbreviate <code>hex code</code> for the color red instead of the hex code <code>#FF0000</code>.');"
+          "text":
+            "Use the abbreviate <code>hex code</code> for the color red instead of the hex code <code>#FF0000</code>.",
+          "testString":
+            "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?#F00\\s*?;\\s*?}/gi), 'Use the abbreviate <code>hex code</code> for the color red instead of the hex code <code>#FF0000</code>.');"
         },
         {
-          "text": "Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.",
-          "testString": "assert($('.green-text').css('color') === 'rgb(0, 255, 0)', 'Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.');"
+          "text":
+            "Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.",
+          "testString":
+            "assert($('.green-text').css('color') === 'rgb(0, 255, 0)', 'Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.');"
         },
         {
-          "text": "Use the abbreviated <code>hex code</code> for the color green instead of the hex code <code>#00FF00</code>.",
-          "testString": "assert(code.match(/\\.green-text\\s*?{\\s*?color:\\s*?#0F0\\s*?;\\s*?}/gi), 'Use the abbreviated <code>hex code</code> for the color green instead of the hex code <code>#00FF00</code>.');"
+          "text":
+            "Use the abbreviated <code>hex code</code> for the color green instead of the hex code <code>#00FF00</code>.",
+          "testString":
+            "assert(code.match(/\\.green-text\\s*?{\\s*?color:\\s*?#0F0\\s*?;\\s*?}/gi), 'Use the abbreviated <code>hex code</code> for the color green instead of the hex code <code>#00FF00</code>.');"
         },
         {
-          "text": "Give your <code>h1</code> element with the text <code>I am cyan!</code> the <code>color</code> cyan.",
-          "testString": "assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)', 'Give your <code>h1</code> element with the text <code>I am cyan!</code> the <code>color</code> cyan.');"
+          "text":
+            "Give your <code>h1</code> element with the text <code>I am cyan!</code> the <code>color</code> cyan.",
+          "testString":
+            "assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)', 'Give your <code>h1</code> element with the text <code>I am cyan!</code> the <code>color</code> cyan.');"
         },
         {
-          "text": "Use the abbreviated <code>hex code</code> for the color cyan instead of the hex code <code>#00FFFF</code>.",
-          "testString": "assert(code.match(/\\.cyan-text\\s*?{\\s*?color:\\s*?#0FF\\s*?;\\s*?}/gi), 'Use the abbreviated <code>hex code</code> for the color cyan instead of the hex code <code>#00FFFF</code>.');"
+          "text":
+            "Use the abbreviated <code>hex code</code> for the color cyan instead of the hex code <code>#00FFFF</code>.",
+          "testString":
+            "assert(code.match(/\\.cyan-text\\s*?{\\s*?color:\\s*?#0FF\\s*?;\\s*?}/gi), 'Use the abbreviated <code>hex code</code> for the color cyan instead of the hex code <code>#00FFFF</code>.');"
         },
         {
-          "text": "Give your <code>h1</code> element with the text <code>I am fuchsia!</code> the <code>color</code> fuchsia.",
-          "testString": "assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)', 'Give your <code>h1</code> element with the text <code>I am fuchsia!</code> the <code>color</code> fuchsia.');"
+          "text":
+            "Give your <code>h1</code> element with the text <code>I am fuchsia!</code> the <code>color</code> fuchsia.",
+          "testString":
+            "assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)', 'Give your <code>h1</code> element with the text <code>I am fuchsia!</code> the <code>color</code> fuchsia.');"
         },
         {
-          "text": "Use the abbreviated <code>hex code</code> for the color fuchsia instead of the hex code <code>#FF00FF</code>.",
-          "testString": "assert(code.match(/\\.fuchsia-text\\s*?{\\s*?color:\\s*?#F0F\\s*?;\\s*?}/gi), 'Use the abbreviated <code>hex code</code> for the color fuchsia instead of the hex code <code>#FF00FF</code>.');"
+          "text":
+            "Use the abbreviated <code>hex code</code> for the color fuchsia instead of the hex code <code>#FF00FF</code>.",
+          "testString":
+            "assert(code.match(/\\.fuchsia-text\\s*?{\\s*?color:\\s*?#F0F\\s*?;\\s*?}/gi), 'Use the abbreviated <code>hex code</code> for the color fuchsia instead of the hex code <code>#FF00FF</code>.');"
         }
       ],
       "challengeType": 0,
@@ -4087,18 +4325,22 @@
         "Instead of using six hexadecimal digits like you do with hex code, with <code>RGB</code> you specify the brightness of each color with a number between 0 and 255.",
         "If you do the math, the two digits for one color equal 16 times 16, which gives us 256 total values. So <code>RGB</code>, which starts counting from zero, has the exact same number of possible values as hex code.",
         "Here's an example of how you'd change the body background to orange using its RGB code.",
-        "<blockquote>body {<br>  background-color: rgb(255, 165, 0);<br>}</blockquote>",
+        "<blockquote>body {<br>&nbsp;&nbsp;background-color: rgb(255, 165, 0);<br>}</blockquote>",
         "<hr>",
         "Let's replace the hex code in our <code>body</code> element's background color with the RGB value for black: <code>rgb(0, 0, 0)</code>"
       ],
       "tests": [
         {
-          "text": "Your <code>body</code> element should have a black background.",
-          "testString": "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'Your <code>body</code> element should have a black background.');"
+          "text":
+            "Your <code>body</code> element should have a black background.",
+          "testString":
+            "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'Your <code>body</code> element should have a black background.');"
         },
         {
-          "text": "Use <code>rgb</code> to give your <code>body</code> element a color of black.",
-          "testString": "assert(code.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use <code>rgb</code> to give your <code>body</code> element a color of black.');"
+          "text":
+            "Use <code>rgb</code> to give your <code>body</code> element a color of black.",
+          "testString":
+            "assert(code.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'Use <code>rgb</code> to give your <code>body</code> element a color of black.');"
         }
       ],
       "challengeType": 0,
@@ -4188,36 +4430,48 @@
       ],
       "tests": [
         {
-          "text": "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.",
-          "testString": "assert($('.red-text').css('color') === 'rgb(255, 0, 0)', 'Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.');"
+          "text":
+            "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.",
+          "testString":
+            "assert($('.red-text').css('color') === 'rgb(255, 0, 0)', 'Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.');"
         },
         {
           "text": "Use <code>rgb</code> for the color red.",
-          "testString": "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?255\\s*?,\\s*?0\\s*?,\\s*?0\\s*?\\)\\s*?;\\s*?}/gi), 'Use <code>rgb</code> for the color red.');"
+          "testString":
+            "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?255\\s*?,\\s*?0\\s*?,\\s*?0\\s*?\\)\\s*?;\\s*?}/gi), 'Use <code>rgb</code> for the color red.');"
         },
         {
-          "text": "Give your <code>h1</code> element with the text <code>I am orchid!</code> the <code>color</code> orchid.",
-          "testString": "assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)', 'Give your <code>h1</code> element with the text <code>I am orchid!</code> the <code>color</code> orchid.');"
+          "text":
+            "Give your <code>h1</code> element with the text <code>I am orchid!</code> the <code>color</code> orchid.",
+          "testString":
+            "assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)', 'Give your <code>h1</code> element with the text <code>I am orchid!</code> the <code>color</code> orchid.');"
         },
         {
           "text": "Use <code>rgb</code> for the color orchid.",
-          "testString": "assert(code.match(/\\.orchid-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?218\\s*?,\\s*?112\\s*?,\\s*?214\\s*?\\)\\s*?;\\s*?}/gi), 'Use <code>rgb</code> for the color orchid.');"
+          "testString":
+            "assert(code.match(/\\.orchid-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?218\\s*?,\\s*?112\\s*?,\\s*?214\\s*?\\)\\s*?;\\s*?}/gi), 'Use <code>rgb</code> for the color orchid.');"
         },
         {
-          "text": "Give your <code>h1</code> element with the text <code>I am blue!</code> the <code>color</code> blue.",
-          "testString": "assert($('.blue-text').css('color') === 'rgb(0, 0, 255)', 'Give your <code>h1</code> element with the text <code>I am blue!</code> the <code>color</code> blue.');"
+          "text":
+            "Give your <code>h1</code> element with the text <code>I am blue!</code> the <code>color</code> blue.",
+          "testString":
+            "assert($('.blue-text').css('color') === 'rgb(0, 0, 255)', 'Give your <code>h1</code> element with the text <code>I am blue!</code> the <code>color</code> blue.');"
         },
         {
           "text": "Use <code>rgb</code> for the color blue.",
-          "testString": "assert(code.match(/\\.blue-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?255\\s*?\\)\\s*?;\\s*?}/gi), 'Use <code>rgb</code> for the color blue.');"
+          "testString":
+            "assert(code.match(/\\.blue-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?255\\s*?\\)\\s*?;\\s*?}/gi), 'Use <code>rgb</code> for the color blue.');"
         },
         {
-          "text": "Give your <code>h1</code> element with the text <code>I am sienna!</code> the <code>color</code> sienna.",
-          "testString": "assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)', 'Give your <code>h1</code> element with the text <code>I am sienna!</code> the <code>color</code> sienna.');"
+          "text":
+            "Give your <code>h1</code> element with the text <code>I am sienna!</code> the <code>color</code> sienna.",
+          "testString":
+            "assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)', 'Give your <code>h1</code> element with the text <code>I am sienna!</code> the <code>color</code> sienna.');"
         },
         {
           "text": "Use <code>rgb</code> for the color sienna.",
-          "testString": "assert(code.match(/\\.sienna-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?160\\s*?,\\s*?82\\s*?,\\s*?45\\s*?\\)\\s*?;\\s*?}/gi), 'Use <code>rgb</code> for the color sienna.');"
+          "testString":
+            "assert(code.match(/\\.sienna-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?160\\s*?,\\s*?82\\s*?,\\s*?45\\s*?\\)\\s*?;\\s*?}/gi), 'Use <code>rgb</code> for the color sienna.');"
         }
       ],
       "challengeType": 0,
@@ -4300,16 +4554,22 @@
       ],
       "tests": [
         {
-          "text": "<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.",
-          "testString": "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-skin\\s*?:\\s*?gray\\s*?;[\\s\\S]*}/gi), '<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.');"
+          "text":
+            "<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.",
+          "testString":
+            "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-skin\\s*?:\\s*?gray\\s*?;[\\s\\S]*}/gi), '<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.');"
         },
         {
-          "text": "<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>white</code>.",
-          "testString": "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-belly\\s*?:\\s*?white\\s*?;[\\s\\S]*}/gi), '<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>white</code>.');"
+          "text":
+            "<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>white</code>.",
+          "testString":
+            "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-belly\\s*?:\\s*?white\\s*?;[\\s\\S]*}/gi), '<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>white</code>.');"
         },
         {
-          "text": "<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>orange</code>.",
-          "testString": "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-beak\\s*?:\\s*?orange\\s*?;[\\s\\S]*}/gi), '<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>orange</code>.');"
+          "text":
+            "<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>orange</code>.",
+          "testString":
+            "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-beak\\s*?:\\s*?orange\\s*?;[\\s\\S]*}/gi), '<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>orange</code>.');"
         }
       ],
       "solutions": [],
@@ -4542,8 +4802,10 @@
       ],
       "tests": [
         {
-          "text": "<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.",
-          "testString": "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-skin\\s*?:\\s*?gray\\s*?;[\\s\\S]*}/gi), '<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.');"
+          "text":
+            "<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.",
+          "testString":
+            "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-skin\\s*?:\\s*?gray\\s*?;[\\s\\S]*}/gi), '<code>penguin</code> class should declar the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.');"
         }
       ],
       "solutions": [],
@@ -4773,20 +5035,28 @@
       ],
       "tests": [
         {
-          "text": "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>pengiun-top</code> class.",
-          "testString": "assert(code.match(/.penguin-top\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.penguin-bottom\\s{/gi), 'Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>pengiun-top</code> class.');"
+          "text":
+            "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>pengiun-top</code> class.",
+          "testString":
+            "assert(code.match(/.penguin-top\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.penguin-bottom\\s{/gi), 'Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>pengiun-top</code> class.');"
         },
         {
-          "text": "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>pengiun-bottom</code> class.",
-          "testString": "assert(code.match(/.penguin-bottom\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.right-hand\\s{/gi), 'Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>pengiun-bottom</code> class.');"
+          "text":
+            "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>pengiun-bottom</code> class.",
+          "testString":
+            "assert(code.match(/.penguin-bottom\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.right-hand\\s{/gi), 'Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>pengiun-bottom</code> class.');"
         },
         {
-          "text": "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>right-hand</code> class.",
-          "testString": "assert(code.match(/.right-hand\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.left-hand\\s{/gi), 'Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>right-hand</code> class.');"
+          "text":
+            "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>right-hand</code> class.",
+          "testString":
+            "assert(code.match(/.right-hand\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.left-hand\\s{/gi), 'Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>right-hand</code> class.');"
         },
         {
-          "text": "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>left-hand</code> class.",
-          "testString": "assert(code.match(/.left-hand\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}/gi), 'Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>left-hand</code> class.');"
+          "text":
+            "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>left-hand</code> class.",
+          "testString":
+            "assert(code.match(/.left-hand\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\s*?\\(\\s*?--penguin-skin\\s*?\\)\\s*?;[\\s\\S]*}/gi), 'Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>left-hand</code> class.');"
         }
       ],
       "solutions": [],
@@ -5030,12 +5300,16 @@
       ],
       "tests": [
         {
-          "text": "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.",
-          "testString": "assert(code.match(/.penguin-top\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\(\\s*?--pengiun-skin\\s*?,\\s*?black\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.penguin-bottom\\s{/gi), 'Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.');"
+          "text":
+            "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.",
+          "testString":
+            "assert(code.match(/.penguin-top\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\(\\s*?--pengiun-skin\\s*?,\\s*?black\\s*?\\)\\s*?;[\\s\\S]*}[\\s\\S]*.penguin-bottom\\s{/gi), 'Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.');"
         },
         {
-          "text": "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.",
-          "testString": "assert(code.match(/.penguin-bottom\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\(\\s*?--pengiun-skin\\s*?,\\s*?black\\s*?\\)\\s*?;[\\s\\S]*}/gi), 'Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.');"
+          "text":
+            "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.",
+          "testString":
+            "assert(code.match(/.penguin-bottom\\s*?{[\\s\\S]*background\\s*?:\\s*?var\\(\\s*?--pengiun-skin\\s*?,\\s*?black\\s*?\\)\\s*?;[\\s\\S]*}/gi), 'Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.');"
         }
       ],
       "solutions": [],
@@ -5272,8 +5546,10 @@
       ],
       "tests": [
         {
-          "text": "declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.",
-          "testString": "assert(code.match(/:root\\s*?{[\\s\\S]*--penguin-belly\\s*?:\\s*?pink\\s*?;[\\s\\S]*}/gi), 'declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.');"
+          "text":
+            "declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.",
+          "testString":
+            "assert(code.match(/:root\\s*?{[\\s\\S]*--penguin-belly\\s*?:\\s*?pink\\s*?;[\\s\\S]*}/gi), 'declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.');"
         }
       ],
       "solutions": [],
@@ -5506,8 +5782,10 @@
       ],
       "tests": [
         {
-          "text": "The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.",
-          "testString": "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-belly\\s*?:\\s*?white\\s*?;[\\s\\S]*}/gi), 'The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.');"
+          "text":
+            "The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.",
+          "testString":
+            "assert(code.match(/.penguin\\s*?{[\\s\\S]*--penguin-belly\\s*?:\\s*?white\\s*?;[\\s\\S]*}/gi), 'The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.');"
         }
       ],
       "solutions": [],
@@ -5742,12 +6020,16 @@
       ],
       "tests": [
         {
-          "text": "<code>:root</code> should reassign the <code>--penguin-size</code> variable to <code>200px</code>.",
-          "testString": "assert(code.match(/media\\s*?\\(\\s*?max-width\\s*?:\\s*?350px\\s*?\\)\\s*?{[\\s\\S]*:root\\s*?{[\\s\\S]*--penguin-size\\s*?:\\s*?200px\\s*?;[\\s\\S]*}[\\s\\S]*}/gi), '<code>:root</code> should reassign the <code>--penguin-size</code> variable to <code>200px</code>.');"
+          "text":
+            "<code>:root</code> should reassign the <code>--penguin-size</code> variable to <code>200px</code>.",
+          "testString":
+            "assert(code.match(/media\\s*?\\(\\s*?max-width\\s*?:\\s*?350px\\s*?\\)\\s*?{[\\s\\S]*:root\\s*?{[\\s\\S]*--penguin-size\\s*?:\\s*?200px\\s*?;[\\s\\S]*}[\\s\\S]*}/gi), '<code>:root</code> should reassign the <code>--penguin-size</code> variable to <code>200px</code>.');"
         },
         {
-          "text": "<code>:root</code> should reassign the <code>--penguin-skin</code> variable to <code>black</code>.",
-          "testString": "assert(code.match(/media\\s*?\\(\\s*?max-width\\s*?:\\s*?350px\\s*?\\)\\s*?{[\\s\\S]*:root\\s*?{[\\s\\S]*--penguin-skin\\s*?:\\s*?black\\s*?;[\\s\\S]*}[\\s\\S]*}/gi), '<code>:root</code> should reassign the <code>--penguin-skin</code> variable to <code>black</code>.');"
+          "text":
+            "<code>:root</code> should reassign the <code>--penguin-skin</code> variable to <code>black</code>.",
+          "testString":
+            "assert(code.match(/media\\s*?\\(\\s*?max-width\\s*?:\\s*?350px\\s*?\\)\\s*?{[\\s\\S]*:root\\s*?{[\\s\\S]*--penguin-skin\\s*?:\\s*?black\\s*?;[\\s\\S]*}[\\s\\S]*}/gi), '<code>:root</code> should reassign the <code>--penguin-skin</code> variable to <code>black</code>.');"
         }
       ],
       "solutions": [],
diff --git a/challenges/01-responsive-web-design/basic-html-and-html5.json b/challenges/01-responsive-web-design/basic-html-and-html5.json
index fa2f65dd9..e3b33de4d 100644
--- a/challenges/01-responsive-web-design/basic-html-and-html5.json
+++ b/challenges/01-responsive-web-design/basic-html-and-html5.json
@@ -23,8 +23,10 @@
       ],
       "tests": [
         {
-          "text": "Your <code>h1</code> element should have the text \"Hello World\".",
-          "testString": "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your <code>h1</code> element should have the text \"Hello World\".');"
+          "text":
+            "Your <code>h1</code> element should have the text \"Hello World\".",
+          "testString":
+            "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your <code>h1</code> element should have the text \"Hello World\".');"
         }
       ],
       "challengeType": 0,
@@ -104,9 +106,7 @@
           "key": "indexhtml",
           "ext": "html",
           "name": "index",
-          "contents": [
-            "<h1>Hello</h1>"
-          ],
+          "contents": ["<h1>Hello</h1>"],
           "head": [],
           "tail": []
         }
@@ -125,19 +125,25 @@
       "tests": [
         {
           "text": "Create an <code>h2</code> element.",
-          "testString": "assert(($(\"h2\").length > 0), 'Create an <code>h2</code> element.');"
+          "testString":
+            "assert(($(\"h2\").length > 0), 'Create an <code>h2</code> element.');"
         },
         {
           "text": "Make sure your <code>h2</code> element has a closing tag.",
-          "testString": "assert(code.match(/<\\/h2>/g) && code.match(/<\\/h2>/g).length === code.match(/<h2>/g).length, 'Make sure your <code>h2</code> element has a closing tag.');"
+          "testString":
+            "assert(code.match(/<\\/h2>/g) && code.match(/<\\/h2>/g).length === code.match(/<h2>/g).length, 'Make sure your <code>h2</code> element has a closing tag.');"
         },
         {
-          "text": "Your <code>h2</code> element should have the text \"CatPhotoApp\".",
-          "testString": "assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($(\"h2\").text()), 'Your <code>h2</code> element should have the text \"CatPhotoApp\".');"
+          "text":
+            "Your <code>h2</code> element should have the text \"CatPhotoApp\".",
+          "testString":
+            "assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($(\"h2\").text()), 'Your <code>h2</code> element should have the text \"CatPhotoApp\".');"
         },
         {
-          "text": "Your <code>h1</code> element should have the text \"Hello World\".",
-          "testString": "assert.isTrue((/hello(\\s)+world/gi).test($(\"h1\").text()), 'Your <code>h1</code> element should have the text \"Hello World\".');"
+          "text":
+            "Your <code>h1</code> element should have the text \"Hello World\".",
+          "testString":
+            "assert.isTrue((/hello(\\s)+world/gi).test($(\"h1\").text()), 'Your <code>h1</code> element should have the text \"Hello World\".');"
         }
       ],
       "challengeType": 0,
@@ -191,9 +197,7 @@
           "key": "indexhtml",
           "ext": "html",
           "name": "index",
-          "contents": [
-            "<h1>Hello World</h1>"
-          ],
+          "contents": ["<h1>Hello World</h1>"],
           "head": [],
           "tail": []
         }
@@ -212,15 +216,19 @@
       "tests": [
         {
           "text": "Create a <code>p</code> element.",
-          "testString": "assert(($(\"p\").length > 0), 'Create a <code>p</code> element.');"
+          "testString":
+            "assert(($(\"p\").length > 0), 'Create a <code>p</code> element.');"
         },
         {
-          "text": "Your <code>p</code> element should have the text \"Hello Paragraph\".",
-          "testString": "assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), 'Your <code>p</code> element should have the text \"Hello Paragraph\".');"
+          "text":
+            "Your <code>p</code> element should have the text \"Hello Paragraph\".",
+          "testString":
+            "assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), 'Your <code>p</code> element should have the text \"Hello Paragraph\".');"
         },
         {
           "text": "Make sure your <code>p</code> element has a closing tag.",
-          "testString": "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/<p/g).length, 'Make sure your <code>p</code> element has a closing tag.');"
+          "testString":
+            "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/<p/g).length, 'Make sure your <code>p</code> element has a closing tag.');"
         }
       ],
       "challengeType": 0,
@@ -270,10 +278,7 @@
           "key": "indexhtml",
           "ext": "html",
           "name": "index",
-          "contents": [
-            "<h1>Hello World</h1>",
-            "<h2>CatPhotoApp</h2>"
-          ],
+          "contents": ["<h1>Hello World</h1>", "<h2>CatPhotoApp</h2>"],
           "head": [],
           "tail": []
         }
@@ -291,8 +296,10 @@
       ],
       "tests": [
         {
-          "text": "Your <code>p</code> element should contain the first few words of the provided <code>kitty ipsum text</code>.",
-          "testString": "assert.isTrue((/Kitty(\\s)+ipsum/gi).test($(\"p\").text()), 'Your <code>p</code> element should contain the first few words of the provided <code>kitty ipsum text</code>.');"
+          "text":
+            "Your <code>p</code> element should contain the first few words of the provided <code>kitty ipsum text</code>.",
+          "testString":
+            "assert.isTrue((/Kitty(\\s)+ipsum/gi).test($(\"p\").text()), 'Your <code>p</code> element should contain the first few words of the provided <code>kitty ipsum text</code>.');"
         }
       ],
       "challengeType": 0,
@@ -366,20 +373,28 @@
       ],
       "tests": [
         {
-          "text": "Make your <code>h1</code> element visible on your page by uncommenting it.",
-          "testString": "assert($(\"h1\").length > 0, 'Make your <code>h1</code> element visible on your page by uncommenting it.');"
+          "text":
+            "Make your <code>h1</code> element visible on your page by uncommenting it.",
+          "testString":
+            "assert($(\"h1\").length > 0, 'Make your <code>h1</code> element visible on your page by uncommenting it.');"
         },
         {
-          "text": "Make your <code>h2</code> element visible on your page by uncommenting it.",
-          "testString": "assert($(\"h2\").length > 0, 'Make your <code>h2</code> element visible on your page by uncommenting it.');"
+          "text":
+            "Make your <code>h2</code> element visible on your page by uncommenting it.",
+          "testString":
+            "assert($(\"h2\").length > 0, 'Make your <code>h2</code> element visible on your page by uncommenting it.');"
         },
         {
-          "text": "Make your <code>p</code> element visible on your page by uncommenting it.",
-          "testString": "assert($(\"p\").length > 0, 'Make your <code>p</code> element visible on your page by uncommenting it.');"
+          "text":
+            "Make your <code>p</code> element visible on your page by uncommenting it.",
+          "testString":
+            "assert($(\"p\").length > 0, 'Make your <code>p</code> element visible on your page by uncommenting it.');"
         },
         {
-          "text": "Be sure to delete all trailing comment tags&#44; i.e. <code>--&#62;</code>.",
-          "testString": "assert(!/[^fc]-->/gi.test(code.replace(/ *<!--[^fc]*\\n/g,'')), 'Be sure to delete all trailing comment tags&#44; i.e. <code>--&#62;</code>.');"
+          "text":
+            "Be sure to delete all trailing comment tags&#44; i.e. <code>--&#62;</code>.",
+          "testString":
+            "assert(!/[^fc]-->/gi.test(code.replace(/ *<!--[^fc]*\\n/g,'')), 'Be sure to delete all trailing comment tags&#44; i.e. <code>--&#62;</code>.');"
         }
       ],
       "challengeType": 0,
@@ -454,24 +469,34 @@
       ],
       "tests": [
         {
-          "text": "Comment out your <code>h1</code> element so that it is not visible on your page.",
-          "testString": "assert(($(\"h1\").length === 0), 'Comment out your <code>h1</code> element so that it is not visible on your page.');"
+          "text":
+            "Comment out your <code>h1</code> element so that it is not visible on your page.",
+          "testString":
+            "assert(($(\"h1\").length === 0), 'Comment out your <code>h1</code> element so that it is not visible on your page.');"
         },
         {
-          "text": "Leave your <code>h2</code> element uncommented so that it is visible on your page.",
-          "testString": "assert(($(\"h2\").length > 0), 'Leave your <code>h2</code> element uncommented so that it is visible on your page.');"
+          "text":
+            "Leave your <code>h2</code> element uncommented so that it is visible on your page.",
+          "testString":
+            "assert(($(\"h2\").length > 0), 'Leave your <code>h2</code> element uncommented so that it is visible on your page.');"
         },
         {
-          "text": "Comment out your <code>p</code> element so that it is not visible on your page.",
-          "testString": "assert(($(\"p\").length === 0), 'Comment out your <code>p</code> element so that it is not visible on your page.');"
+          "text":
+            "Comment out your <code>p</code> element so that it is not visible on your page.",
+          "testString":
+            "assert(($(\"p\").length === 0), 'Comment out your <code>p</code> element so that it is not visible on your page.');"
         },
         {
-          "text": "Be sure to close each of your comments with <code>--&#62;</code>.",
-          "testString": "assert(code.match(/[^fc]-->/g).length > 1, 'Be sure to close each of your comments with <code>--&#62;</code>.');"
+          "text":
+            "Be sure to close each of your comments with <code>--&#62;</code>.",
+          "testString":
+            "assert(code.match(/[^fc]-->/g).length > 1, 'Be sure to close each of your comments with <code>--&#62;</code>.');"
         },
         {
-          "text": "Do not change the order of the <code>h1</code> <code>h2</code> or <code>p</code> in the code.",
-          "testString": "assert((code.match(/<([a-z0-9]){1,2}>/g)[0]===\"<h1>\" && code.match(/<([a-z0-9]){1,2}>/g)[1]===\"<h2>\" && code.match(/<([a-z0-9]){1,2}>/g)[2]===\"<p>\") , 'Do not change the order of the <code>h1</code> <code>h2</code> or <code>p</code> in the code.');"
+          "text":
+            "Do not change the order of the <code>h1</code> <code>h2</code> or <code>p</code> in the code.",
+          "testString":
+            "assert((code.match(/<([a-z0-9]){1,2}>/g)[0]===\"<h1>\" && code.match(/<([a-z0-9]){1,2}>/g)[1]===\"<h2>\" && code.match(/<([a-z0-9]){1,2}>/g)[2]===\"<p>\") , 'Do not change the order of the <code>h1</code> <code>h2</code> or <code>p</code> in the code.');"
         }
       ],
       "challengeType": 0,
@@ -543,15 +568,18 @@
       "tests": [
         {
           "text": "Delete your <code>h1</code> element.",
-          "testString": "assert(($(\"h1\").length == 0), 'Delete your <code>h1</code> element.');"
+          "testString":
+            "assert(($(\"h1\").length == 0), 'Delete your <code>h1</code> element.');"
         },
         {
           "text": "Leave your <code>h2</code> element on the page.",
-          "testString": "assert(($(\"h2\").length > 0), 'Leave your <code>h2</code> element on the page.');"
+          "testString":
+            "assert(($(\"h2\").length > 0), 'Leave your <code>h2</code> element on the page.');"
         },
         {
           "text": "Leave your <code>p</code> element on the page.",
-          "testString": "assert(($(\"p\").length > 0), 'Leave your <code>p</code> element on the page.');"
+          "testString":
+            "assert(($(\"p\").length > 0), 'Leave your <code>p</code> element on the page.');"
         }
       ],
       "challengeType": 0,
@@ -624,31 +652,43 @@
       "tests": [
         {
           "text": "You need 2 <code>p</code> elements with Kitty Ipsum text.",
-          "testString": "assert($(\"p\").length > 1, 'You need 2 <code>p</code> elements with Kitty Ipsum text.');"
+          "testString":
+            "assert($(\"p\").length > 1, 'You need 2 <code>p</code> elements with Kitty Ipsum text.');"
         },
         {
-          "text": "Make sure each of your <code>p</code> elements has a closing tag.",
-          "testString": "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/<p/g).length, 'Make sure each of your <code>p</code> elements has a closing tag.');"
+          "text":
+            "Make sure each of your <code>p</code> elements has a closing tag.",
+          "testString":
+            "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/<p/g).length, 'Make sure each of your <code>p</code> elements has a closing tag.');"
         },
         {
-          "text": "Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>.",
-          "testString": "assert.isTrue((/Purr\\s+jump\\s+eat/gi).test($(\"p\").text()), 'Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>.');"
+          "text":
+            "Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>.",
+          "testString":
+            "assert.isTrue((/Purr\\s+jump\\s+eat/gi).test($(\"p\").text()), 'Your <code>p</code> element should contain the first few words of the provided additional <code>kitty ipsum text</code>.');"
         },
         {
           "text": "Your code should have one <code>main</code> element.",
-          "testString": "assert($('main').length === 1, 'Your code should have one <code>main</code> element.');"
+          "testString":
+            "assert($('main').length === 1, 'Your code should have one <code>main</code> element.');"
         },
         {
-          "text": "The <code>main</code> element should have two paragraph elements as children.",
-          "testString": "assert($(\"main\").children(\"p\").length === 2, 'The <code>main</code> element should have two paragraph elements as children.');"
+          "text":
+            "The <code>main</code> element should have two paragraph elements as children.",
+          "testString":
+            "assert($(\"main\").children(\"p\").length === 2, 'The <code>main</code> element should have two paragraph elements as children.');"
         },
         {
-          "text": "The opening <code>main</code> tag should come before the first paragraph tag.",
-          "testString": "assert(code.match(/<main>\\s*?<p>/g), 'The opening <code>main</code> tag should come before the first paragraph tag.');"
+          "text":
+            "The opening <code>main</code> tag should come before the first paragraph tag.",
+          "testString":
+            "assert(code.match(/<main>\\s*?<p>/g), 'The opening <code>main</code> tag should come before the first paragraph tag.');"
         },
         {
-          "text": "The closing <code>main</code> tag should come after the second closing paragraph tag.",
-          "testString": "assert(code.match(/<\\/p>\\s*?<\\/main>/g), 'The closing <code>main</code> tag should come after the second closing paragraph tag.');"
+          "text":
+            "The closing <code>main</code> tag should come after the second closing paragraph tag.",
+          "testString":
+            "assert(code.match(/<\\/p>\\s*?<\\/main>/g), 'The closing <code>main</code> tag should come after the second closing paragraph tag.');"
         }
       ],
       "challengeType": 0,
@@ -704,15 +744,20 @@
       "tests": [
         {
           "text": "Your page should have an image element.",
-          "testString": "assert($(\"img\").length > 0, 'Your page should have an image element.');"
+          "testString":
+            "assert($(\"img\").length > 0, 'Your page should have an image element.');"
         },
         {
-          "text": "Your image should have a <code>src</code> attribute that points to the kitten image.",
-          "testString": "assert(new RegExp(\"\\/\\/bit.ly\\/fcc-relaxing-cat|\\/\\/s3.amazonaws.com\\/freecodecamp\\/relaxing-cat.jpg\", \"gi\").test($(\"img\").attr(\"src\")), 'Your image should have a <code>src</code> attribute that points to the kitten image.');"
+          "text":
+            "Your image should have a <code>src</code> attribute that points to the kitten image.",
+          "testString":
+            "assert(new RegExp(\"\\/\\/bit.ly\\/fcc-relaxing-cat|\\/\\/s3.amazonaws.com\\/freecodecamp\\/relaxing-cat.jpg\", \"gi\").test($(\"img\").attr(\"src\")), 'Your image should have a <code>src</code> attribute that points to the kitten image.');"
         },
         {
-          "text": "Your image element <strong>must</strong> have an <code>alt</code> attribute.",
-          "testString": "assert(code.match(/alt\\s*?=\\s*?(\\\"|\\').*(\\\"|\\')/), 'Your image element <strong>must</strong> have an <code>alt</code> attribute.');"
+          "text":
+            "Your image element <strong>must</strong> have an <code>alt</code> attribute.",
+          "testString":
+            "assert(code.match(/alt\\s*?=\\s*?(\\\"|\\').*(\\\"|\\')/), 'Your image element <strong>must</strong> have an <code>alt</code> attribute.');"
         }
       ],
       "challengeType": 0,
@@ -772,7 +817,8 @@
           ]
         }
       },
-      "guideUrl": "https://guide.freecodecamp.org/certificates/add-images-to-your-website",
+      "guideUrl":
+        "https://guide.freecodecamp.org/certificates/add-images-to-your-website",
       "files": {
         "indexhtml": {
           "key": "indexhtml",
@@ -805,16 +851,21 @@
       ],
       "tests": [
         {
-          "text": "Your <code>a</code> element should have the <code>anchor text</code> of \"cat photos\".",
-          "testString": "assert((/cat photos/gi).test($(\"a\").text()), 'Your <code>a</code> element should have the <code>anchor text</code> of \"cat photos\".');"
+          "text":
+            "Your <code>a</code> element should have the <code>anchor text</code> of \"cat photos\".",
+          "testString":
+            "assert((/cat photos/gi).test($(\"a\").text()), 'Your <code>a</code> element should have the <code>anchor text</code> of \"cat photos\".');"
         },
         {
-          "text": "You need an <code>a</code> element that links to <code>http&#58;//freecatphotoapp<wbr>.com</code>",
-          "testString": "assert(/http:\\/\\/(www\\.)?freecatphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'You need an <code>a</code> element that links to <code>http&#58;//freecatphotoapp<wbr>.com</code>');"
+          "text":
+            "You need an <code>a</code> element that links to <code>http&#58;//freecatphotoapp<wbr>.com</code>",
+          "testString":
+            "assert(/http:\\/\\/(www\\.)?freecatphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'You need an <code>a</code> element that links to <code>http&#58;//freecatphotoapp<wbr>.com</code>');"
         },
         {
           "text": "Make sure your <code>a</code> element has a closing tag.",
-          "testString": "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/<a/g).length, 'Make sure your <code>a</code> element has a closing tag.');"
+          "testString":
+            "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/<a/g).length, 'Make sure your <code>a</code> element has a closing tag.');"
         }
       ],
       "challengeType": 0,
@@ -907,33 +958,44 @@
       "tests": [
         {
           "text": "There should be only one anchor tag on your page.",
-          "testString": "assert($('a').length == 1, 'There should be only one anchor tag on your page.');"
+          "testString":
+            "assert($('a').length == 1, 'There should be only one anchor tag on your page.');"
         },
         {
-          "text": "There should be only one <code>footer</code> tag on your page.",
-          "testString": "assert($('footer').length == 1, 'There should be only one <code>footer</code> tag on your page.');"
+          "text":
+            "There should be only one <code>footer</code> tag on your page.",
+          "testString":
+            "assert($('footer').length == 1, 'There should be only one <code>footer</code> tag on your page.');"
         },
         {
-          "text": "The <code>a</code> tag should have an <code>href</code> attribute set to \"#footer\".",
-          "testString": "assert($('a').eq(0).attr('href') == \"#footer\", 'The <code>a</code> tag should have an <code>href</code> attribute set to \"#footer\".');"
+          "text":
+            "The <code>a</code> tag should have an <code>href</code> attribute set to \"#footer\".",
+          "testString":
+            "assert($('a').eq(0).attr('href') == \"#footer\", 'The <code>a</code> tag should have an <code>href</code> attribute set to \"#footer\".');"
         },
         {
-          "text": "The <code>a</code> tag should not have a <code>target</code> attribute",
-          "testString": "assert(typeof $('a').eq(0).attr('target') == typeof undefined || $('a').eq(0).attr('target') == true, 'The <code>a</code> tag should not have a <code>target</code> attribute');"
+          "text":
+            "The <code>a</code> tag should not have a <code>target</code> attribute",
+          "testString":
+            "assert(typeof $('a').eq(0).attr('target') == typeof undefined || $('a').eq(0).attr('target') == true, 'The <code>a</code> tag should not have a <code>target</code> attribute');"
         },
         {
           "text": "The <code>a</code> text should be \"Jump to Bottom\".",
-          "testString": "assert($('a').eq(0).text().match(/Jump to Bottom/gi), 'The <code>a</code> text should be \"Jump to Bottom\".');"
+          "testString":
+            "assert($('a').eq(0).text().match(/Jump to Bottom/gi), 'The <code>a</code> text should be \"Jump to Bottom\".');"
         },
         {
-          "text": "The <code>footer</code> tag should have an <code>id</code> attribute set to \"footer\".",
-          "testString": "assert($('footer').eq(0).attr('id') == \"footer\", 'The <code>footer</code> tag should have an <code>id</code> attribute set to \"footer\".');"
+          "text":
+            "The <code>footer</code> tag should have an <code>id</code> attribute set to \"footer\".",
+          "testString":
+            "assert($('footer').eq(0).attr('id') == \"footer\", 'The <code>footer</code> tag should have an <code>id</code> attribute set to \"footer\".');"
         }
       ],
       "challengeType": 0,
       "translations": {
         "pt-br": {
-          "title": "Crie links para seções internas de uma página com elementos âncora",
+          "title":
+            "Crie links para seções internas de uma página com elementos âncora",
           "description": [
             "Além de criar links externos, elementos âncora também podem ser usados para criar links internos, que são links que pulam para diferentes seções dentro de uma mesma página.",
             "O formato é parecido com um link externo, só que, ao invés de uma URL no atributo <code>href</code>, você usa o símbolo <code>#</code> e uma palavra para descrever a seção para a qual você quer pular.",
@@ -993,36 +1055,52 @@
       ],
       "tests": [
         {
-          "text": "You need an <code>a</code> element that links to \"http://freecatphotoapp.com\".",
-          "testString": "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").length > 0 || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").length > 0), 'You need an <code>a</code> element that links to \"http://freecatphotoapp.com\".');"
+          "text":
+            "You need an <code>a</code> element that links to \"http://freecatphotoapp.com\".",
+          "testString":
+            "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").length > 0 || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").length > 0), 'You need an <code>a</code> element that links to \"http://freecatphotoapp.com\".');"
         },
         {
-          "text": "Your <code>a</code> element should have the anchor text of \"cat photos\"",
-          "testString": "assert($(\"a\").text().match(/cat\\sphotos/gi), 'Your <code>a</code> element should have the anchor text of \"cat photos\"');"
+          "text":
+            "Your <code>a</code> element should have the anchor text of \"cat photos\"",
+          "testString":
+            "assert($(\"a\").text().match(/cat\\sphotos/gi), 'Your <code>a</code> element should have the anchor text of \"cat photos\"');"
         },
         {
-          "text": "Create a new <code>p</code> element around your <code>a</code> element. There should be at least 3 total <code>p</code> tags in your HTML code.",
-          "testString": "assert($(\"p\") && $(\"p\").length > 2, 'Create a new <code>p</code> element around your <code>a</code> element. There should be at least 3 total <code>p</code> tags in your HTML code.');"
+          "text":
+            "Create a new <code>p</code> element around your <code>a</code> element. There should be at least 3 total <code>p</code> tags in your HTML code.",
+          "testString":
+            "assert($(\"p\") && $(\"p\").length > 2, 'Create a new <code>p</code> element around your <code>a</code> element. There should be at least 3 total <code>p</code> tags in your HTML code.');"
         },
         {
-          "text": "Your <code>a</code> element should be nested within your new <code>p</code> element.",
-          "testString": "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").parent().is(\"p\") || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().is(\"p\")), 'Your <code>a</code> element should be nested within your new <code>p</code> element.');"
+          "text":
+            "Your <code>a</code> element should be nested within your new <code>p</code> element.",
+          "testString":
+            "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").parent().is(\"p\") || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().is(\"p\")), 'Your <code>a</code> element should be nested within your new <code>p</code> element.');"
         },
         {
-          "text": "Your <code>p</code> element should have the text \"View more \" (with a space after it).",
-          "testString": "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").parent().text().match(/View\\smore\\s/gi) || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().text().match(/View\\smore\\s/gi)), 'Your <code>p</code> element should have the text \"View more \" (with a space after it).');"
+          "text":
+            "Your <code>p</code> element should have the text \"View more \" (with a space after it).",
+          "testString":
+            "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").parent().text().match(/View\\smore\\s/gi) || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().text().match(/View\\smore\\s/gi)), 'Your <code>p</code> element should have the text \"View more \" (with a space after it).');"
         },
         {
-          "text": "Your <code>a</code> element should <em>not</em> have the text \"View more\".",
-          "testString": "assert(!$(\"a\").text().match(/View\\smore/gi), 'Your <code>a</code> element should <em>not</em> have the text \"View more\".');"
+          "text":
+            "Your <code>a</code> element should <em>not</em> have the text \"View more\".",
+          "testString":
+            "assert(!$(\"a\").text().match(/View\\smore/gi), 'Your <code>a</code> element should <em>not</em> have the text \"View more\".');"
         },
         {
-          "text": "Make sure each of your <code>p</code> elements has a closing tag.",
-          "testString": "assert(code.match(/<\\/p>/g) && code.match(/<p/g) && code.match(/<\\/p>/g).length === code.match(/<p/g).length, 'Make sure each of your <code>p</code> elements has a closing tag.');"
+          "text":
+            "Make sure each of your <code>p</code> elements has a closing tag.",
+          "testString":
+            "assert(code.match(/<\\/p>/g) && code.match(/<p/g) && code.match(/<\\/p>/g).length === code.match(/<p/g).length, 'Make sure each of your <code>p</code> elements has a closing tag.');"
         },
         {
-          "text": "Make sure each of your <code>a</code> elements has a closing tag.",
-          "testString": "assert(code.match(/<\\/a>/g) && code.match(/<a/g) && code.match(/<\\/a>/g).length === code.match(/<a/g).length, 'Make sure each of your <code>a</code> elements has a closing tag.');"
+          "text":
+            "Make sure each of your <code>a</code> elements has a closing tag.",
+          "testString":
+            "assert(code.match(/<\\/a>/g) && code.match(/<a/g) && code.match(/<\\/a>/g).length === code.match(/<a/g).length, 'Make sure each of your <code>a</code> elements has a closing tag.');"
         }
       ],
       "challengeType": 0,
@@ -1110,8 +1188,10 @@
       ],
       "tests": [
         {
-          "text": "Your <code>a</code> element should be a dead link with the value of the <code>href</code> attribute set to \"#\".",
-          "testString": "assert($(\"a\").attr(\"href\") === \"#\", 'Your <code>a</code> element should be a dead link with the value of the <code>href</code> attribute set to \"#\".');"
+          "text":
+            "Your <code>a</code> element should be a dead link with the value of the <code>href</code> attribute set to \"#\".",
+          "testString":
+            "assert($(\"a\").attr(\"href\") === \"#\", 'Your <code>a</code> element should be a dead link with the value of the <code>href</code> attribute set to \"#\".');"
         }
       ],
       "challengeType": 0,
@@ -1188,16 +1268,22 @@
       ],
       "tests": [
         {
-          "text": "Nest the existing <code>img</code> element within an <code>a</code> element.",
-          "testString": "assert($(\"a\").children(\"img\").length > 0, 'Nest the existing <code>img</code> element within an <code>a</code> element.');"
+          "text":
+            "Nest the existing <code>img</code> element within an <code>a</code> element.",
+          "testString":
+            "assert($(\"a\").children(\"img\").length > 0, 'Nest the existing <code>img</code> element within an <code>a</code> element.');"
         },
         {
-          "text": "Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.",
-          "testString": "assert(new RegExp(\"#\").test($(\"a\").children(\"img\").parent().attr(\"href\")), 'Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.');"
+          "text":
+            "Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.",
+          "testString":
+            "assert(new RegExp(\"#\").test($(\"a\").children(\"img\").parent().attr(\"href\")), 'Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.');"
         },
         {
-          "text": "Make sure each of your <code>a</code> elements has a closing tag.",
-          "testString": "assert(code.match(/<\\/a>/g) && code.match(/<a/g) && code.match(/<\\/a>/g).length === code.match(/<a/g).length, 'Make sure each of your <code>a</code> elements has a closing tag.');"
+          "text":
+            "Make sure each of your <code>a</code> elements has a closing tag.",
+          "testString":
+            "assert(code.match(/<\\/a>/g) && code.match(/<a/g) && code.match(/<\\/a>/g).length === code.match(/<a/g).length, 'Make sure each of your <code>a</code> elements has a closing tag.');"
         }
       ],
       "challengeType": 0,
@@ -1284,19 +1370,24 @@
       "tests": [
         {
           "text": "Create a <code>ul</code> element.",
-          "testString": "assert($(\"ul\").length > 0, 'Create a <code>ul</code> element.');"
+          "testString":
+            "assert($(\"ul\").length > 0, 'Create a <code>ul</code> element.');"
         },
         {
-          "text": "You should have three <code>li</code> elements within your <code>ul</code> element.",
-          "testString": "assert($(\"ul li\").length > 2, 'You should have three <code>li</code> elements within your <code>ul</code> element.');"
+          "text":
+            "You should have three <code>li</code> elements within your <code>ul</code> element.",
+          "testString":
+            "assert($(\"ul li\").length > 2, 'You should have three <code>li</code> elements within your <code>ul</code> element.');"
         },
         {
           "text": "Make sure your <code>ul</code> element has a closing tag.",
-          "testString": "assert(code.match(/<\\/ul>/gi) && code.match(/<ul/gi) && code.match(/<\\/ul>/gi).length === code.match(/<ul/gi).length, 'Make sure your <code>ul</code> element has a closing tag.');"
+          "testString":
+            "assert(code.match(/<\\/ul>/gi) && code.match(/<ul/gi) && code.match(/<\\/ul>/gi).length === code.match(/<ul/gi).length, 'Make sure your <code>ul</code> element has a closing tag.');"
         },
         {
           "text": "Make sure your <code>li</code> elements have closing tags.",
-          "testString": "assert(code.match(/<\\/li>/gi) && code.match(/<li[\\s>]/gi) && code.match(/<\\/li>/gi).length === code.match(/<li[\\s>]/gi).length, 'Make sure your <code>li</code> elements have closing tags.');"
+          "testString":
+            "assert(code.match(/<\\/li>/gi) && code.match(/<li[\\s>]/gi) && code.match(/<\\/li>/gi).length === code.match(/<li[\\s>]/gi).length, 'Make sure your <code>li</code> elements have closing tags.');"
         }
       ],
       "challengeType": 0,
@@ -1385,40 +1476,52 @@
       ],
       "tests": [
         {
-          "text": "You should have an ordered list for \"Top 3 things cats hate:\"",
-          "testString": "assert((/Top 3 things cats hate:/i).test($(\"ol\").prev().text()), 'You should have an ordered list for \"Top 3 things cats hate:\"');"
+          "text":
+            "You should have an ordered list for \"Top 3 things cats hate:\"",
+          "testString":
+            "assert((/Top 3 things cats hate:/i).test($(\"ol\").prev().text()), 'You should have an ordered list for \"Top 3 things cats hate:\"');"
         },
         {
           "text": "You should have an unordered list for \"Things cats love:\"",
-          "testString": "assert((/Things cats love:/i).test($(\"ul\").prev().text()), 'You should have an unordered list for \"Things cats love:\"');"
+          "testString":
+            "assert((/Things cats love:/i).test($(\"ul\").prev().text()), 'You should have an unordered list for \"Things cats love:\"');"
         },
         {
           "text": "You should have only one <code>ul</code> element.",
-          "testString": "assert.equal($(\"ul\").length, 1, 'You should have only one <code>ul</code> element.');"
+          "testString":
+            "assert.equal($(\"ul\").length, 1, 'You should have only one <code>ul</code> element.');"
         },
         {
           "text": "You should have only one <code>ol</code> element.",
-          "testString": "assert.equal($(\"ol\").length, 1, 'You should have only one <code>ol</code> element.');"
+          "testString":
+            "assert.equal($(\"ol\").length, 1, 'You should have only one <code>ol</code> element.');"
         },
         {
-          "text": "You should have three <code>li</code> elements within your <code>ul</code> element.",
-          "testString": "assert.equal($(\"ul li\").length, 3, 'You should have three <code>li</code> elements within your <code>ul</code> element.');"
+          "text":
+            "You should have three <code>li</code> elements within your <code>ul</code> element.",
+          "testString":
+            "assert.equal($(\"ul li\").length, 3, 'You should have three <code>li</code> elements within your <code>ul</code> element.');"
         },
         {
-          "text": "You should have three <code>li</code> elements within your <code>ol</code> element.",
-          "testString": "assert.equal($(\"ol li\").length, 3, 'You should have three <code>li</code> elements within your <code>ol</code> element.');"
+          "text":
+            "You should have three <code>li</code> elements within your <code>ol</code> element.",
+          "testString":
+            "assert.equal($(\"ol li\").length, 3, 'You should have three <code>li</code> elements within your <code>ol</code> element.');"
         },
         {
           "text": "Make sure your <code>ul</code> element has a closing tag.",
-          "testString": "assert(code.match(/<\\/ul>/g) && code.match(/<\\/ul>/g).length === code.match(/<ul>/g).length, 'Make sure your <code>ul</code> element has a closing tag.');"
+          "testString":
+            "assert(code.match(/<\\/ul>/g) && code.match(/<\\/ul>/g).length === code.match(/<ul>/g).length, 'Make sure your <code>ul</code> element has a closing tag.');"
         },
         {
           "text": "Make sure your <code>ol</code> element has a closing tag.",
-          "testString": "assert(code.match(/<\\/ol>/g) && code.match(/<\\/ol>/g).length === code.match(/<ol>/g).length, 'Make sure your <code>ol</code> element has a closing tag.');"
+          "testString":
+            "assert(code.match(/<\\/ol>/g) && code.match(/<\\/ol>/g).length === code.match(/<ol>/g).length, 'Make sure your <code>ol</code> element has a closing tag.');"
         },
         {
           "text": "Make sure your <code>li</code> element has a closing tag.",
-          "testString": "assert(code.match(/<\\/li>/g) && code.match(/<li>/g) && code.match(/<\\/li>/g).length === code.match(/<li>/g).length, 'Make sure your <code>li</code> element has a closing tag.');"
+          "testString":
+            "assert(code.match(/<\\/li>/g) && code.match(/<li>/g) && code.match(/<\\/li>/g).length === code.match(/<li>/g).length, 'Make sure your <code>li</code> element has a closing tag.');"
         }
       ],
       "challengeType": 0,
@@ -1513,8 +1616,10 @@
       ],
       "tests": [
         {
-          "text": "Your app should have an <code>input</code> element of type <code>text</code>.",
-          "testString": "assert($(\"input[type=text]\").length > 0, 'Your app should have an <code>input</code> element of type <code>text</code>.');"
+          "text":
+            "Your app should have an <code>input</code> element of type <code>text</code>.",
+          "testString":
+            "assert($(\"input[type=text]\").length > 0, 'Your app should have an <code>input</code> element of type <code>text</code>.');"
         }
       ],
       "challengeType": 0,
@@ -1613,16 +1718,22 @@
       ],
       "tests": [
         {
-          "text": "Add a <code>placeholder</code> attribute to the existing text <code>input</code> element.",
-          "testString": "assert($(\"input[placeholder]\").length > 0, 'Add a <code>placeholder</code> attribute to the existing text <code>input</code> element.');"
+          "text":
+            "Add a <code>placeholder</code> attribute to the existing text <code>input</code> element.",
+          "testString":
+            "assert($(\"input[placeholder]\").length > 0, 'Add a <code>placeholder</code> attribute to the existing text <code>input</code> element.');"
         },
         {
-          "text": "Set the value of your placeholder attribute to \"cat photo URL\".",
-          "testString": "assert($(\"input\") && $(\"input\").attr(\"placeholder\") && $(\"input\").attr(\"placeholder\").match(/cat\\s+photo\\s+URL/gi), 'Set the value of your placeholder attribute to \"cat photo URL\".');"
+          "text":
+            "Set the value of your placeholder attribute to \"cat photo URL\".",
+          "testString":
+            "assert($(\"input\") && $(\"input\").attr(\"placeholder\") && $(\"input\").attr(\"placeholder\").match(/cat\\s+photo\\s+URL/gi), 'Set the value of your placeholder attribute to \"cat photo URL\".');"
         },
         {
-          "text": "The finished <code>input</code> element should have valid syntax.",
-          "testString": "assert($(\"input[type=text]\").length > 0 && code.match(/<input((\\s+\\w+(\\s*=\\s*(?:\".*?\"|'.*?'|[\\^'\">\\s]+))?)+\\s*|\\s*)\\/?>/gi), 'The finished <code>input</code> element should have valid syntax.');"
+          "text":
+            "The finished <code>input</code> element should have valid syntax.",
+          "testString":
+            "assert($(\"input[type=text]\").length > 0 && code.match(/<input((\\s+\\w+(\\s*=\\s*(?:\".*?\"|'.*?'|[\\^'\">\\s]+))?)+\\s*|\\s*)\\/?>/gi), 'The finished <code>input</code> element should have valid syntax.');"
         }
       ],
       "challengeType": 0,
@@ -1668,7 +1779,8 @@
           ]
         }
       },
-      "guideUrl": "https://guide.freecodecamp.org/certificates/add-placeholder-text-to-a-text-field",
+      "guideUrl":
+        "https://guide.freecodecamp.org/certificates/add-placeholder-text-to-a-text-field",
       "files": {
         "indexhtml": {
           "key": "indexhtml",
@@ -1713,16 +1825,22 @@
       ],
       "tests": [
         {
-          "text": "Nest your text input element within a <code>form</code> element.",
-          "testString": "assert($(\"form\") && $(\"form\").children(\"input\") && $(\"form\").children(\"input\").length > 0, 'Nest your text input element within a <code>form</code> element.');"
+          "text":
+            "Nest your text input element within a <code>form</code> element.",
+          "testString":
+            "assert($(\"form\") && $(\"form\").children(\"input\") && $(\"form\").children(\"input\").length > 0, 'Nest your text input element within a <code>form</code> element.');"
         },
         {
-          "text": "Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>",
-          "testString": "assert($(\"form\").attr(\"action\") === \"/submit-cat-photo\", 'Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>');"
+          "text":
+            "Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>",
+          "testString":
+            "assert($(\"form\").attr(\"action\") === \"/submit-cat-photo\", 'Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>');"
         },
         {
-          "text": "Make sure your <code>form</code> element has well-formed open and close tags.",
-          "testString": "assert(code.match(/<\\/form>/g) && code.match(/<form [^<]*>/g) && code.match(/<\\/form>/g).length === code.match(/<form [^<]*>/g).length, 'Make sure your <code>form</code> element has well-formed open and close tags.');"
+          "text":
+            "Make sure your <code>form</code> element has well-formed open and close tags.",
+          "testString":
+            "assert(code.match(/<\\/form>/g) && code.match(/<form [^<]*>/g) && code.match(/<\\/form>/g).length === code.match(/<form [^<]*>/g).length, 'Make sure your <code>form</code> element has well-formed open and close tags.');"
         }
       ],
       "challengeType": 0,
@@ -1813,19 +1931,25 @@
       "tests": [
         {
           "text": "Your form should have a button inside it.",
-          "testString": "assert($(\"form\").children(\"button\").length > 0, 'Your form should have a button inside it.');"
+          "testString":
+            "assert($(\"form\").children(\"button\").length > 0, 'Your form should have a button inside it.');"
         },
         {
-          "text": "Your submit button should have the attribute <code>type</code> set to <code>submit</code>.",
-          "testString": "assert($(\"button\").attr(\"type\") === \"submit\", 'Your submit button should have the attribute <code>type</code> set to <code>submit</code>.');"
+          "text":
+            "Your submit button should have the attribute <code>type</code> set to <code>submit</code>.",
+          "testString":
+            "assert($(\"button\").attr(\"type\") === \"submit\", 'Your submit button should have the attribute <code>type</code> set to <code>submit</code>.');"
         },
         {
           "text": "Your submit button should only have the text \"Submit\".",
-          "testString": "assert($(\"button\").text().match(/^\\s*submit\\s*$/gi), 'Your submit button should only have the text \"Submit\".');"
+          "testString":
+            "assert($(\"button\").text().match(/^\\s*submit\\s*$/gi), 'Your submit button should only have the text \"Submit\".');"
         },
         {
-          "text": "Make sure your <code>button</code> element has a closing tag.",
-          "testString": "assert(code.match(/<\\/button>/g) && code.match(/<button/g) && code.match(/<\\/button>/g).length === code.match(/<button/g).length, 'Make sure your <code>button</code> element has a closing tag.');"
+          "text":
+            "Make sure your <code>button</code> element has a closing tag.",
+          "testString":
+            "assert(code.match(/<\\/button>/g) && code.match(/<button/g) && code.match(/<\\/button>/g).length === code.match(/<button/g).length, 'Make sure your <code>button</code> element has a closing tag.');"
         }
       ],
       "challengeType": 0,
@@ -1871,7 +1995,8 @@
           ]
         }
       },
-      "guideUrl": "https://guide.freecodecamp.org/certificates/add-a-submit-button-to-a-form",
+      "guideUrl":
+        "https://guide.freecodecamp.org/certificates/add-a-submit-button-to-a-form",
       "files": {
         "indexhtml": {
           "key": "indexhtml",
@@ -1918,8 +2043,10 @@
       ],
       "tests": [
         {
-          "text": "Your text <code>input</code> element should have the <code>required</code> attribute.",
-          "testString": "assert($(\"input\").prop(\"required\"), 'Your text <code>input</code> element should have the <code>required</code> attribute.');"
+          "text":
+            "Your text <code>input</code> element should have the <code>required</code> attribute.",
+          "testString":
+            "assert($(\"input\").prop(\"required\"), 'Your text <code>input</code> element should have the <code>required</code> attribute.');"
         }
       ],
       "challengeType": 0,
@@ -1958,7 +2085,8 @@
           ]
         },
         "ru": {
-          "title": "Используйте HTML5, чтобы сделать заполнение поля обязательным",
+          "title":
+            "Используйте HTML5, чтобы сделать заполнение поля обязательным",
           "description": [
             "Вы можете требовать заполнения определённых полей формы, таким образом пользователь не сможет отправить данные формы до их заполнения.",
             "Например, если бы вы хотели сделать заполнение текстового поля обязательным, вы могли бы добавить слово <code>required</code> внутрь вашего элемента <code>input</code>: <code>&#60;input type=\"text\" required&#62;</code>",
@@ -2013,40 +2141,53 @@
         "Each of your radio buttons can be nested within its own <code>label</code> element. By wrapping an <code>input</code> element inside of a <code>label</code> element it will autoatically associate the radio button input with the label element surrounding it.",
         "All related radio buttons should have the same <code>name</code> attribute to create a radio button group. By creating a radio group, selecting any single radio button will automatically deselect the other buttons within the same group ensuring only one answer is provided by the user.",
         "Here's an example of a radio button:",
-        "<blockquote>&#60;label&#62; <br> &#60;input type=\"radio\" name=\"indoor-outdoor\"&#62;Indoor <br>&#60;/label&#62;</blockquote>",
+        "<blockquote>&#60;label&#62; <br>&nbsp;&nbsp;&#60;input type=\"radio\" name=\"indoor-outdoor\"&#62;Indoor <br>&#60;/label&#62;</blockquote>",
         "It is considered best practice to set a <code>for</code> attribute on the <code>label</code> element, with a value that matches the value of the <code>id</code> attribute of the <code>input</code> element. This allows assistive technologies to create a linked relationship between the label and the child <code>input</code> element. For example:",
-        "<blockquote>&#60;label for=\"indoor\"&#62; <br> &#60;input id=\"indoor\" type=\"radio\" name=\"indoor-outdoor\"&#62;Indoor <br>&#60;/label&#62;</blockquote>",
+        "<blockquote>&#60;label for=\"indoor\"&#62; <br>&nbsp;&nbsp;&#60;input id=\"indoor\" type=\"radio\" name=\"indoor-outdoor\"&#62;Indoor <br>&#60;/label&#62;</blockquote>",
         "<hr>",
         "Add a pair of radio buttons to your form, each nested in its own label element. One should have the option of <code>indoor</code> and the other should have the option of <code>outdoor</code>. Both should share the <code>name</code> attribute of <code>indoor-outdoor</code> to create a radio group."
       ],
       "tests": [
         {
           "text": "Your page should have two radio button elements.",
-          "testString": "assert($('input[type=\"radio\"]').length > 1, 'Your page should have two radio button elements.');"
+          "testString":
+            "assert($('input[type=\"radio\"]').length > 1, 'Your page should have two radio button elements.');"
         },
         {
-          "text": "Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.",
-          "testString": "assert($('label > input[type=\"radio\"]').filter(\"[name='indoor-outdoor']\").length > 1, 'Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.');"
+          "text":
+            "Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.",
+          "testString":
+            "assert($('label > input[type=\"radio\"]').filter(\"[name='indoor-outdoor']\").length > 1, 'Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.');"
         },
         {
-          "text": "Each of your two radio button elements should be nested in its own <code>label</code> element.",
-          "testString": "assert($('label > input[type=\"radio\"]:only-child').length > 1, 'Each of your two radio button elements should be nested in its own <code>label</code> element.');"
+          "text":
+            "Each of your two radio button elements should be nested in its own <code>label</code> element.",
+          "testString":
+            "assert($('label > input[type=\"radio\"]:only-child').length > 1, 'Each of your two radio button elements should be nested in its own <code>label</code> element.');"
         },
         {
-          "text": "Make sure each of your <code>label</code> elements has a closing tag.",
-          "testString": "assert((code.match(/<\\/label>/g) && code.match(/<label/g) && code.match(/<\\/label>/g).length === code.match(/<label/g).length), 'Make sure each of your <code>label</code> elements has a closing tag.');"
+          "text":
+            "Make sure each of your <code>label</code> elements has a closing tag.",
+          "testString":
+            "assert((code.match(/<\\/label>/g) && code.match(/<label/g) && code.match(/<\\/label>/g).length === code.match(/<label/g).length), 'Make sure each of your <code>label</code> elements has a closing tag.');"
         },
         {
-          "text": "One of your radio buttons should have the label <code>indoor</code>.",
-          "testString": "assert($(\"label\").text().match(/indoor/gi), 'One of your radio buttons should have the label <code>indoor</code>.');"
+          "text":
+            "One of your radio buttons should have the label <code>indoor</code>.",
+          "testString":
+            "assert($(\"label\").text().match(/indoor/gi), 'One of your radio buttons should have the label <code>indoor</code>.');"
         },
         {
-          "text": "One of your radio buttons should have the label <code>outdoor</code>.",
-          "testString": "assert($(\"label\").text().match(/outdoor/gi), 'One of your radio buttons should have the label <code>outdoor</code>.');"
+          "text":
+            "One of your radio buttons should have the label <code>outdoor</code>.",
+          "testString":
+            "assert($(\"label\").text().match(/outdoor/gi), 'One of your radio buttons should have the label <code>outdoor</code>.');"
         },
         {
-          "text": "Each of your radio button elements should be added within the <code>form</code> tag.",
-          "testString": "assert($(\"label\").parent().get(0).tagName.match('FORM'), 'Each of your radio button elements should be added within the <code>form</code> tag.');"
+          "text":
+            "Each of your radio button elements should be added within the <code>form</code> tag.",
+          "testString":
+            "assert($(\"label\").parent().get(0).tagName.match('FORM'), 'Each of your radio button elements should be added within the <code>form</code> tag.');"
         }
       ],
       "challengeType": 0,
@@ -2156,19 +2297,26 @@
       "tests": [
         {
           "text": "Your page should have three checkbox elements.",
-          "testString": "assert($('input[type=\"checkbox\"]').length > 2, 'Your page should have three checkbox elements.');"
+          "testString":
+            "assert($('input[type=\"checkbox\"]').length > 2, 'Your page should have three checkbox elements.');"
         },
         {
-          "text": "Each of your three checkbox elements should be nested in its own <code>label</code> element.",
-          "testString": "assert($('label > input[type=\"checkbox\"]:only-child').length > 2, 'Each of your three checkbox elements should be nested in its own <code>label</code> element.');"
+          "text":
+            "Each of your three checkbox elements should be nested in its own <code>label</code> element.",
+          "testString":
+            "assert($('label > input[type=\"checkbox\"]:only-child').length > 2, 'Each of your three checkbox elements should be nested in its own <code>label</code> element.');"
         },
         {
-          "text": "Make sure each of your <code>label</code> elements has a closing tag.",
-          "testString": "assert(code.match(/<\\/label>/g) && code.match(/<label/g) && code.match(/<\\/label>/g).length === code.match(/<label/g).length, 'Make sure each of your <code>label</code> elements has a closing tag.');"
+          "text":
+            "Make sure each of your <code>label</code> elements has a closing tag.",
+          "testString":
+            "assert(code.match(/<\\/label>/g) && code.match(/<label/g) && code.match(/<\\/label>/g).length === code.match(/<label/g).length, 'Make sure each of your <code>label</code> elements has a closing tag.');"
         },
         {
-          "text": "Give your checkboxes the <code>name</code> attribute of <code>personality</code>.",
-          "testString": "assert($('label > input[type=\"checkbox\"]').filter(\"[name='personality']\").length > 2, 'Give your checkboxes the <code>name</code> attribute of <code>personality</code>.');"
+          "text":
+            "Give your checkboxes the <code>name</code> attribute of <code>personality</code>.",
+          "testString":
+            "assert($('label > input[type=\"checkbox\"]').filter(\"[name='personality']\").length > 2, 'Give your checkboxes the <code>name</code> attribute of <code>personality</code>.');"
         }
       ],
       "challengeType": 0,
@@ -2275,12 +2423,16 @@
       ],
       "tests": [
         {
-          "text": "Your first radio button on your form should be checked by default.",
-          "testString": "assert($('input[type=\"radio\"]').prop(\"checked\"), 'Your first radio button on your form should be checked by default.');"
+          "text":
+            "Your first radio button on your form should be checked by default.",
+          "testString":
+            "assert($('input[type=\"radio\"]').prop(\"checked\"), 'Your first radio button on your form should be checked by default.');"
         },
         {
-          "text": "Your first checkbox on your form should be checked by default.",
-          "testString": "assert($('input[type=\"checkbox\"]').prop(\"checked\"), 'Your first checkbox on your form should be checked by default.');"
+          "text":
+            "Your first checkbox on your form should be checked by default.",
+          "testString":
+            "assert($('input[type=\"checkbox\"]').prop(\"checked\"), 'Your first checkbox on your form should be checked by default.');"
         }
       ],
       "challengeType": 0,
@@ -2296,7 +2448,8 @@
           ]
         },
         "es": {
-          "title": "Marca botones de radio y casillas de verificación por omisión",
+          "title":
+            "Marca botones de radio y casillas de verificación por omisión",
           "description": [
             "Puedes marcar por omisión una casilla de verificación o un botón de radio usando el atributo <code>checked</code>.",
             "Para ello, sólo tienes que añadir la palabra \"checked\" en el interior de un elemento <code>input</code>. Por ejemplo:",
@@ -2306,7 +2459,8 @@
           ]
         },
         "pt-br": {
-          "title": "Faça botões de opção e caixas de seleção estarem marcados por padrão",
+          "title":
+            "Faça botões de opção e caixas de seleção estarem marcados por padrão",
           "description": [
             "Você pode fazer uma caixa de seleção ou botão de opção estar marcado por padrão usando o atributo <code>checked</code>.",
             "Para fazer isso, apenas insira a palavra \"checked\" em um elemento <code>input</code>. Por exemplo:",
@@ -2379,20 +2533,27 @@
       ],
       "tests": [
         {
-          "text": "Nest your <code>p</code> elements inside your <code>div</code> element.",
-          "testString": "assert($(\"div\").children(\"p\").length > 1, 'Nest your <code>p</code> elements inside your <code>div</code> element.');"
+          "text":
+            "Nest your <code>p</code> elements inside your <code>div</code> element.",
+          "testString":
+            "assert($(\"div\").children(\"p\").length > 1, 'Nest your <code>p</code> elements inside your <code>div</code> element.');"
         },
         {
-          "text": "Nest your <code>ul</code> element inside your <code>div</code> element.",
-          "testString": "assert($(\"div\").children(\"ul\").length > 0, 'Nest your <code>ul</code> element inside your <code>div</code> element.');"
+          "text":
+            "Nest your <code>ul</code> element inside your <code>div</code> element.",
+          "testString":
+            "assert($(\"div\").children(\"ul\").length > 0, 'Nest your <code>ul</code> element inside your <code>div</code> element.');"
         },
         {
-          "text": "Nest your <code>ol</code> element inside your <code>div</code> element.",
-          "testString": "assert($(\"div\").children(\"ol\").length > 0, 'Nest your <code>ol</code> element inside your <code>div</code> element.');"
+          "text":
+            "Nest your <code>ol</code> element inside your <code>div</code> element.",
+          "testString":
+            "assert($(\"div\").children(\"ol\").length > 0, 'Nest your <code>ol</code> element inside your <code>div</code> element.');"
         },
         {
           "text": "Make sure your <code>div</code> element has a closing tag.",
-          "testString": "assert(code.match(/<\\/div>/g) && code.match(/<\\/div>/g).length === code.match(/<div>/g).length, 'Make sure your <code>div</code> element has a closing tag.');"
+          "testString":
+            "assert(code.match(/<\\/div>/g) && code.match(/<\\/div>/g).length === code.match(/<div>/g).length, 'Make sure your <code>div</code> element has a closing tag.');"
         }
       ],
       "challengeType": 0,
@@ -2493,22 +2654,27 @@
         "The <code>!</code> and uppercase <code>DOCTYPE</code> is important, especially for older browsers. The <code>html</code> is not case sensitive.",
         "Next, the rest of your HTML code needs to be wrapped in <code>html</code> tags. The opening <code>&lt;html&gt;</code> goes directly below the <code>&lt;!DOCTYPE html&gt;</code> line, and the closing <code>&lt;/html&gt;</code> goes at the end of the page.",
         "Here's an example of the page structure:",
-        "<blockquote>&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>  &lt;!-- Your HTML code goes here --&gt;<br>&lt;/html&gt;</blockquote>",
+        "<blockquote>&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>&nbsp;&nbsp;&lt;!-- Your HTML code goes here --&gt;<br>&lt;/html&gt;</blockquote>",
         "<hr>",
         "Add a <code>DOCTYPE</code> tag for HTML5 to the top of the blank HTML document in the code editor. Under it, add opening and closing <code>html</code> tags, which wrap around an <code>h1</code> element. The heading can include any text."
       ],
       "tests": [
         {
-          "text": "Your code should include a <code>&lt;!DOCTYPE html&gt;</code> tag.",
-          "testString": "assert(code.match(/<!DOCTYPE\\s+?html\\s*?>/gi), 'Your code should include a <code>&lt;!DOCTYPE html&gt;</code> tag.');"
+          "text":
+            "Your code should include a <code>&lt;!DOCTYPE html&gt;</code> tag.",
+          "testString":
+            "assert(code.match(/<!DOCTYPE\\s+?html\\s*?>/gi), 'Your code should include a <code>&lt;!DOCTYPE html&gt;</code> tag.');"
         },
         {
           "text": "There should be one <code>html</code> element.",
-          "testString": "assert($('html').length == 1, 'There should be one <code>html</code> element.');"
+          "testString":
+            "assert($('html').length == 1, 'There should be one <code>html</code> element.');"
         },
         {
-          "text": "The <code>html</code> tags should wrap around one <code>h1</code> element.",
-          "testString": "assert(code.match(/<html>\\s*?<h1>\\s*?.*?\\s*?<\\/h1>\\s*?<\\/html>/gi), 'The <code>html</code> tags should wrap around one <code>h1</code> element.');"
+          "text":
+            "The <code>html</code> tags should wrap around one <code>h1</code> element.",
+          "testString":
+            "assert(code.match(/<html>\\s*?<h1>\\s*?.*?\\s*?<\\/h1>\\s*?<\\/html>/gi), 'The <code>html</code> tags should wrap around one <code>h1</code> element.');"
         }
       ],
       "challengeType": 0,
@@ -2522,7 +2688,7 @@
             "O <code>!</code> e o <code>DOCTYPE</code> todo em maiúsculas são importantes, especialmente para navegadores mais velhos. O <code>html</code> não é sensível a maiúsculas e minúsculas.",
             "Em seguida, o resto do seu código HTML deve estar delimitado por tags <code>html</code>. A tag <code>&lt;html&gt;</code> vai diretamente abaixo da linha <code>&lt;!DOCTYPE html&gt;</code>, e a tag <code>&lt;/html&gt;</code> vai no final da página.",
             "Aqui está um exemplo da estrutura de uma página:",
-            "<blockquote>&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>  &lt;!-- Seu código HTML vai aqui --&gt;<br>&lt;/html&gt;</blockquote>",
+            "<blockquote>&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>&nbsp;&nbsp;&lt;!-- Seu código HTML vai aqui --&gt;<br>&lt;/html&gt;</blockquote>",
             "<hr>",
             "Adicione uma tag <code>DOCTYPE</code> para HTML5 no topo do documento HTML em branco no editor de texto. Abaixo dela, adicione tags <code>html</code> de abertura e fechamento, ao redor de um elemento <code>h1</code>. O texto do <code>h1</code> pode ser qualquer um."
           ]
@@ -2546,34 +2712,46 @@
         "You can add another level of organization in your HTML document within the <code>html</code> tags with the <code>head</code> and <code>body</code> elements. Any markup with information about your page would go into the <code>head</code> tag. Then any markup with the content of the page (what displays for a user) would go into the <code>body</code> tag.",
         "Metadata elements, such as <code>link</code>, <code>meta</code>, <code>title</code>, and <code>style</code>, typically go inside the <code>head</code> element.",
         "Here's an example of a page's layout:",
-        "<blockquote>&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>  &lt;head&gt;<br>    &lt;!-- metadata elements --&gt;<br>  &lt;/head&gt;<br>  &lt;body&gt;<br>    &lt;!-- page contents --&gt;<br>  &lt;/body&gt;<br>&lt;/html&gt;</blockquote>",
+        "<blockquote>&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>&nbsp;&nbsp;&lt;head&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- metadata elements --&gt;<br>&nbsp;&nbsp;&lt;/head&gt;<br>&nbsp;&nbsp;&lt;body&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- page contents --&gt;<br>&nbsp;&nbsp;&lt;/body&gt;<br>&lt;/html&gt;</blockquote>",
         "<hr>",
         "Edit the markup so there's a <code>head</code> and a <code>body</code>. The <code>head</code> element should only include the <code>title</code>, and the <code>body</code> element should only include the <code>h1</code> and <code>p</code>."
       ],
       "tests": [
         {
-          "text": "There should be only one <code>head</code> element on the page.",
-          "testString": "assert($('head').length == 1, 'There should be only one <code>head</code> element on the page.');"
+          "text":
+            "There should be only one <code>head</code> element on the page.",
+          "testString":
+            "assert($('head').length == 1, 'There should be only one <code>head</code> element on the page.');"
         },
         {
-          "text": "There should be only one <code>body</code> element on the page.",
-          "testString": "assert($('body').length == 1, 'There should be only one <code>body</code> element on the page.');"
+          "text":
+            "There should be only one <code>body</code> element on the page.",
+          "testString":
+            "assert($('body').length == 1, 'There should be only one <code>body</code> element on the page.');"
         },
         {
-          "text": "The <code>head</code> element should be a child of the <code>html</code> element.",
-          "testString": "assert($('html').children('head').length == 1, 'The <code>head</code> element should be a child of the <code>html</code> element.');"
+          "text":
+            "The <code>head</code> element should be a child of the <code>html</code> element.",
+          "testString":
+            "assert($('html').children('head').length == 1, 'The <code>head</code> element should be a child of the <code>html</code> element.');"
         },
         {
-          "text": "The <code>body</code> element should be a child of the <code>html</code> element.",
-          "testString": "assert($('html').children('body').length == 1, 'The <code>body</code> element should be a child of the <code>html</code> element.');"
+          "text":
+            "The <code>body</code> element should be a child of the <code>html</code> element.",
+          "testString":
+            "assert($('html').children('body').length == 1, 'The <code>body</code> element should be a child of the <code>html</code> element.');"
         },
         {
-          "text": "The <code>head</code> element should wrap around the <code>title</code> element.",
-          "testString": "assert(code.match(/<head>\\s*?<title>\\s*?.*?\\s*?<\\/title>\\s*?<\\/head>/gi), 'The <code>head</code> element should wrap around the <code>title</code> element.');"
+          "text":
+            "The <code>head</code> element should wrap around the <code>title</code> element.",
+          "testString":
+            "assert(code.match(/<head>\\s*?<title>\\s*?.*?\\s*?<\\/title>\\s*?<\\/head>/gi), 'The <code>head</code> element should wrap around the <code>title</code> element.');"
         },
         {
-          "text": "The <code>body</code> element should wrap around both the <code>h1</code> and <code>p</code> elements.",
-          "testString": "assert($('body').children('h1').length == 1 && $('body').children('p').length == 1, 'The <code>body</code> element should wrap around both the <code>h1</code> and <code>p</code> elements.');"
+          "text":
+            "The <code>body</code> element should wrap around both the <code>h1</code> and <code>p</code> elements.",
+          "testString":
+            "assert($('body').children('h1').length == 1 && $('body').children('p').length == 1, 'The <code>body</code> element should wrap around both the <code>h1</code> and <code>p</code> elements.');"
         }
       ],
       "challengeType": 0,
@@ -2584,7 +2762,7 @@
             "Você pode adicionar mais um nível de organização ao seu documento HTML dentro da tag <code>html</code> com os elementos <code>head</code> (cabeça) e <code>body</code> (corpo). Qualquer código com informações sobre a sua página deve estar dentro da tag <code>head</code>. Assim, qualquer código com o conteúdo da sua página (o que aparece para o usuário) deve estar dentro da tag <code>body</code>.",
             "Elementos de metadados, como <code>link</code>, <code>meta</code>, <code>title</code> e <code>style</code>, tipicamente aparecem dentro do elemento <code>head</code>.",
             "Aqui está um exemplo da estrutura de uma página:",
-            "<blockquote>&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>  &lt;head&gt;<br>    &lt;!-- elementos de metadados --&gt;<br>  &lt;/head&gt;<br>  &lt;body&gt;<br>    &lt;!-- conteúdo da página --&gt;<br>  &lt;/body&gt;<br>&lt;/html&gt;</blockquote>",
+            "<blockquote>&lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>&nbsp;&nbsp;&lt;head&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- elementos de metadados --&gt;<br>&nbsp;&nbsp;&lt;/head&gt;<br>&nbsp;&nbsp;&lt;body&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- conteúdo da página --&gt;<br>&nbsp;&nbsp;&lt;/body&gt;<br>&lt;/html&gt;</blockquote>",
             "<hr>",
             "Edite o código para que tenha uma <code>head</code> e um <code>body</code>. O elemento <code>head</code> deve incluir apenas o <code>title</code>, e o elemento <code>body</code> deve conter apenas o <code>h1</code> e o <code>p</code>."
           ]
diff --git a/challenges/01-responsive-web-design/css-grid.json b/challenges/01-responsive-web-design/css-grid.json
index 2f1e82f20..97dc2b05d 100644
--- a/challenges/01-responsive-web-design/css-grid.json
+++ b/challenges/01-responsive-web-design/css-grid.json
@@ -15,8 +15,10 @@
       ],
       "tests": [
         {
-          "text": "<code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.",
-          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.');"
+          "text":
+            "<code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.",
+          "testString":
+            "assert(code.match(/.container\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>display</code> property with a value of <code>grid</code>.');"
         }
       ],
       "solutions": [],
@@ -66,7 +68,7 @@
       "title": "Add Columns with grid-template-columns",
       "description": [
         "Simply creating a grid element doesn't get you very far. You need to define the structure of the grid as well. To add some columns to the grid, use the <code>grid-template-columns</code> property on a grid container as demonstrated below:",
-        "<blockquote>.container {<br>display: grid;<br>grid-template-columns: 50px 50px;<br>}</blockquote>",
+        "<blockquote>.container {<br>&nbsp;&nbsp;display: grid;<br>&nbsp;&nbsp;grid-template-columns: 50px 50px;<br>}</blockquote>",
         "This will give your grid two columns that are 50px wide each.",
         "The number of parameters given to the <code>grid-template-columns</code> property indicates the number of columns in the grid, and the value of each parameter indicates the width of each column.",
         "<hr>",
@@ -74,8 +76,10 @@
       ],
       "tests": [
         {
-          "text": "<code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.",
-          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?100px\\s*?100px\\s*?100px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.');"
+          "text":
+            "<code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.",
+          "testString":
+            "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?100px\\s*?100px\\s*?100px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property with three units of <code>100px</code>.');"
         }
       ],
       "solutions": [],
@@ -131,8 +135,10 @@
       ],
       "tests": [
         {
-          "text": "<code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.",
-          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-rows\\s*?:\\s*?50px\\s*?50px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.');"
+          "text":
+            "<code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.",
+          "testString":
+            "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-rows\\s*?:\\s*?50px\\s*?50px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-rows</code> property with two units of <code>50px</code>.');"
         }
       ],
       "solutions": [],
@@ -195,8 +201,10 @@
       ],
       "tests": [
         {
-          "text": "<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.",
-          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?1fr\\s*?100px\\s*?2fr\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.');"
+          "text":
+            "<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.",
+          "testString":
+            "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?1fr\\s*?100px\\s*?2fr\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that has three columns with the following widths: <code>1fr, 100px, and 2fr</code>.');"
         }
       ],
       "solutions": [],
@@ -256,8 +264,10 @@
       ],
       "tests": [
         {
-          "text": "<code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.",
-          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-column-gap\\s*?:\\s*?20px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.');"
+          "text":
+            "<code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.",
+          "testString":
+            "assert(code.match(/.container\\s*?{[\\s\\S]*grid-column-gap\\s*?:\\s*?20px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-column-gap</code> property that has the value of <code>20px</code>.');"
         }
       ],
       "solutions": [],
@@ -316,8 +326,10 @@
       ],
       "tests": [
         {
-          "text": "<code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.",
-          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-row-gap\\s*?:\\s*?5px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.');"
+          "text":
+            "<code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.",
+          "testString":
+            "assert(code.match(/.container\\s*?{[\\s\\S]*grid-row-gap\\s*?:\\s*?5px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-row-gap</code> property that has the value of <code>5px</code>.');"
         }
       ],
       "solutions": [],
@@ -376,8 +388,10 @@
       ],
       "tests": [
         {
-          "text": "<code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.",
-          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-gap\\s*?:\\s*?10px\\s*?20px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.');"
+          "text":
+            "<code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.",
+          "testString":
+            "assert(code.match(/.container\\s*?{[\\s\\S]*grid-gap\\s*?:\\s*?10px\\s*?20px\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-gap</code> property that introduces <code>10px</code> gap between the rows and <code>20px</code> gap between the columns.');"
         }
       ],
       "solutions": [],
@@ -442,8 +456,10 @@
       ],
       "tests": [
         {
-          "text": "<code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.",
-          "testString": "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-column\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.');"
+          "text":
+            "<code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.",
+          "testString":
+            "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-column\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-column</code> property that has the value of <code>2 / 4</code>.');"
         }
       ],
       "solutions": [],
@@ -506,8 +522,10 @@
       ],
       "tests": [
         {
-          "text": "<code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.",
-          "testString": "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-row\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.');"
+          "text":
+            "<code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.",
+          "testString":
+            "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-row\\s*?:\\s*?2\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-row</code> property that has the value of <code>2 / 4</code>.');"
         }
       ],
       "solutions": [],
@@ -574,8 +592,10 @@
       ],
       "tests": [
         {
-          "text": "<code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.",
-          "testString": "assert(code.match(/.item2\\s*?{[\\s\\S]*justify-self\\s*?:\\s*?center\\s*?;[\\s\\S]*}/gi), '<code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.');"
+          "text":
+            "<code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.",
+          "testString":
+            "assert(code.match(/.item2\\s*?{[\\s\\S]*justify-self\\s*?:\\s*?center\\s*?;[\\s\\S]*}/gi), '<code>item2</code> class should have a <code>justify-self</code> property that has the value of <code>center</code>.');"
         }
       ],
       "solutions": [],
@@ -639,8 +659,10 @@
       ],
       "tests": [
         {
-          "text": "<code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.",
-          "testString": "assert(code.match(/.item3\\s*?{[\\s\\S]*align-self\\s*?:\\s*?end\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.');"
+          "text":
+            "<code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.",
+          "testString":
+            "assert(code.match(/.item3\\s*?{[\\s\\S]*align-self\\s*?:\\s*?end\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>align-self</code> property that has the value of <code>end</code>.');"
         }
       ],
       "solutions": [],
@@ -704,8 +726,10 @@
       ],
       "tests": [
         {
-          "text": "<code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.",
-          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*justify-items\\s*?:\\s*?center\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.');"
+          "text":
+            "<code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.",
+          "testString":
+            "assert(code.match(/.container\\s*?{[\\s\\S]*justify-items\\s*?:\\s*?center\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>justify-items</code> property that has the value of <code>center</code>.');"
         }
       ],
       "solutions": [],
@@ -765,8 +789,10 @@
       ],
       "tests": [
         {
-          "text": "<code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.",
-          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*align-items\\s*?:\\s*?end\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.');"
+          "text":
+            "<code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.",
+          "testString":
+            "assert(code.match(/.container\\s*?{[\\s\\S]*align-items\\s*?:\\s*?end\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>align-items</code> property that has the value of <code>end</code>.');"
         }
       ],
       "solutions": [],
@@ -821,7 +847,7 @@
       "title": "Divide the Grid Into an Area Template",
       "description": [
         "You can group cells of your grid together into an <dfn>area</dfn> and give the area a custom name. Do this by using <code>grid-template-areas</code> on the container like this:",
-        "<blockquote>grid-template-areas:<br>\"header header header\"<br>\"advert content content\"<br>\"footer footer footer\";</blockquote>",
+        "<blockquote>grid-template-areas:<br>&nbsp;&nbsp;\"header header header\"<br>&nbsp;&nbsp;\"advert content content\"<br>&nbsp;&nbsp;\"footer footer footer\";</blockquote>",
         "The code above merges the top three cells together into an area named <code>header</code>, the bottom three cells into a <code>footer</code> area, and it makes two areas in the middle row; <code>advert</code> and <code>content</code>.",
         "<strong>Note</strong><br>Every word in the code represents a cell and every pair of quotation marks represent a row.",
         "In addition to custom labels, you can use a period (<code>.</code>) to designate an empty cell in the grid.",
@@ -830,8 +856,10 @@
       ],
       "tests": [
         {
-          "text": "<code>container</code> class should have a <code>grid-template-areas</code> propertiy similar to the preview but has <code>.</code> instead of the <code>advert</code> area.",
-          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-areas\\s*?:\\s*?\"\\s*?header\\s*?header\\s*?header\\s*?\"\\s*?\"\\s*?.\\s*?content\\s*?content\\s*?\"\\s*?\"\\s*?footer\\s*?footer\\s*?footer\\s*?\"\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-areas</code> propertiy similar to the preview but has <code>.</code> instead of the <code>advert</code> area.');"
+          "text":
+            "<code>container</code> class should have a <code>grid-template-areas</code> propertiy similar to the preview but has <code>.</code> instead of the <code>advert</code> area.",
+          "testString":
+            "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-areas\\s*?:\\s*?\"\\s*?header\\s*?header\\s*?header\\s*?\"\\s*?\"\\s*?.\\s*?content\\s*?content\\s*?\"\\s*?\"\\s*?footer\\s*?footer\\s*?footer\\s*?\"\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-areas</code> propertiy similar to the preview but has <code>.</code> instead of the <code>advert</code> area.');"
         }
       ],
       "solutions": [],
@@ -896,8 +924,10 @@
       ],
       "tests": [
         {
-          "text": "<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.",
-          "testString": "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-area\\s*?:\\s*?footer\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.');"
+          "text":
+            "<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.",
+          "testString":
+            "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-area\\s*?:\\s*?footer\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>footer</code>.');"
         }
       ],
       "solutions": [],
@@ -968,8 +998,10 @@
       ],
       "tests": [
         {
-          "text": "<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/4</code>.",
-          "testString": "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-area\\s*?:\\s*?3\\s*?\\/\\s*?1\\s*?\\/\\s*?4\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/4</code>.');"
+          "text":
+            "<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/4</code>.",
+          "testString":
+            "assert(code.match(/.item5\\s*?{[\\s\\S]*grid-area\\s*?:\\s*?3\\s*?\\/\\s*?1\\s*?\\/\\s*?4\\s*?\\/\\s*?4\\s*?;[\\s\\S]*}/gi), '<code>item5</code> class should have a <code>grid-area</code> property that has the value of <code>3/1/4/4</code>.');"
         }
       ],
       "solutions": [],
@@ -1040,8 +1072,10 @@
       ],
       "tests": [
         {
-          "text": "<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the width of <code>1fr</code>.",
-          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?3\\s*?,\\s*?1fr\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the width of <code>1fr</code>.');"
+          "text":
+            "<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the width of <code>1fr</code>.",
+          "testString":
+            "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?3\\s*?,\\s*?1fr\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the width of <code>1fr</code>.');"
         }
       ],
       "solutions": [],
@@ -1103,8 +1137,10 @@
       ],
       "tests": [
         {
-          "text": "<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.",
-          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?3\\s*?,\\s*?minmax\\s*?\\(\\s*?90px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.');"
+          "text":
+            "<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.",
+          "testString":
+            "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?3\\s*?,\\s*?minmax\\s*?\\(\\s*?90px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.');"
         }
       ],
       "solutions": [],
@@ -1168,8 +1204,10 @@
       ],
       "tests": [
         {
-          "text": "<code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.",
-          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?auto-fill\\s*?,\\s*?minmax\\s*?\\(\\s*?60px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.');"
+          "text":
+            "<code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.",
+          "testString":
+            "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?auto-fill\\s*?,\\s*?minmax\\s*?\\(\\s*?60px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fill</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.');"
         }
       ],
       "solutions": [],
@@ -1247,8 +1285,10 @@
       ],
       "tests": [
         {
-          "text": "<code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.",
-          "testString": "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?auto-fit\\s*?,\\s*?minmax\\s*?\\(\\s*?60px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.');"
+          "text":
+            "<code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.",
+          "testString":
+            "assert(code.match(/.container\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?repeat\\s*?\\(\\s*?auto-fit\\s*?,\\s*?minmax\\s*?\\(\\s*?60px\\s*?,\\s*?1fr\\s*?\\)\\s*?\\)\\s*?;[\\s\\S]*}/gi), '<code>container2</code> class should have a <code>grid-template-columns</code> property with <code>repeat</code> and <code>auto-fit</code> that will fill the grid with columns that have a minimum width of <code>60px</code> and maximum of <code>1fr</code>.');"
         }
       ],
       "solutions": [],
@@ -1327,8 +1367,10 @@
       ],
       "tests": [
         {
-          "text": "When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.",
-          "testString": "assert(code.match(/@media\\s*?\\(\\s*?min-width\\s*?:\\s*?400px\\s*?\\)[\\s\\S]*.container\\s*?{[\\s\\S]*grid-template-areas\\s*?:\\s*?\"\\s*?header\\s*?header\\s*?\"\\s*?\"\\s*?advert\\s*?content\\s*?\"\\s*?\"\\s*?footer\\s*?footer\\s*?\"\\s*?;[\\s\\S]*}/gi), 'When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.');"
+          "text":
+            "When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.",
+          "testString":
+            "assert(code.match(/@media\\s*?\\(\\s*?min-width\\s*?:\\s*?400px\\s*?\\)[\\s\\S]*.container\\s*?{[\\s\\S]*grid-template-areas\\s*?:\\s*?\"\\s*?header\\s*?header\\s*?\"\\s*?\"\\s*?advert\\s*?content\\s*?\"\\s*?\"\\s*?footer\\s*?footer\\s*?\"\\s*?;[\\s\\S]*}/gi), 'When the viewport is <code>400px</code> or more, <code>container</code> class should have a <code>grid-template-areas</code> property in which the footer and header areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.');"
         }
       ],
       "solutions": [],
@@ -1427,12 +1469,16 @@
       ],
       "tests": [
         {
-          "text": "<code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.",
-          "testString": "assert(code.match(/.item3\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?auto\\s*?1fr\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.');"
+          "text":
+            "<code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.",
+          "testString":
+            "assert(code.match(/.item3\\s*?{[\\s\\S]*grid-template-columns\\s*?:\\s*?auto\\s*?1fr\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>grid-template-columns</code> property with <code>auto</code> and <code>1fr</code> as values.');"
         },
         {
-          "text": "<code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.",
-          "testString": "assert(code.match(/.item3\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.');"
+          "text":
+            "<code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.",
+          "testString":
+            "assert(code.match(/.item3\\s*?{[\\s\\S]*display\\s*?:\\s*?grid\\s*?;[\\s\\S]*}/gi), '<code>item3</code> class should have a <code>display</code> property with the value of <code>grid</code>.');"
         }
       ],
       "solutions": [],
diff --git a/challenges/01-responsive-web-design/responsive-web-design.json b/challenges/01-responsive-web-design/responsive-web-design.json
index ace65c742..a25c4a1e7 100644
--- a/challenges/01-responsive-web-design/responsive-web-design.json
+++ b/challenges/01-responsive-web-design/responsive-web-design.json
@@ -20,12 +20,16 @@
       ],
       "tests": [
         {
-          "text": "Your <code>p</code> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.",
-          "testString": "assert($('p').css('font-size') == '10px', 'Your <code>p</code> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.');"
+          "text":
+            "Your <code>p</code> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.",
+          "testString":
+            "assert($('p').css('font-size') == '10px', 'Your <code>p</code> element should have the <code>font-size</code> of 10px when the device <code>height</code> is less than or equal to 800px.');"
         },
         {
-          "text": "Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.",
-          "testString": "assert(code.match(/@media\\s?\\(max-height:\\s*?800px\\)/g), 'Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.');"
+          "text":
+            "Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.",
+          "testString":
+            "assert(code.match(/@media\\s?\\(max-height:\\s*?800px\\)/g), 'Declare a <code>@media</code> query for devices with a <code>height</code> less than or equal to 800px.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -75,23 +79,29 @@
         "Making images responsive with CSS is actually very simple. Instead of applying an absolute width to an element:",
         "<code>img { width: 720px; }</code>",
         "You can use:",
-        "<blockquote>img {<br>  max-width: 100%;<br>  display: block;<br>  height: auto;<br>}</blockquote>",
+        "<blockquote>img {<br>&nbsp;&nbsp;max-width: 100%;<br>&nbsp;&nbsp;display: block;<br>&nbsp;&nbsp;height: auto;<br>}</blockquote>",
         "The <code>max-width</code> property of 100% scales the image to fit the width of its container, but the image won't stretch wider than its original width. Setting the <code>display</code> property to block changes the image from an inline element (its default), to a block element on its own line. The <code>height</code> property of auto keeps the original aspect ratio of the image.",
         "<hr>",
         "Add style rules for the <code>img</code> tag to make it responsive to the size of its container. It should display as a block-level element, it should fit the full width of its container without stretching, and it should keep its original aspect ratio."
       ],
       "tests": [
         {
-          "text": "Your <code>img</code> tag should have a <code>max-width</code> set to 100%.",
-          "testString": "assert(code.match(/max-width:\\s*?100%;/g), 'Your <code>img</code> tag should have a <code>max-width</code> set to 100%.');"
+          "text":
+            "Your <code>img</code> tag should have a <code>max-width</code> set to 100%.",
+          "testString":
+            "assert(code.match(/max-width:\\s*?100%;/g), 'Your <code>img</code> tag should have a <code>max-width</code> set to 100%.');"
         },
         {
-          "text": "Your <code>img</code> tag should have a <code>display</code> set to block.",
-          "testString": "assert($('img').css('display') == 'block', 'Your <code>img</code> tag should have a <code>display</code> set to block.');"
+          "text":
+            "Your <code>img</code> tag should have a <code>display</code> set to block.",
+          "testString":
+            "assert($('img').css('display') == 'block', 'Your <code>img</code> tag should have a <code>display</code> set to block.');"
         },
         {
-          "text": "Your <code>img</code> tag should have a <code>height</code> set to auto.",
-          "testString": "assert(code.match(/height:\\s*?auto;/g), 'Your <code>img</code> tag should have a <code>height</code> set to auto.');"
+          "text":
+            "Your <code>img</code> tag should have a <code>height</code> set to auto.",
+          "testString":
+            "assert(code.match(/height:\\s*?auto;/g), 'Your <code>img</code> tag should have a <code>height</code> set to auto.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -105,7 +115,7 @@
             "Fazer com que imagens sejam responsivas é muito simples com CSS. Ao invés de aplicar uma largura absoluta a um elemento:",
             "<code>img { width: 720px; }</code>",
             "Você pode usar:",
-            "<blockquote>img {<br>  max-width: 100%;<br>  display: block;<br>  height: auto;<br>}</blockquote>",
+            "<blockquote>img {<br>&nbsp;&nbsp;max-width: 100%;<br>&nbsp;&nbsp;display: block;<br>&nbsp;&nbsp;height: auto;<br>}</blockquote>",
             "A propriedade <code>max-width</code> em 100% ajusta o tamanho da imagem para preencher a largura de seu container, mas a imagem não irá esticar mais que sua largura original. Ajustando a propriedade <code>display</code> como block muda imagem de elemento inline (o padrão) para um elemento block com uma linha própria. A propriedade <code>height</code> na configuração auto mantem a proporção original da imagem.",
             "<hr>",
             "Adicione regras de estilo para a tag <code>img</code> para torná-la responsiva com relação ao tamanho do seu container. Ela deve ser exibida como um elemento de nível block, e deve preencher toda a largura de seu container sem esticar, mantendo as proporções originais."
@@ -135,18 +145,22 @@
       "description": [
         "The simplest way to make your images appear \"retina\" (and optimize them for retina displays) is to define their <code>width</code> and <code>height</code> values as only half of what the original file is.",
         "Here is an example of an image that is only using half of the original height and width:",
-        "<blockquote>&lt;style&gt;<br>  img { height: 250px; width: 250px; }<br>&lt;/style&gt;<br>&lt;img src=&quot;coolPic500x500&quot; alt=&quot;A most excellent picture&quot;&gt;</blockquote>",
+        "<blockquote>&lt;style&gt;<br>&nbsp;&nbsp;img { height: 250px; width: 250px; }<br>&lt;/style&gt;<br>&lt;img src=&quot;coolPic500x500&quot; alt=&quot;A most excellent picture&quot;&gt;</blockquote>",
         "<hr>",
         "Set the <code>width</code> and <code>height</code> of the <code>img</code> tag to half of their original values. In this case, both the original <code>height</code> and the original <code>width</code> are 200px."
       ],
       "tests": [
         {
-          "text": "Your <code>img</code> tag should have a <code>width</code> of 100 pixels.",
-          "testString": "assert($('img').css('width') == '100px', 'Your <code>img</code> tag should have a <code>width</code> of 100 pixels.');"
+          "text":
+            "Your <code>img</code> tag should have a <code>width</code> of 100 pixels.",
+          "testString":
+            "assert($('img').css('width') == '100px', 'Your <code>img</code> tag should have a <code>width</code> of 100 pixels.');"
         },
         {
-          "text": "Your <code>img</code> tag should have a <code>height</code> of 100 pixels.",
-          "testString": "assert($('img').css('height') == '100px', 'Your <code>img</code> tag should have a <code>height</code> of 100 pixels.');"
+          "text":
+            "Your <code>img</code> tag should have a <code>height</code> of 100 pixels.",
+          "testString":
+            "assert($('img').css('height') == '100px', 'Your <code>img</code> tag should have a <code>height</code> of 100 pixels.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -159,7 +173,7 @@
           "description": [
             "A maneira mais simples de fazer com que suas imagens tenham uma aparência \"retina\" (e otimizadas para telas retina) é definindo seus valores de <code>width</code> e <code>height</code> como somente metade do tamanho original dos arquivos.",
             "Segue um exemplo de imagem que possui somente metade dos valores originais de altura e largura:",
-            "<blockquote>&lt;style&gt;<br>  img { height: 250px; width: 250px; }<br>&lt;/style&gt;<br>&lt;img src=&quot;coolPic500x500&quot; alt=&quot;A most excellent picture&quot;&gt;</blockquote>",
+            "<blockquote>&lt;style&gt;<br>&nbsp;&nbsp;img { height: 250px; width: 250px; }<br>&lt;/style&gt;<br>&lt;img src=&quot;coolPic500x500&quot; alt=&quot;A most excellent picture&quot;&gt;</blockquote>",
             "<hr>",
             "Configure os valores de <code>width</code> e <code>height</code> da tag <code>img</code> como metade do seu tamanho original. Nesse caso, o valor original de <code>height</code> e o valor original de <code>width</code> são de 200px."
           ]
@@ -194,12 +208,16 @@
       ],
       "tests": [
         {
-          "text": "Your <code>h2</code> tag should have a <code>width</code> of 80vw.",
-          "testString": "assert(code.match(/h2\\s*?{\\s*?width:\\s*?80vw;\\s*?}/g), 'Your <code>h2</code> tag should have a <code>width</code> of 80vw.');"
+          "text":
+            "Your <code>h2</code> tag should have a <code>width</code> of 80vw.",
+          "testString":
+            "assert(code.match(/h2\\s*?{\\s*?width:\\s*?80vw;\\s*?}/g), 'Your <code>h2</code> tag should have a <code>width</code> of 80vw.');"
         },
         {
-          "text": "Your <code>p</code> tag should have a <code>width</code> of 75vmin.",
-          "testString": "assert(code.match(/p\\s*?{\\s*?width:\\s*?75vmin;\\s*?}/g), 'Your <code>p</code> tag should have a <code>width</code> of 75vmin.');"
+          "text":
+            "Your <code>p</code> tag should have a <code>width</code> of 75vmin.",
+          "testString":
+            "assert(code.match(/p\\s*?{\\s*?width:\\s*?75vmin;\\s*?}/g), 'Your <code>p</code> tag should have a <code>width</code> of 75vmin.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -237,4 +255,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/challenges/02-javascript-algorithms-and-data-structures/basic-data-structures.json b/challenges/02-javascript-algorithms-and-data-structures/basic-data-structures.json
index c858270f7..18bc603e4 100644
--- a/challenges/02-javascript-algorithms-and-data-structures/basic-data-structures.json
+++ b/challenges/02-javascript-algorithms-and-data-structures/basic-data-structures.json
@@ -12,30 +12,38 @@
         "<blockquote>let simpleArray = ['one', 2, 'three’, true, false, undefined, null];<br>console.log(simpleArray.length);<br>// logs 7</blockquote>",
         "All array's have a length property, which as shown above, can be very easily accessed with the syntax <code>Array.length</code>.",
         "A more complex implementation of an array can be seen below. This is known as a <dfn>multi-dimensional array</dfn>, or an array that contains other arrays. Notice that this array also contains JavaScript <dfn>objects</dfn>, which we will examine very closely in our next section, but for now, all you need to know is that arrays are also capable of storing complex objects.",
-        "<blockquote>let complexArray = [<br>  [<br>    {<br>      one: 1,<br>      two: 2<br>    },<br>    {<br>      three: 3,<br>      four: 4<br>    }<br>  ],<br>  [<br>    {<br>      a: \"a\",<br>      b: \"b\"<br>    },<br>    {<br>      c: \"c\",<br>      d: “d”<br>    }<br>  ]<br>];</blockquote>",
+        "<blockquote>let complexArray = [<br>&nbsp;&nbsp;[<br>&nbsp;&nbsp;&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;one: 1,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;two: 2<br>&nbsp;&nbsp;&nbsp;&nbsp;},<br>&nbsp;&nbsp;&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;three: 3,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;four: 4<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;],<br>&nbsp;&nbsp;[<br>&nbsp;&nbsp;&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;a: \"a\",<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;b: \"b\"<br>&nbsp;&nbsp;&nbsp;&nbsp;},<br>&nbsp;&nbsp;&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c: \"c\",<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;d: “d”<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;]<br>];</blockquote>",
         "<hr>",
         "We have defined a variable called <code>yourArray</code>. Complete the statement by assigning an array of at least 5 elements in length to the <code>yourArray</code> variable. Your array should contain at least one <dfn>string</dfn>, one <dfn>number</dfn>, and one <dfn>boolean</dfn>."
       ],
       "tests": [
         {
           "text": "yourArray is an array",
-          "testString": "assert.strictEqual(Array.isArray(yourArray), true, 'yourArray is an array');"
+          "testString":
+            "assert.strictEqual(Array.isArray(yourArray), true, 'yourArray is an array');"
         },
         {
           "text": "<code>yourArray</code> is at least 5 elements long",
-          "testString": "assert.isAtLeast(yourArray.length, 5, '<code>yourArray</code> is at least 5 elements long');"
+          "testString":
+            "assert.isAtLeast(yourArray.length, 5, '<code>yourArray</code> is at least 5 elements long');"
         },
         {
-          "text": "<code>yourArray</code> contains at least one <code>boolean</code>",
-          "testString": "assert(yourArray.filter( el => typeof el === 'boolean').length >= 1, '<code>yourArray</code> contains at least one <code>boolean</code>');"
+          "text":
+            "<code>yourArray</code> contains at least one <code>boolean</code>",
+          "testString":
+            "assert(yourArray.filter( el => typeof el === 'boolean').length >= 1, '<code>yourArray</code> contains at least one <code>boolean</code>');"
         },
         {
-          "text": "<code>yourArray</code> contains at least one <code>number</code>",
-          "testString": "assert(yourArray.filter( el => typeof el === 'number').length >= 1, '<code>yourArray</code> contains at least one <code>number</code>');"
+          "text":
+            "<code>yourArray</code> contains at least one <code>number</code>",
+          "testString":
+            "assert(yourArray.filter( el => typeof el === 'number').length >= 1, '<code>yourArray</code> contains at least one <code>number</code>');"
         },
         {
-          "text": "<code>yourArray</code> contains at least one <code>string</code>",
-          "testString": "assert(yourArray.filter( el => typeof el === 'string').length >= 1, '<code>yourArray</code> contains at least one <code>string</code>');"
+          "text":
+            "<code>yourArray</code> contains at least one <code>string</code>",
+          "testString":
+            "assert(yourArray.filter( el => typeof el === 'string').length >= 1, '<code>yourArray</code> contains at least one <code>string</code>');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -47,9 +55,7 @@
           "key": "indexjs",
           "ext": "js",
           "name": "index",
-          "contents": [
-            "let yourArray; // change this line"
-          ],
+          "contents": ["let yourArray; // change this line"],
           "head": [],
           "tail": []
         }
@@ -75,19 +81,24 @@
       "tests": [
         {
           "text": "<code>myArray[0]</code> is equal to <code>\"a\"</code>",
-          "testString": "assert.strictEqual(myArray[0], \"a\", '<code>myArray[0]</code> is equal to <code>\"a\"</code>');"
+          "testString":
+            "assert.strictEqual(myArray[0], \"a\", '<code>myArray[0]</code> is equal to <code>\"a\"</code>');"
         },
         {
-          "text": "<code>myArray[1]</code> is no longer set to <code>\"b\"</code>",
-          "testString": "assert.notStrictEqual(myArray[1], \"b\", '<code>myArray[1]</code> is no longer set to <code>\"b\"</code>');"
+          "text":
+            "<code>myArray[1]</code> is no longer set to <code>\"b\"</code>",
+          "testString":
+            "assert.notStrictEqual(myArray[1], \"b\", '<code>myArray[1]</code> is no longer set to <code>\"b\"</code>');"
         },
         {
           "text": "<code>myArray[2]</code> is equal to <code>\"c\"</code>",
-          "testString": "assert.strictEqual(myArray[2], \"c\", '<code>myArray[2]</code> is equal to <code>\"c\"</code>');"
+          "testString":
+            "assert.strictEqual(myArray[2], \"c\", '<code>myArray[2]</code> is equal to <code>\"c\"</code>');"
         },
         {
           "text": "<code>myArray[3]</code> is equal to <code>\"d\"</code>",
-          "testString": "assert.strictEqual(myArray[3], \"d\", '<code>myArray[3]</code> is equal to <code>\"d\"</code>');"
+          "testString":
+            "assert.strictEqual(myArray[3], \"d\", '<code>myArray[3]</code> is equal to <code>\"d\"</code>');"
         }
       ],
       "solutions": [],
@@ -123,16 +134,22 @@
       ],
       "tests": [
         {
-          "text": "<code>mixedNumbers([\"IV\", 5, \"six\"])</code> should now return <code>[\"I\", 2, \"three\", \"IV\", 5, \"six\", 7, \"VIII\", 9]</code>",
-          "testString": "assert.deepEqual(mixedNumbers(['IV', 5, 'six']), ['I', 2, 'three', 'IV', 5, 'six', 7, 'VIII', 9], '<code>mixedNumbers([\"IV\", 5, \"six\"])</code> should now return <code>[\"I\", 2, \"three\", \"IV\", 5, \"six\", 7, \"VIII\", 9]</code>');"
+          "text":
+            "<code>mixedNumbers([\"IV\", 5, \"six\"])</code> should now return <code>[\"I\", 2, \"three\", \"IV\", 5, \"six\", 7, \"VIII\", 9]</code>",
+          "testString":
+            "assert.deepEqual(mixedNumbers(['IV', 5, 'six']), ['I', 2, 'three', 'IV', 5, 'six', 7, 'VIII', 9], '<code>mixedNumbers([\"IV\", 5, \"six\"])</code> should now return <code>[\"I\", 2, \"three\", \"IV\", 5, \"six\", 7, \"VIII\", 9]</code>');"
         },
         {
-          "text": "The <code>mixedNumbers</code> function should utilize the <code>push()</code> method",
-          "testString": "assert.notStrictEqual(mixedNumbers.toString().search(/\\.push\\(/), -1, 'The <code>mixedNumbers</code> function should utilize the <code>push()</code> method');"
+          "text":
+            "The <code>mixedNumbers</code> function should utilize the <code>push()</code> method",
+          "testString":
+            "assert.notStrictEqual(mixedNumbers.toString().search(/\\.push\\(/), -1, 'The <code>mixedNumbers</code> function should utilize the <code>push()</code> method');"
         },
         {
-          "text": "The <code>mixedNumbers</code> function should utilize the <code>unshift()</code> method",
-          "testString": "assert.notStrictEqual(mixedNumbers.toString().search(/\\.unshift\\(/), -1, 'The <code>mixedNumbers</code> function should utilize the <code>unshift()</code> method');"
+          "text":
+            "The <code>mixedNumbers</code> function should utilize the <code>unshift()</code> method",
+          "testString":
+            "assert.notStrictEqual(mixedNumbers.toString().search(/\\.unshift\\(/), -1, 'The <code>mixedNumbers</code> function should utilize the <code>unshift()</code> method');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -174,16 +191,22 @@
       ],
       "tests": [
         {
-          "text": "<code>popShift([\"challenge\", \"is\", \"not\", \"complete\"])</code> should return <code>[\"challenge\", \"complete\"]</code>",
-          "testString": "assert.deepEqual(popShift(['challenge', 'is', 'not', 'complete']), [\"challenge\", \"complete\"], '<code>popShift([\"challenge\", \"is\", \"not\", \"complete\"])</code> should return <code>[\"challenge\", \"complete\"]</code>');"
+          "text":
+            "<code>popShift([\"challenge\", \"is\", \"not\", \"complete\"])</code> should return <code>[\"challenge\", \"complete\"]</code>",
+          "testString":
+            "assert.deepEqual(popShift(['challenge', 'is', 'not', 'complete']), [\"challenge\", \"complete\"], '<code>popShift([\"challenge\", \"is\", \"not\", \"complete\"])</code> should return <code>[\"challenge\", \"complete\"]</code>');"
         },
         {
-          "text": "The <code>popShift</code> function should utilize the <code>pop()</code> method",
-          "testString": "assert.notStrictEqual(popShift.toString().search(/\\.pop\\(/), -1, 'The <code>popShift</code> function should utilize the <code>pop()</code> method');"
+          "text":
+            "The <code>popShift</code> function should utilize the <code>pop()</code> method",
+          "testString":
+            "assert.notStrictEqual(popShift.toString().search(/\\.pop\\(/), -1, 'The <code>popShift</code> function should utilize the <code>pop()</code> method');"
         },
         {
-          "text": "The <code>popShift</code> function should utilize the <code>shift()</code> method",
-          "testString": "assert.notStrictEqual(popShift.toString().search(/\\.shift\\(/), -1, 'The <code>popShift</code> function should utilize the <code>shift()</code> method');"
+          "text":
+            "The <code>popShift</code> function should utilize the <code>shift()</code> method",
+          "testString":
+            "assert.notStrictEqual(popShift.toString().search(/\\.shift\\(/), -1, 'The <code>popShift</code> function should utilize the <code>shift()</code> method');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -225,11 +248,14 @@
       "tests": [
         {
           "text": "<code>sumOfTen</code> should return 10",
-          "testString": "assert.strictEqual(sumOfTen([2, 5, 1, 5, 2, 1]), 10, '<code>sumOfTen</code> should return 10');"
+          "testString":
+            "assert.strictEqual(sumOfTen([2, 5, 1, 5, 2, 1]), 10, '<code>sumOfTen</code> should return 10');"
         },
         {
-          "text": "The <code>sumOfTen</code> function should utilize the <code>splice()</code> method",
-          "testString": "assert.notStrictEqual(sumOfTen.toString().search(/\\.splice\\(/), -1, 'The <code>sumOfTen</code> function should utilize the <code>splice()</code> method');"
+          "text":
+            "The <code>sumOfTen</code> function should utilize the <code>splice()</code> method",
+          "testString":
+            "assert.notStrictEqual(sumOfTen.toString().search(/\\.splice\\(/), -1, 'The <code>sumOfTen</code> function should utilize the <code>splice()</code> method');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -269,20 +295,27 @@
       ],
       "tests": [
         {
-          "text": "<code>htmlColorNames</code> should return <code>[\"DarkSalmon\", \"BlanchedAlmond\", \"LavenderBlush\", \"PaleTurqoise\", \"FireBrick\"]</code>",
-          "testString": "assert.deepEqual(htmlColorNames(['DarkGoldenRod', 'WhiteSmoke', 'LavenderBlush', 'PaleTurqoise', 'FireBrick']), ['DarkSalmon', 'BlanchedAlmond', 'LavenderBlush', 'PaleTurqoise', 'FireBrick'], '<code>htmlColorNames</code> should return <code>[\"DarkSalmon\", \"BlanchedAlmond\", \"LavenderBlush\", \"PaleTurqoise\", \"FireBrick\"]</code>');"
+          "text":
+            "<code>htmlColorNames</code> should return <code>[\"DarkSalmon\", \"BlanchedAlmond\", \"LavenderBlush\", \"PaleTurqoise\", \"FireBrick\"]</code>",
+          "testString":
+            "assert.deepEqual(htmlColorNames(['DarkGoldenRod', 'WhiteSmoke', 'LavenderBlush', 'PaleTurqoise', 'FireBrick']), ['DarkSalmon', 'BlanchedAlmond', 'LavenderBlush', 'PaleTurqoise', 'FireBrick'], '<code>htmlColorNames</code> should return <code>[\"DarkSalmon\", \"BlanchedAlmond\", \"LavenderBlush\", \"PaleTurqoise\", \"FireBrick\"]</code>');"
         },
         {
-          "text": "The <code>htmlColorNames</code> function should utilize the <code>splice()</code> method",
-          "testString": "assert(/.splice/.test(code), 'The <code>htmlColorNames</code> function should utilize the <code>splice()</code> method');"
+          "text":
+            "The <code>htmlColorNames</code> function should utilize the <code>splice()</code> method",
+          "testString":
+            "assert(/.splice/.test(code), 'The <code>htmlColorNames</code> function should utilize the <code>splice()</code> method');"
         },
         {
-          "text": "You should not use <code>shift()</code> or <code>unshift()</code>.",
-          "testString": "assert(!/shift|unshift/.test(code), 'You should not use <code>shift()</code> or <code>unshift()</code>.');"
+          "text":
+            "You should not use <code>shift()</code> or <code>unshift()</code>.",
+          "testString":
+            "assert(!/shift|unshift/.test(code), 'You should not use <code>shift()</code> or <code>unshift()</code>.');"
         },
         {
           "text": "You should not use array bracket notation.",
-          "testString": "assert(!/\\[\\d\\]\\s*=/.test(code), 'You should not use array bracket notation.');"
+          "testString":
+            "assert(!/\\[\\d\\]\\s*=/.test(code), 'You should not use array bracket notation.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -322,12 +355,16 @@
       ],
       "tests": [
         {
-          "text": "<code>forecast</code> should return <code>[\"warm\", \"sunny\"]",
-          "testString": "assert.deepEqual(forecast(['cold', 'rainy', 'warm', 'sunny', 'cool', 'thunderstorms']), ['warm', 'sunny'], '<code>forecast</code> should return <code>[\"warm\", \"sunny\"]');"
+          "text":
+            "<code>forecast</code> should return <code>[\"warm\", \"sunny\"]",
+          "testString":
+            "assert.deepEqual(forecast(['cold', 'rainy', 'warm', 'sunny', 'cool', 'thunderstorms']), ['warm', 'sunny'], '<code>forecast</code> should return <code>[\"warm\", \"sunny\"]');"
         },
         {
-          "text": "The <code>forecast</code> function should utilize the <code>slice()</code> method",
-          "testString": "assert(/\\.slice\\(/.test(code), 'The <code>forecast</code> function should utilize the <code>slice()</code> method');"
+          "text":
+            "The <code>forecast</code> function should utilize the <code>slice()</code> method",
+          "testString":
+            "assert(/\\.slice\\(/.test(code), 'The <code>forecast</code> function should utilize the <code>slice()</code> method');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -366,24 +403,34 @@
       ],
       "tests": [
         {
-          "text": "<code>copyMachine([true, false, true], 2)</code> should return <code>[[true, false, true], [true, false, true]]</code>",
-          "testString": "assert.deepEqual(copyMachine([true, false, true], 2), [[true, false, true], [true, false, true]], '<code>copyMachine([true, false, true], 2)</code> should return <code>[[true, false, true], [true, false, true]]</code>');"
+          "text":
+            "<code>copyMachine([true, false, true], 2)</code> should return <code>[[true, false, true], [true, false, true]]</code>",
+          "testString":
+            "assert.deepEqual(copyMachine([true, false, true], 2), [[true, false, true], [true, false, true]], '<code>copyMachine([true, false, true], 2)</code> should return <code>[[true, false, true], [true, false, true]]</code>');"
         },
         {
-          "text": "<code>copyMachine([1, 2, 3], 5)</code> should return <code>[[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]]</code>",
-          "testString": "assert.deepEqual(copyMachine([1, 2, 3], 5), [[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]], '<code>copyMachine([1, 2, 3], 5)</code> should return <code>[[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]]</code>');"
+          "text":
+            "<code>copyMachine([1, 2, 3], 5)</code> should return <code>[[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]]</code>",
+          "testString":
+            "assert.deepEqual(copyMachine([1, 2, 3], 5), [[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]], '<code>copyMachine([1, 2, 3], 5)</code> should return <code>[[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]]</code>');"
         },
         {
-          "text": "<code>copyMachine([true, true, null], 1)</code> should return <code>[[true, true, null]]</code>",
-          "testString": "assert.deepEqual(copyMachine([true, true, null], 1), [[true, true, null]], '<code>copyMachine([true, true, null], 1)</code> should return <code>[[true, true, null]]</code>');"
+          "text":
+            "<code>copyMachine([true, true, null], 1)</code> should return <code>[[true, true, null]]</code>",
+          "testString":
+            "assert.deepEqual(copyMachine([true, true, null], 1), [[true, true, null]], '<code>copyMachine([true, true, null], 1)</code> should return <code>[[true, true, null]]</code>');"
         },
         {
-          "text": "<code>copyMachine([\"it works\"], 3)</code> should return <code>[[\"it works\"], [\"it works\"], [\"it works\"]]</code>",
-          "testString": "assert.deepEqual(copyMachine(['it works'], 3), [['it works'], ['it works'], ['it works']], '<code>copyMachine([\"it works\"], 3)</code> should return <code>[[\"it works\"], [\"it works\"], [\"it works\"]]</code>');"
+          "text":
+            "<code>copyMachine([\"it works\"], 3)</code> should return <code>[[\"it works\"], [\"it works\"], [\"it works\"]]</code>",
+          "testString":
+            "assert.deepEqual(copyMachine(['it works'], 3), [['it works'], ['it works'], ['it works']], '<code>copyMachine([\"it works\"], 3)</code> should return <code>[[\"it works\"], [\"it works\"], [\"it works\"]]</code>');"
         },
         {
-          "text": "The <code>copyMachine</code> function should utilize the <code>spread operator</code> with array <code>arr</code>",
-          "testString": "assert.notStrictEqual(copyMachine.toString().indexOf('.concat(_toConsumableArray(arr))'), -1, 'The <code>copyMachine</code> function should utilize the <code>spread operator</code> with array <code>arr</code>');"
+          "text":
+            "The <code>copyMachine</code> function should utilize the <code>spread operator</code> with array <code>arr</code>",
+          "testString":
+            "assert.notStrictEqual(copyMachine.toString().indexOf('.concat(_toConsumableArray(arr))'), -1, 'The <code>copyMachine</code> function should utilize the <code>spread operator</code> with array <code>arr</code>');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -427,12 +474,16 @@
       ],
       "tests": [
         {
-          "text": "<code>spreadOut</code> should return <code>[\"learning\", \"to\", \"code\", \"is\", \"fun\"]</code>",
-          "testString": "assert.deepEqual(spreadOut(), ['learning', 'to', 'code', 'is', 'fun'], '<code>spreadOut</code> should return <code>[\"learning\", \"to\", \"code\", \"is\", \"fun\"]</code>');"
+          "text":
+            "<code>spreadOut</code> should return <code>[\"learning\", \"to\", \"code\", \"is\", \"fun\"]</code>",
+          "testString":
+            "assert.deepEqual(spreadOut(), ['learning', 'to', 'code', 'is', 'fun'], '<code>spreadOut</code> should return <code>[\"learning\", \"to\", \"code\", \"is\", \"fun\"]</code>');"
         },
         {
-          "text": "The <code>spreadOut</code> function should utilize spread syntax",
-          "testString": "assert.notStrictEqual(spreadOut.toString().search(/[...]/), -1, 'The <code>spreadOut</code> function should utilize spread syntax');"
+          "text":
+            "The <code>spreadOut</code> function should utilize spread syntax",
+          "testString":
+            "assert.notStrictEqual(spreadOut.toString().search(/[...]/), -1, 'The <code>spreadOut</code> function should utilize spread syntax');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -471,24 +522,34 @@
       ],
       "tests": [
         {
-          "text": "<code>quickCheck([\"squash\", \"onions\", \"shallots\"], \"mushrooms\")</code> should return <code>false</code>",
-          "testString": "assert.strictEqual(quickCheck(['squash', 'onions', 'shallots'], 'mushrooms'), false, '<code>quickCheck([\"squash\", \"onions\", \"shallots\"], \"mushrooms\")</code> should return <code>false</code>');"
+          "text":
+            "<code>quickCheck([\"squash\", \"onions\", \"shallots\"], \"mushrooms\")</code> should return <code>false</code>",
+          "testString":
+            "assert.strictEqual(quickCheck(['squash', 'onions', 'shallots'], 'mushrooms'), false, '<code>quickCheck([\"squash\", \"onions\", \"shallots\"], \"mushrooms\")</code> should return <code>false</code>');"
         },
         {
-          "text": "<code>quickCheck([\"squash\", \"onions\", \"shallots\"], \"onions\")</code> should return <code>true</code>",
-          "testString": "assert.strictEqual(quickCheck(['squash', 'onions', 'shallots'], 'onions'), true, '<code>quickCheck([\"squash\", \"onions\", \"shallots\"], \"onions\")</code> should return <code>true</code>');"
+          "text":
+            "<code>quickCheck([\"squash\", \"onions\", \"shallots\"], \"onions\")</code> should return <code>true</code>",
+          "testString":
+            "assert.strictEqual(quickCheck(['squash', 'onions', 'shallots'], 'onions'), true, '<code>quickCheck([\"squash\", \"onions\", \"shallots\"], \"onions\")</code> should return <code>true</code>');"
         },
         {
-          "text": "<code>quickCheck([3, 5, 9, 125, 45, 2], 125)</code> should return <code>true</code>",
-          "testString": "assert.strictEqual(quickCheck([3, 5, 9, 125, 45, 2], 125), true, '<code>quickCheck([3, 5, 9, 125, 45, 2], 125)</code> should return <code>true</code>');"
+          "text":
+            "<code>quickCheck([3, 5, 9, 125, 45, 2], 125)</code> should return <code>true</code>",
+          "testString":
+            "assert.strictEqual(quickCheck([3, 5, 9, 125, 45, 2], 125), true, '<code>quickCheck([3, 5, 9, 125, 45, 2], 125)</code> should return <code>true</code>');"
         },
         {
-          "text": "<code>quickCheck([true, false, false], undefined)</code> should return <code>false</code>",
-          "testString": "assert.strictEqual(quickCheck([true, false, false], undefined), false, '<code>quickCheck([true, false, false], undefined)</code> should return <code>false</code>');"
+          "text":
+            "<code>quickCheck([true, false, false], undefined)</code> should return <code>false</code>",
+          "testString":
+            "assert.strictEqual(quickCheck([true, false, false], undefined), false, '<code>quickCheck([true, false, false], undefined)</code> should return <code>false</code>');"
         },
         {
-          "text": "The <code>quickCheck</code> function should utilize the <code>indexOf()</code> method",
-          "testString": "assert.notStrictEqual(quickCheck.toString().search(/\\.indexOf\\(/), -1, 'The <code>quickCheck</code> function should utilize the <code>indexOf()</code> method');"
+          "text":
+            "The <code>quickCheck</code> function should utilize the <code>indexOf()</code> method",
+          "testString":
+            "assert.notStrictEqual(quickCheck.toString().search(/\\.indexOf\\(/), -1, 'The <code>quickCheck</code> function should utilize the <code>indexOf()</code> method');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -528,24 +589,34 @@
       ],
       "tests": [
         {
-          "text": "<code>filteredArray([[10, 8, 3], [14, 6, 23], [3, 18, 6]], 18)</code> should return <code>[ [10, 8, 3], [14, 6, 23] ]</code>",
-          "testString": "assert.deepEqual(filteredArray([ [10, 8, 3], [14, 6, 23], [3, 18, 6] ], 18), [[10, 8, 3], [14, 6, 23]], '<code>filteredArray([[10, 8, 3], [14, 6, 23], [3, 18, 6]], 18)</code> should return <code>[ [10, 8, 3], [14, 6, 23] ]</code>');"
+          "text":
+            "<code>filteredArray([[10, 8, 3], [14, 6, 23], [3, 18, 6]], 18)</code> should return <code>[ [10, 8, 3], [14, 6, 23] ]</code>",
+          "testString":
+            "assert.deepEqual(filteredArray([ [10, 8, 3], [14, 6, 23], [3, 18, 6] ], 18), [[10, 8, 3], [14, 6, 23]], '<code>filteredArray([[10, 8, 3], [14, 6, 23], [3, 18, 6]], 18)</code> should return <code>[ [10, 8, 3], [14, 6, 23] ]</code>');"
         },
         {
-          "text": "<code>filteredArray([ [\"trumpets\", 2], [\"flutes\", 4], [\"saxophones\", 2] ], 2)</code> should return <code>[ [\"flutes\", 4] ]</code>",
-          "testString": "assert.deepEqual(filteredArray([ ['trumpets', 2], ['flutes', 4], ['saxophones', 2] ], 2), [['flutes', 4]], '<code>filteredArray([ [\"trumpets\", 2], [\"flutes\", 4], [\"saxophones\", 2] ], 2)</code> should return <code>[ [\"flutes\", 4] ]</code>');"
+          "text":
+            "<code>filteredArray([ [\"trumpets\", 2], [\"flutes\", 4], [\"saxophones\", 2] ], 2)</code> should return <code>[ [\"flutes\", 4] ]</code>",
+          "testString":
+            "assert.deepEqual(filteredArray([ ['trumpets', 2], ['flutes', 4], ['saxophones', 2] ], 2), [['flutes', 4]], '<code>filteredArray([ [\"trumpets\", 2], [\"flutes\", 4], [\"saxophones\", 2] ], 2)</code> should return <code>[ [\"flutes\", 4] ]</code>');"
         },
         {
-          "text": "<code>filteredArray([ [\"amy\", \"beth\", \"sam\"], [\"dave\", \"sean\", \"peter\"] ], \"peter\")</code> should return <code>[ [\"amy\", \"beth\", \"sam\"] ]</code>",
-          "testString": "assert.deepEqual(filteredArray([['amy', 'beth', 'sam'], ['dave', 'sean', 'peter']], 'peter'), [['amy', 'beth', 'sam']], '<code>filteredArray([ [\"amy\", \"beth\", \"sam\"], [\"dave\", \"sean\", \"peter\"] ], \"peter\")</code> should return <code>[ [\"amy\", \"beth\", \"sam\"] ]</code>');"
+          "text":
+            "<code>filteredArray([ [\"amy\", \"beth\", \"sam\"], [\"dave\", \"sean\", \"peter\"] ], \"peter\")</code> should return <code>[ [\"amy\", \"beth\", \"sam\"] ]</code>",
+          "testString":
+            "assert.deepEqual(filteredArray([['amy', 'beth', 'sam'], ['dave', 'sean', 'peter']], 'peter'), [['amy', 'beth', 'sam']], '<code>filteredArray([ [\"amy\", \"beth\", \"sam\"], [\"dave\", \"sean\", \"peter\"] ], \"peter\")</code> should return <code>[ [\"amy\", \"beth\", \"sam\"] ]</code>');"
         },
         {
-          "text": "<code>filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3)</code> should return <code>[ ]</code>",
-          "testString": "assert.deepEqual(filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3), [], '<code>filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3)</code> should return <code>[ ]</code>');"
+          "text":
+            "<code>filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3)</code> should return <code>[ ]</code>",
+          "testString":
+            "assert.deepEqual(filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3), [], '<code>filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3)</code> should return <code>[ ]</code>');"
         },
         {
-          "text": "The <code>filteredArray</code> function should utilize a <code>for</code> loop",
-          "testString": "assert.notStrictEqual(filteredArray.toString().search(/for/), -1, 'The <code>filteredArray</code> function should utilize a <code>for</code> loop');"
+          "text":
+            "The <code>filteredArray</code> function should utilize a <code>for</code> loop",
+          "testString":
+            "assert.notStrictEqual(filteredArray.toString().search(/for/), -1, 'The <code>filteredArray</code> function should utilize a <code>for</code> loop');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -591,24 +662,34 @@
       ],
       "tests": [
         {
-          "text": "<code>myNestedArray</code> should contain only numbers, booleans, and strings as data elements",
-          "testString": "assert.strictEqual((function(arr) { let flattened = (function flatten(arr) { const flat = [].concat(...arr); return flat.some (Array.isArray) ? flatten(flat) : flat; })(arr); for (let i = 0; i < flattened.length; i++) { if ( typeof flattened[i] !== 'number' && typeof flattened[i] !== 'string' && typeof flattened[i] !== 'boolean') { return false } } return true })(myNestedArray), true, '<code>myNestedArray</code> should contain only numbers, booleans, and strings as data elements');"
+          "text":
+            "<code>myNestedArray</code> should contain only numbers, booleans, and strings as data elements",
+          "testString":
+            "assert.strictEqual((function(arr) { let flattened = (function flatten(arr) { const flat = [].concat(...arr); return flat.some (Array.isArray) ? flatten(flat) : flat; })(arr); for (let i = 0; i < flattened.length; i++) { if ( typeof flattened[i] !== 'number' && typeof flattened[i] !== 'string' && typeof flattened[i] !== 'boolean') { return false } } return true })(myNestedArray), true, '<code>myNestedArray</code> should contain only numbers, booleans, and strings as data elements');"
         },
         {
-          "text": "<code>myNestedArray</code> should have exactly 5 levels of depth",
-          "testString": "assert.strictEqual((function(arr) {let depth = 0;function arrayDepth(array, i, d) { if (Array.isArray(array[i])) {  arrayDepth(array[i], 0, d + 1);} else {  depth = (d > depth) ? d : depth;}if (i < array.length) {  arrayDepth(array, i + 1, d);}  }arrayDepth(arr, 0, 0);return depth;})(myNestedArray), 4, '<code>myNestedArray</code> should have exactly 5 levels of depth');"
+          "text":
+            "<code>myNestedArray</code> should have exactly 5 levels of depth",
+          "testString":
+            "assert.strictEqual((function(arr) {let depth = 0;function arrayDepth(array, i, d) { if (Array.isArray(array[i])) {  arrayDepth(array[i], 0, d + 1);} else {  depth = (d > depth) ? d : depth;}if (i < array.length) {  arrayDepth(array, i + 1, d);}  }arrayDepth(arr, 0, 0);return depth;})(myNestedArray), 4, '<code>myNestedArray</code> should have exactly 5 levels of depth');"
         },
         {
-          "text": "<code>myNestedArray</code> should contain exactly one occurrence of the string <code>\"deep\"</code> on an array nested 3 levels deep",
-          "testString": "assert((function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) {  return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) {  return combined.concat(depth);} else {  return combined;}}, []);})(myNestedArray, 'deep').length === 1 && (function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) {  return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) {  return combined.concat(depth);} else {  return combined;}}, []);})(myNestedArray, 'deep')[0] === 2, '<code>myNestedArray</code> should contain exactly one occurrence of the string <code>\"deep\"</code> on an array nested 3 levels deep');"
+          "text":
+            "<code>myNestedArray</code> should contain exactly one occurrence of the string <code>\"deep\"</code> on an array nested 3 levels deep",
+          "testString":
+            "assert((function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) {  return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) {  return combined.concat(depth);} else {  return combined;}}, []);})(myNestedArray, 'deep').length === 1 && (function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) {  return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) {  return combined.concat(depth);} else {  return combined;}}, []);})(myNestedArray, 'deep')[0] === 2, '<code>myNestedArray</code> should contain exactly one occurrence of the string <code>\"deep\"</code> on an array nested 3 levels deep');"
         },
         {
-          "text": "<code>myNestedArray</code> should contain exactly one occurrence of the string <code>\"deeper\"</code> on an array nested 4 levels deep",
-          "testString": "assert((function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) {  return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) {  return combined.concat(depth);} else {  return combined;}}, []);})(myNestedArray, 'deeper').length === 1 && (function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) {  return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) {  return combined.concat(depth);} else {  return combined;}}, []);})(myNestedArray, 'deeper')[0] === 3, '<code>myNestedArray</code> should contain exactly one occurrence of the string <code>\"deeper\"</code> on an array nested 4 levels deep');"
+          "text":
+            "<code>myNestedArray</code> should contain exactly one occurrence of the string <code>\"deeper\"</code> on an array nested 4 levels deep",
+          "testString":
+            "assert((function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) {  return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) {  return combined.concat(depth);} else {  return combined;}}, []);})(myNestedArray, 'deeper').length === 1 && (function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) {  return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) {  return combined.concat(depth);} else {  return combined;}}, []);})(myNestedArray, 'deeper')[0] === 3, '<code>myNestedArray</code> should contain exactly one occurrence of the string <code>\"deeper\"</code> on an array nested 4 levels deep');"
         },
         {
-          "text": "<code>myNestedArray</code> should contain exactly one occurrence of the string <code>\"deepest\"</code> on an array nested 5 levels deep",
-          "testString": "assert((function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) {  return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) {  return combined.concat(depth);} else {  return combined;}}, []);})(myNestedArray, 'deepest').length === 1 && (function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) {  return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) {  return combined.concat(depth);} else {  return combined;}}, []);})(myNestedArray, 'deepest')[0] === 4, '<code>myNestedArray</code> should contain exactly one occurrence of the string <code>\"deepest\"</code> on an array nested 5 levels deep');"
+          "text":
+            "<code>myNestedArray</code> should contain exactly one occurrence of the string <code>\"deepest\"</code> on an array nested 5 levels deep",
+          "testString":
+            "assert((function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) {  return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) {  return combined.concat(depth);} else {  return combined;}}, []);})(myNestedArray, 'deepest').length === 1 && (function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) {  return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) {  return combined.concat(depth);} else {  return combined;}}, []);})(myNestedArray, 'deepest')[0] === 4, '<code>myNestedArray</code> should contain exactly one occurrence of the string <code>\"deepest\"</code> on an array nested 5 levels deep');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -641,7 +722,7 @@
       "title": "Add Key-Value Pairs to JavaScript Objects",
       "description": [
         "At their most basic, objects are just collections of <dfn>key-value pairs</dfn>, or in other words, pieces of data mapped to unique identifiers that we call <dfn>properties</dfn> or <dfn>keys</dfn>. Let's take a look at a very simple example:",
-        "<blockquote>let FCC_User = {<br>  username: 'awesome_coder',<br>  followers: 572,<br>  points: 1741,<br>  completedProjects: 15<br>};</blockquote>",
+        "<blockquote>let FCC_User = {<br>&nbsp;&nbsp;username: 'awesome_coder',<br>&nbsp;&nbsp;followers: 572,<br>&nbsp;&nbsp;points: 1741,<br>&nbsp;&nbsp;completedProjects: 15<br>};</blockquote>",
         "The above code defines an object called <code>FCC_User</code> that has four <dfn>properties</dfn>, each of which map to a specific value. If we wanted to know the number of <code>followers</code> <code>FCC_User</code> has, we can access that property by writing:",
         "<blockquote>let userData = FCC_User.followers;<br>// userData equals 572</blockquote>",
         "This is called <dfn>dot notation</dfn>. Alternatively, we can also access the property with brackets, like so:",
@@ -653,23 +734,32 @@
       "tests": [
         {
           "text": "<code>foods</code> is an object",
-          "testString": "assert(typeof foods === 'object', '<code>foods</code> is an object');"
+          "testString":
+            "assert(typeof foods === 'object', '<code>foods</code> is an object');"
         },
         {
-          "text": "The <code>foods</code> object has a key <code>\"bananas\"</code> with a value of <code>13</code>",
-          "testString": "assert(foods.bananas === 13, 'The <code>foods</code> object has a key <code>\"bananas\"</code> with a value of <code>13</code>');"
+          "text":
+            "The <code>foods</code> object has a key <code>\"bananas\"</code> with a value of <code>13</code>",
+          "testString":
+            "assert(foods.bananas === 13, 'The <code>foods</code> object has a key <code>\"bananas\"</code> with a value of <code>13</code>');"
         },
         {
-          "text": "The <code>foods</code> object has a key <code>\"grapes\"</code> with a value of <code>35</code>",
-          "testString": "assert(foods.grapes === 35, 'The <code>foods</code> object has a key <code>\"grapes\"</code> with a value of <code>35</code>');"
+          "text":
+            "The <code>foods</code> object has a key <code>\"grapes\"</code> with a value of <code>35</code>",
+          "testString":
+            "assert(foods.grapes === 35, 'The <code>foods</code> object has a key <code>\"grapes\"</code> with a value of <code>35</code>');"
         },
         {
-          "text": "The <code>foods</code> object has a key <code>\"strawberries\"</code> with a value of <code>27</code>",
-          "testString": "assert(foods.strawberries === 27, 'The <code>foods</code> object has a key <code>\"strawberries\"</code> with a value of <code>27</code>');"
+          "text":
+            "The <code>foods</code> object has a key <code>\"strawberries\"</code> with a value of <code>27</code>",
+          "testString":
+            "assert(foods.strawberries === 27, 'The <code>foods</code> object has a key <code>\"strawberries\"</code> with a value of <code>27</code>');"
         },
         {
-          "text": "The key-value pairs should be set using dot or bracket notation",
-          "testString": "assert(code.search(/bananas:/) === -1 && code.search(/grapes:/) === -1 && code.search(/strawberries:/) === -1, 'The key-value pairs should be set using dot or bracket notation');"
+          "text":
+            "The key-value pairs should be set using dot or bracket notation",
+          "testString":
+            "assert(code.search(/bananas:/) === -1 && code.search(/grapes:/) === -1 && code.search(/strawberries:/) === -1, 'The key-value pairs should be set using dot or bracket notation');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -704,27 +794,35 @@
       "title": "Modify an Object Nested Within an Object",
       "description": [
         "Now let's take a look at a slightly more complex object. Object properties can be nested to an arbitrary depth, and their values can be any type of data supported by JavaScript, including arrays and even other objects. Consider the following:",
-        "<blockquote>let nestedObject = {<br>  id: 28802695164,<br>  date: 'December 31, 2016',<br>  data: {<br>    totalUsers: 99,<br>    online: 80,<br>    onlineStatus: {<br>      active: 67,<br>      away: 13<br>    }<br>  }<br>};</blockquote>",
+        "<blockquote>let nestedObject = {<br>&nbsp;&nbsp;id: 28802695164,<br>&nbsp;&nbsp;date: 'December 31, 2016',<br>&nbsp;&nbsp;data: {<br>&nbsp;&nbsp;&nbsp;&nbsp;totalUsers: 99,<br>&nbsp;&nbsp;&nbsp;&nbsp;online: 80,<br>&nbsp;&nbsp;&nbsp;&nbsp;onlineStatus: {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;active: 67,<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;away: 13<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;}<br>};</blockquote>",
         "<code>nestedObject</code> has three unique keys: <code>id</code>, whose value is a number, <code>date</code> whose value is a string, and <code>data</code>, whose value is an object which has yet another object nested within it. While structures can quickly become complex, we can still use the same notations to access the information we need.",
         "<hr>",
         "Here we've defined an object, <code>userActivity</code>, which includes another object nested within it. You can modify properties on this nested object in the same way you modified properties in the last challenge. Set the value of the <code>online</code> key to <code>45</code>."
       ],
       "tests": [
         {
-          "text": "<code>userActivity</code> has <code>id</code>, <code>date</code> and <code>data</code> properties",
-          "testString": "assert('id' in userActivity && 'date' in userActivity && 'data' in userActivity, '<code>userActivity</code> has <code>id</code>, <code>date</code> and <code>data</code> properties');"
+          "text":
+            "<code>userActivity</code> has <code>id</code>, <code>date</code> and <code>data</code> properties",
+          "testString":
+            "assert('id' in userActivity && 'date' in userActivity && 'data' in userActivity, '<code>userActivity</code> has <code>id</code>, <code>date</code> and <code>data</code> properties');"
         },
         {
-          "text": "<code>userActivity</code> has a <code>data</code> key set to an object with keys <code>totalUsers</code> and <code>online</code>",
-          "testString": "assert('totalUsers' in userActivity.data && 'online' in userActivity.data, '<code>userActivity</code> has a <code>data</code> key set to an object with keys <code>totalUsers</code> and <code>online</code>');"
+          "text":
+            "<code>userActivity</code> has a <code>data</code> key set to an object with keys <code>totalUsers</code> and <code>online</code>",
+          "testString":
+            "assert('totalUsers' in userActivity.data && 'online' in userActivity.data, '<code>userActivity</code> has a <code>data</code> key set to an object with keys <code>totalUsers</code> and <code>online</code>');"
         },
         {
-          "text": "The <code>online</code> property nested in the <code>data</code> key of <code>userActivity</code> should be set to <code>45</code>",
-          "testString": "assert(userActivity.data.online === 45, 'The <code>online</code> property nested in the <code>data</code> key of <code>userActivity</code> should be set to <code>45</code>');"
+          "text":
+            "The <code>online</code> property nested in the <code>data</code> key of <code>userActivity</code> should be set to <code>45</code>",
+          "testString":
+            "assert(userActivity.data.online === 45, 'The <code>online</code> property nested in the <code>data</code> key of <code>userActivity</code> should be set to <code>45</code>');"
         },
         {
-          "text": "The <code>online</code> property is set using dot or bracket notation",
-          "testString": "assert.strictEqual(code.search(/online: 45/), -1, 'The <code>online</code> property is set using dot or bracket notation');"
+          "text":
+            "The <code>online</code> property is set using dot or bracket notation",
+          "testString":
+            "assert.strictEqual(code.search(/online: 45/), -1, 'The <code>online</code> property is set using dot or bracket notation');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -770,23 +868,32 @@
       "tests": [
         {
           "text": "<code>checkInventory</code> is a function",
-          "testString": "assert.strictEqual(typeof checkInventory, 'function', '<code>checkInventory</code> is a function');"
+          "testString":
+            "assert.strictEqual(typeof checkInventory, 'function', '<code>checkInventory</code> is a function');"
         },
         {
-          "text": "The <code>foods</code> object should have only the following key-value pairs: <code>apples: 25</code>, <code>oranges: 32</code>, <code>plums: 28</code>, <code>bananas: 13</code>, <code>grapes: 35</code>, <code>strawberries: 27</code>",
-          "testString": "assert.deepEqual(foods, {apples: 25, oranges: 32, plums: 28, bananas: 13, grapes: 35, strawberries: 27}, 'The <code>foods</code> object should have only the following key-value pairs: <code>apples: 25</code>, <code>oranges: 32</code>, <code>plums: 28</code>, <code>bananas: 13</code>, <code>grapes: 35</code>, <code>strawberries: 27</code>');"
+          "text":
+            "The <code>foods</code> object should have only the following key-value pairs: <code>apples: 25</code>, <code>oranges: 32</code>, <code>plums: 28</code>, <code>bananas: 13</code>, <code>grapes: 35</code>, <code>strawberries: 27</code>",
+          "testString":
+            "assert.deepEqual(foods, {apples: 25, oranges: 32, plums: 28, bananas: 13, grapes: 35, strawberries: 27}, 'The <code>foods</code> object should have only the following key-value pairs: <code>apples: 25</code>, <code>oranges: 32</code>, <code>plums: 28</code>, <code>bananas: 13</code>, <code>grapes: 35</code>, <code>strawberries: 27</code>');"
         },
         {
-          "text": "<code>checkInventory(\"apples\")</code> should return <code>25</code>",
-          "testString": "assert.strictEqual(checkInventory('apples'), 25, '<code>checkInventory(\"apples\")</code> should return <code>25</code>');"
+          "text":
+            "<code>checkInventory(\"apples\")</code> should return <code>25</code>",
+          "testString":
+            "assert.strictEqual(checkInventory('apples'), 25, '<code>checkInventory(\"apples\")</code> should return <code>25</code>');"
         },
         {
-          "text": "<code>checkInventory(\"bananas\")</code> should return <code>13</code>",
-          "testString": "assert.strictEqual(checkInventory('bananas'), 13, '<code>checkInventory(\"bananas\")</code> should return <code>13</code>');"
+          "text":
+            "<code>checkInventory(\"bananas\")</code> should return <code>13</code>",
+          "testString":
+            "assert.strictEqual(checkInventory('bananas'), 13, '<code>checkInventory(\"bananas\")</code> should return <code>13</code>');"
         },
         {
-          "text": "<code>checkInventory(\"strawberries\")</code> should return <code>27</code>",
-          "testString": "assert.strictEqual(checkInventory('strawberries'), 27, '<code>checkInventory(\"strawberries\")</code> should return <code>27</code>');"
+          "text":
+            "<code>checkInventory(\"strawberries\")</code> should return <code>27</code>",
+          "testString":
+            "assert.strictEqual(checkInventory('strawberries'), 27, '<code>checkInventory(\"strawberries\")</code> should return <code>27</code>');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -835,12 +942,16 @@
       ],
       "tests": [
         {
-          "text": "The <code>foods</code> object only has three keys: <code>apples</code>, <code>grapes</code>, and <code>bananas</code>",
-          "testString": "assert(!foods.hasOwnProperty('oranges') && !foods.hasOwnProperty('plums') && !foods.hasOwnProperty('strawberries') && Object.keys(foods).length === 3, 'The <code>foods</code> object only has three keys: <code>apples</code>, <code>grapes</code>, and <code>bananas</code>');"
+          "text":
+            "The <code>foods</code> object only has three keys: <code>apples</code>, <code>grapes</code>, and <code>bananas</code>",
+          "testString":
+            "assert(!foods.hasOwnProperty('oranges') && !foods.hasOwnProperty('plums') && !foods.hasOwnProperty('strawberries') && Object.keys(foods).length === 3, 'The <code>foods</code> object only has three keys: <code>apples</code>, <code>grapes</code>, and <code>bananas</code>');"
         },
         {
-          "text": "The <code>oranges</code>, <code>plums</code>, and <code>strawberries</code> keys are removed using <code>delete</code>",
-          "testString": "assert(code.search(/oranges:/) !== -1 && code.search(/plums:/) !== -1 && code.search(/strawberries:/) !== -1, 'The <code>oranges</code>, <code>plums</code>, and <code>strawberries</code> keys are removed using <code>delete</code>');"
+          "text":
+            "The <code>oranges</code>, <code>plums</code>, and <code>strawberries</code> keys are removed using <code>delete</code>",
+          "testString":
+            "assert(code.search(/oranges:/) !== -1 && code.search(/plums:/) !== -1 && code.search(/strawberries:/) !== -1, 'The <code>oranges</code>, <code>plums</code>, and <code>strawberries</code> keys are removed using <code>delete</code>');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -884,16 +995,22 @@
       ],
       "tests": [
         {
-          "text": "The <code>users</code> object only contains the keys <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code>",
-          "testString": "assert('Alan' in users && 'Jeff' in users && 'Sarah' in users && 'Ryan' in users && Object.keys(users).length === 4, 'The <code>users</code> object only contains the keys <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code>');"
+          "text":
+            "The <code>users</code> object only contains the keys <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code>",
+          "testString":
+            "assert('Alan' in users && 'Jeff' in users && 'Sarah' in users && 'Ryan' in users && Object.keys(users).length === 4, 'The <code>users</code> object only contains the keys <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code>');"
         },
         {
-          "text": "The function <code>isEveryoneHere</code> returns <code>true</code> if <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code> are properties on the <code>users</code> object",
-          "testString": "assert(isEveryoneHere(users) === true, 'The function <code>isEveryoneHere</code> returns <code>true</code> if <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code> are properties on the <code>users</code> object');"
+          "text":
+            "The function <code>isEveryoneHere</code> returns <code>true</code> if <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code> are properties on the <code>users</code> object",
+          "testString":
+            "assert(isEveryoneHere(users) === true, 'The function <code>isEveryoneHere</code> returns <code>true</code> if <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code> are properties on the <code>users</code> object');"
         },
         {
-          "text": "The function <code>isEveryoneHere</code> returns <code>false</code> if <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code> are not properties on the <code>users</code> object",
-          "testString": "assert((function() { delete users.Alan; delete users.Jeff; delete users.Sarah; delete users.Ryan; return isEveryoneHere(users) })() === false, 'The function <code>isEveryoneHere</code> returns <code>false</code> if <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code> are not properties on the <code>users</code> object');"
+          "text":
+            "The function <code>isEveryoneHere</code> returns <code>false</code> if <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code> are not properties on the <code>users</code> object",
+          "testString":
+            "assert((function() { delete users.Alan; delete users.Jeff; delete users.Sarah; delete users.Ryan; return isEveryoneHere(users) })() === false, 'The function <code>isEveryoneHere</code> returns <code>false</code> if <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code> are not properties on the <code>users</code> object');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -940,10 +1057,11 @@
     },
     {
       "id": "587d7b7d367417b2b2512b1d",
-      "title": " Iterate Through the Keys of an Object with a for...in Statement",
+      "title":
+        " Iterate Through the Keys of an Object with a for...in Statement",
       "description": [
         "Sometimes you may need to iterate through all the keys within an object. This requires a specific syntax in JavaScript called a <dfn>for...in</dfn> statement. For our <code>users</code> object, this could look like:",
-        "<blockquote>for (let user in users) {<br>  console.log(user);<br>};<br><br>// logs:<br>Alan<br>Jeff<br>Sarah<br>Ryan</blockquote>",
+        "<blockquote>for (let user in users) {<br>&nbsp;&nbsp;console.log(user);<br>};<br><br>// logs:<br>Alan<br>Jeff<br>Sarah<br>Ryan</blockquote>",
         "In this statement, we defined a variable <code>user</code>, and as you can see, this variable was reset during each iteration to each of the object's keys as the statement looped through the object, resulting in each user's name being printed to the console.",
         "<strong>NOTE:</strong><br>Objects do not maintain an ordering to stored keys like arrays do; thus a keys position on an object, or the relative order in which it appears, is irrelevant when referencing or accessing that key.",
         "<hr>",
@@ -951,12 +1069,16 @@
       ],
       "tests": [
         {
-          "text": "The <code>users</code> object contains users <code>Jeff</code> and <code>Ryan</code> with <code>online</code> set to <code>true</code> and users <code>Alan</code> and <code>Sarah</code> with <code>online</code> set to <code>false</code>",
-          "testString": "assert(users.Alan.online === false && users.Jeff.online === true &&  users.Sarah.online === false &&  users.Ryan.online === true, 'The <code>users</code> object contains users <code>Jeff</code> and <code>Ryan</code> with <code>online</code> set to <code>true</code> and users <code>Alan</code> and <code>Sarah</code> with <code>online</code> set to <code>false</code>');"
+          "text":
+            "The <code>users</code> object contains users <code>Jeff</code> and <code>Ryan</code> with <code>online</code> set to <code>true</code> and users <code>Alan</code> and <code>Sarah</code> with <code>online</code> set to <code>false</code>",
+          "testString":
+            "assert(users.Alan.online === false && users.Jeff.online === true &&  users.Sarah.online === false &&  users.Ryan.online === true, 'The <code>users</code> object contains users <code>Jeff</code> and <code>Ryan</code> with <code>online</code> set to <code>true</code> and users <code>Alan</code> and <code>Sarah</code> with <code>online</code> set to <code>false</code>');"
         },
         {
-          "text": "The function <code>countOnline</code> returns the number of users with the <code>online</code> property set to <code>true</code>",
-          "testString": "assert((function() { users.Harry = {online: true}; users.Sam = {online: true}; users.Carl = {online: true}; return countOnline(users) })() === 5, 'The function <code>countOnline</code> returns the number of users with the <code>online</code> property set to <code>true</code>');"
+          "text":
+            "The function <code>countOnline</code> returns the number of users with the <code>online</code> property set to <code>true</code>",
+          "testString":
+            "assert((function() { users.Harry = {online: true}; users.Sam = {online: true}; users.Carl = {online: true}; return countOnline(users) })() === 5, 'The function <code>countOnline</code> returns the number of users with the <code>online</code> property set to <code>true</code>');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -1011,12 +1133,16 @@
       ],
       "tests": [
         {
-          "text": "The <code>users</code> object only contains the keys <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code>",
-          "testString": "assert('Alan' in users && 'Jeff' in users && 'Sarah' in users && 'Ryan' in users && Object.keys(users).length === 4, 'The <code>users</code> object only contains the keys <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code>');"
+          "text":
+            "The <code>users</code> object only contains the keys <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code>",
+          "testString":
+            "assert('Alan' in users && 'Jeff' in users && 'Sarah' in users && 'Ryan' in users && Object.keys(users).length === 4, 'The <code>users</code> object only contains the keys <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code>');"
         },
         {
-          "text": "The <code>getArrayOfUsers</code> function returns an array which contains all the keys in the <code>users</code> object",
-          "testString": "assert((function() { users.Sam = {}; users.Lewis = {}; let R = getArrayOfUsers(users); return (R.indexOf('Alan') !== -1 && R.indexOf('Jeff') !== -1 && R.indexOf('Sarah') !== -1 && R.indexOf('Ryan') !== -1 && R.indexOf('Sam') !== -1 && R.indexOf('Lewis') !== -1); })() === true, 'The <code>getArrayOfUsers</code> function returns an array which contains all the keys in the <code>users</code> object');"
+          "text":
+            "The <code>getArrayOfUsers</code> function returns an array which contains all the keys in the <code>users</code> object",
+          "testString":
+            "assert((function() { users.Sam = {}; users.Lewis = {}; let R = getArrayOfUsers(users); return (R.indexOf('Alan') !== -1 && R.indexOf('Jeff') !== -1 && R.indexOf('Sarah') !== -1 && R.indexOf('Ryan') !== -1 && R.indexOf('Sam') !== -1 && R.indexOf('Lewis') !== -1); })() === true, 'The <code>getArrayOfUsers</code> function returns an array which contains all the keys in the <code>users</code> object');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -1071,16 +1197,22 @@
       ],
       "tests": [
         {
-          "text": "The <code>user</code> object has <code>name</code>, <code>age</code>, and <code>data</code> keys",
-          "testString": "assert('name' in user && 'age' in user && 'data' in user, 'The <code>user</code> object has <code>name</code>, <code>age</code>, and <code>data</code> keys');"
+          "text":
+            "The <code>user</code> object has <code>name</code>, <code>age</code>, and <code>data</code> keys",
+          "testString":
+            "assert('name' in user && 'age' in user && 'data' in user, 'The <code>user</code> object has <code>name</code>, <code>age</code>, and <code>data</code> keys');"
         },
         {
-          "text": "The <code>addFriend</code> function accepts a <code>user</code> object and a <code>friend</code> string as arguments and adds the friend to the array of <code>friends</code> in the <code>user</code> object",
-          "testString": "assert((function() { let L1 = user.data.friends.length; addFriend(user, 'Sean'); let L2 = user.data.friends.length; return (L2 === L1 + 1); })(), 'The <code>addFriend</code> function accepts a <code>user</code> object and a <code>friend</code> string as arguments and adds the friend to the array of <code>friends</code> in the <code>user</code> object');"
+          "text":
+            "The <code>addFriend</code> function accepts a <code>user</code> object and a <code>friend</code> string as arguments and adds the friend to the array of <code>friends</code> in the <code>user</code> object",
+          "testString":
+            "assert((function() { let L1 = user.data.friends.length; addFriend(user, 'Sean'); let L2 = user.data.friends.length; return (L2 === L1 + 1); })(), 'The <code>addFriend</code> function accepts a <code>user</code> object and a <code>friend</code> string as arguments and adds the friend to the array of <code>friends</code> in the <code>user</code> object');"
         },
         {
-          "text": "<code>addFriend(user, \"Pete\")</code> should return <code>[\"Sam\", \"Kira\", \"Tomo\", \"Pete\"]</code>",
-          "testString": "assert.deepEqual((function() { delete user.data.friends; user.data.friends = ['Sam', 'Kira', 'Tomo']; return addFriend(user, 'Pete') })(), ['Sam', 'Kira', 'Tomo', 'Pete'], '<code>addFriend(user, \"Pete\")</code> should return <code>[\"Sam\", \"Kira\", \"Tomo\", \"Pete\"]</code>');"
+          "text":
+            "<code>addFriend(user, \"Pete\")</code> should return <code>[\"Sam\", \"Kira\", \"Tomo\", \"Pete\"]</code>",
+          "testString":
+            "assert.deepEqual((function() { delete user.data.friends; user.data.friends = ['Sam', 'Kira', 'Tomo']; return addFriend(user, 'Pete') })(), ['Sam', 'Kira', 'Tomo', 'Pete'], '<code>addFriend(user, \"Pete\")</code> should return <code>[\"Sam\", \"Kira\", \"Tomo\", \"Pete\"]</code>');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -1127,4 +1259,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json b/challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json
index 0a2a90a22..1589069b1 100644
--- a/challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json
+++ b/challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json
@@ -13,22 +13,24 @@
         "Using <code>//</code> will tell JavaScript to ignore the remainder of the text on the current line:",
         "<blockquote>// This is an in-line comment.</blockquote>",
         "You can make a multi-line comment beginning with <code>/*</code> and ending with <code>*/</code>:",
-        "<blockquote>/* This is a <br>   multi-line comment */</blockquote>",
+        "<blockquote>/* This is a<br>multi-line comment */</blockquote>",
         "<strong>Best Practice</strong><br>As you write code, you should regularly add comments to clarify the function of parts of your code. Good commenting can help communicate the intent of your code&mdash;both for others <em>and</em> for your future self.",
         "<hr>",
         "Try creating one of each type of comment."
       ],
-      "solutions": [
-        "// Fake Comment\n/* Another Comment */"
-      ],
+      "solutions": ["// Fake Comment\n/* Another Comment */"],
       "tests": [
         {
-          "text": "Create a <code>//</code> style comment that contains at least five letters.",
-          "testString": "assert(code.match(/(\\/\\/)...../g), 'Create a <code>//</code> style comment that contains at least five letters.');"
+          "text":
+            "Create a <code>//</code> style comment that contains at least five letters.",
+          "testString":
+            "assert(code.match(/(\\/\\/)...../g), 'Create a <code>//</code> style comment that contains at least five letters.');"
         },
         {
-          "text": "Create a <code>/* */</code> style comment that contains at least five letters.",
-          "testString": "assert(code.match(/(\\/\\*)([^\\*\\/]{5,})(?=\\*\\/)/gm), 'Create a <code>/* */</code> style comment that contains at least five letters.');"
+          "text":
+            "Create a <code>/* */</code> style comment that contains at least five letters.",
+          "testString":
+            "assert(code.match(/(\\/\\*)([^\\*\\/]{5,})(?=\\*\\/)/gm), 'Create a <code>/* */</code> style comment that contains at least five letters.');"
         }
       ],
       "challengeType": 1,
@@ -88,13 +90,13 @@
         "Use the <code>var</code> keyword to create a variable called <code>myName</code>.",
         "<strong>Hint</strong><br>Look at the <code>ourName</code> example if you get stuck."
       ],
-      "solutions": [
-        "var myName;"
-      ],
+      "solutions": ["var myName;"],
       "tests": [
         {
-          "text": "You should declare <code>myName</code> with the <code>var</code> keyword, ending with a semicolon",
-          "testString": "assert(/var\\s+myName\\s*;/.test(code), 'You should declare <code>myName</code> with the <code>var</code> keyword, ending with a semicolon');"
+          "text":
+            "You should declare <code>myName</code> with the <code>var</code> keyword, ending with a semicolon",
+          "testString":
+            "assert(/var\\s+myName\\s*;/.test(code), 'You should declare <code>myName</code> with the <code>var</code> keyword, ending with a semicolon');"
         }
       ],
       "challengeType": 1,
@@ -160,25 +162,28 @@
         "Assign the contents of <code>a</code> to variable <code>b</code>."
       ],
       "releasedOn": "January 1, 2016",
-      "solutions": [
-        "var a;\nvar b = 2;\na = 7;\nb = a;"
-      ],
+      "solutions": ["var a;\nvar b = 2;\na = 7;\nb = a;"],
       "tests": [
         {
           "text": "Do not change code above the line",
-          "testString": "assert(/var a;/.test(code) && /var b = 2;/.test(code), 'Do not change code above the line');"
+          "testString":
+            "assert(/var a;/.test(code) && /var b = 2;/.test(code), 'Do not change code above the line');"
         },
         {
           "text": "<code>a</code> should have a value of 7",
-          "testString": "assert(typeof a === 'number' && a === 7, '<code>a</code> should have a value of 7');"
+          "testString":
+            "assert(typeof a === 'number' && a === 7, '<code>a</code> should have a value of 7');"
         },
         {
           "text": "<code>b</code> should have a value of 7",
-          "testString": "assert(typeof b === 'number' && b === 7, '<code>b</code> should have a value of 7');"
+          "testString":
+            "assert(typeof b === 'number' && b === 7, '<code>b</code> should have a value of 7');"
         },
         {
-          "text": "<code>a</code> should be assigned to <code>b</code> with <code>=</code>",
-          "testString": "assert(/b\\s*=\\s*a\\s*;/g.test(code), '<code>a</code> should be assigned to <code>b</code> with <code>=</code>');"
+          "text":
+            "<code>a</code> should be assigned to <code>b</code> with <code>=</code>",
+          "testString":
+            "assert(/b\\s*=\\s*a\\s*;/g.test(code), '<code>a</code> should be assigned to <code>b</code> with <code>=</code>');"
         }
       ],
       "challengeType": 1,
@@ -236,13 +241,12 @@
         "Define a variable <code>a</code> with <code>var</code> and initialize it to a value of <code>9</code>."
       ],
       "releasedOn": "January 1, 2016",
-      "solutions": [
-        "var a = 9;"
-      ],
+      "solutions": ["var a = 9;"],
       "tests": [
         {
           "text": "Initialize <code>a</code> to a value of <code>9</code>",
-          "testString": "assert(/var\\s+a\\s*=\\s*9\\s*/.test(code), 'Initialize <code>a</code> to a value of <code>9</code>');"
+          "testString":
+            "assert(/var\\s+a\\s*=\\s*9\\s*/.test(code), 'Initialize <code>a</code> to a value of <code>9</code>');"
         }
       ],
       "challengeType": 1,
@@ -291,20 +295,27 @@
       ],
       "tests": [
         {
-          "text": "<code>a</code> should be defined and evaluated to have the value of <code>6</code>",
-          "testString": "assert(typeof a === 'number' && a === 6, '<code>a</code> should be defined and evaluated to have the value of <code>6</code>');"
+          "text":
+            "<code>a</code> should be defined and evaluated to have the value of <code>6</code>",
+          "testString":
+            "assert(typeof a === 'number' && a === 6, '<code>a</code> should be defined and evaluated to have the value of <code>6</code>');"
         },
         {
-          "text": "<code>b</code> should be defined and evaluated to have the value of <code>15</code>",
-          "testString": "assert(typeof b === 'number' && b === 15, '<code>b</code> should be defined and evaluated to have the value of <code>15</code>');"
+          "text":
+            "<code>b</code> should be defined and evaluated to have the value of <code>15</code>",
+          "testString":
+            "assert(typeof b === 'number' && b === 15, '<code>b</code> should be defined and evaluated to have the value of <code>15</code>');"
         },
         {
-          "text": "<code>c</code> should not contain <code>undefined</code> and should have a value of \"I am a String!\"",
-          "testString": "assert(!/undefined/.test(c) && c === \"I am a String!\", '<code>c</code> should not contain <code>undefined</code> and should have a value of \"I am a String!\"');"
+          "text":
+            "<code>c</code> should not contain <code>undefined</code> and should have a value of \"I am a String!\"",
+          "testString":
+            "assert(!/undefined/.test(c) && c === \"I am a String!\", '<code>c</code> should not contain <code>undefined</code> and should have a value of \"I am a String!\"');"
         },
         {
           "text": "Do not change code below the line",
-          "testString": "assert(/a = a \\+ 1;/.test(code) && /b = b \\+ 5;/.test(code) && /c = c \\+ \" String!\";/.test(code), 'Do not change code below the line');"
+          "testString":
+            "assert(/a = a \\+ 1;/.test(code) && /b = b \\+ 5;/.test(code) && /c = c \\+ \" String!\";/.test(code), 'Do not change code below the line');"
         }
       ],
       "challengeType": 1,
@@ -362,28 +373,40 @@
       ],
       "tests": [
         {
-          "text": "<code>studlyCapVar</code> is defined and has a value of <code>10</code>",
-          "testString": "assert(typeof studlyCapVar !== 'undefined' && studlyCapVar === 10, '<code>studlyCapVar</code> is defined and has a value of <code>10</code>');"
+          "text":
+            "<code>studlyCapVar</code> is defined and has a value of <code>10</code>",
+          "testString":
+            "assert(typeof studlyCapVar !== 'undefined' && studlyCapVar === 10, '<code>studlyCapVar</code> is defined and has a value of <code>10</code>');"
         },
         {
-          "text": "<code>properCamelCase</code> is defined and has a value of <code>\"A String\"</code>",
-          "testString": "assert(typeof properCamelCase !== 'undefined' && properCamelCase === \"A String\", '<code>properCamelCase</code> is defined and has a value of <code>\"A String\"</code>');"
+          "text":
+            "<code>properCamelCase</code> is defined and has a value of <code>\"A String\"</code>",
+          "testString":
+            "assert(typeof properCamelCase !== 'undefined' && properCamelCase === \"A String\", '<code>properCamelCase</code> is defined and has a value of <code>\"A String\"</code>');"
         },
         {
-          "text": "<code>titleCaseOver</code> is defined and has a value of <code>9000</code>",
-          "testString": "assert(typeof titleCaseOver !== 'undefined' && titleCaseOver === 9000, '<code>titleCaseOver</code> is defined and has a value of <code>9000</code>');"
+          "text":
+            "<code>titleCaseOver</code> is defined and has a value of <code>9000</code>",
+          "testString":
+            "assert(typeof titleCaseOver !== 'undefined' && titleCaseOver === 9000, '<code>titleCaseOver</code> is defined and has a value of <code>9000</code>');"
         },
         {
-          "text": "<code>studlyCapVar</code> should use camelCase in both declaration and assignment sections.",
-          "testString": "assert(code.match(/studlyCapVar/g).length === 2, '<code>studlyCapVar</code> should use camelCase in both declaration and assignment sections.');"
+          "text":
+            "<code>studlyCapVar</code> should use camelCase in both declaration and assignment sections.",
+          "testString":
+            "assert(code.match(/studlyCapVar/g).length === 2, '<code>studlyCapVar</code> should use camelCase in both declaration and assignment sections.');"
         },
         {
-          "text": "<code>properCamelCase</code> should use camelCase in both declaration and assignment sections.",
-          "testString": "assert(code.match(/properCamelCase/g).length === 2, '<code>properCamelCase</code> should use camelCase in both declaration and assignment sections.');"
+          "text":
+            "<code>properCamelCase</code> should use camelCase in both declaration and assignment sections.",
+          "testString":
+            "assert(code.match(/properCamelCase/g).length === 2, '<code>properCamelCase</code> should use camelCase in both declaration and assignment sections.');"
         },
         {
-          "text": "<code>titleCaseOver</code> should use camelCase in both declaration and assignment sections.",
-          "testString": "assert(code.match(/titleCaseOver/g).length === 2, '<code>titleCaseOver</code> should use camelCase in both declaration and assignment sections.');"
+          "text":
+            "<code>titleCaseOver</code> should use camelCase in both declaration and assignment sections.",
+          "testString":
+            "assert(code.match(/titleCaseOver/g).length === 2, '<code>titleCaseOver</code> should use camelCase in both declaration and assignment sections.');"
         }
       ],
       "challengeType": 1,
@@ -435,17 +458,17 @@
         "<hr>",
         "Change the <code>0</code> so that sum will equal <code>20</code>."
       ],
-      "solutions": [
-        "var sum = 10 + 10;"
-      ],
+      "solutions": ["var sum = 10 + 10;"],
       "tests": [
         {
           "text": "<code>sum</code> should equal <code>20</code>",
-          "testString": "assert(sum === 20, '<code>sum</code> should equal <code>20</code>');"
+          "testString":
+            "assert(sum === 20, '<code>sum</code> should equal <code>20</code>');"
         },
         {
           "text": "Use the <code>+</code> operator",
-          "testString": "assert(/\\+/.test(code), 'Use the <code>+</code> operator');"
+          "testString":
+            "assert(/\\+/.test(code), 'Use the <code>+</code> operator');"
         }
       ],
       "challengeType": 1,
@@ -464,14 +487,9 @@
           "key": "indexjs",
           "ext": "js",
           "name": "index",
-          "contents": [
-            "var sum = 10 + 0;",
-            ""
-          ],
+          "contents": ["var sum = 10 + 0;", ""],
           "head": [],
-          "tail": [
-            "(function(z){return 'sum = '+z;})(sum);"
-          ]
+          "tail": ["(function(z){return 'sum = '+z;})(sum);"]
         }
       }
     },
@@ -488,17 +506,17 @@
         "<hr>",
         "Change the <code>0</code> so the difference is <code>12</code>."
       ],
-      "solutions": [
-        "var difference = 45 - 33;"
-      ],
+      "solutions": ["var difference = 45 - 33;"],
       "tests": [
         {
           "text": "Make the variable <code>difference</code> equal 12.",
-          "testString": "assert(difference === 12, 'Make the variable <code>difference</code> equal 12.');"
+          "testString":
+            "assert(difference === 12, 'Make the variable <code>difference</code> equal 12.');"
         },
         {
           "text": "Only subtract one number from 45.",
-          "testString": "assert(/var\\s*difference\\s*=\\s*45\\s*-\\s*[0-9]*;(?!\\s*[a-zA-Z0-9]+)/.test(code),'Only subtract one number from 45.');"
+          "testString":
+            "assert(/var\\s*difference\\s*=\\s*45\\s*-\\s*[0-9]*;(?!\\s*[a-zA-Z0-9]+)/.test(code),'Only subtract one number from 45.');"
         }
       ],
       "challengeType": 1,
@@ -517,15 +535,9 @@
           "key": "indexjs",
           "ext": "js",
           "name": "index",
-          "contents": [
-            "var difference = 45 - 0;",
-            "",
-            ""
-          ],
+          "contents": ["var difference = 45 - 0;", "", ""],
           "head": [],
-          "tail": [
-            "(function(z){return 'difference = '+z;})(difference);"
-          ]
+          "tail": ["(function(z){return 'difference = '+z;})(difference);"]
         }
       }
     },
@@ -542,17 +554,17 @@
         "<hr>",
         "Change the <code>0</code> so that product will equal <code>80</code>."
       ],
-      "solutions": [
-        "var product = 8 * 10;"
-      ],
+      "solutions": ["var product = 8 * 10;"],
       "tests": [
         {
           "text": "Make the variable <code>product</code> equal 80",
-          "testString": "assert(product === 80,'Make the variable <code>product</code> equal 80');"
+          "testString":
+            "assert(product === 80,'Make the variable <code>product</code> equal 80');"
         },
         {
           "text": "Use the <code>*</code> operator",
-          "testString": "assert(/\\*/.test(code), 'Use the <code>*</code> operator');"
+          "testString":
+            "assert(/\\*/.test(code), 'Use the <code>*</code> operator');"
         }
       ],
       "challengeType": 1,
@@ -571,15 +583,9 @@
           "key": "indexjs",
           "ext": "js",
           "name": "index",
-          "contents": [
-            "var product = 8 * 0;",
-            "",
-            ""
-          ],
+          "contents": ["var product = 8 * 0;", "", ""],
           "head": [],
-          "tail": [
-            "(function(z){return 'product = '+z;})(product);"
-          ]
+          "tail": ["(function(z){return 'product = '+z;})(product);"]
         }
       }
     },
@@ -596,17 +602,17 @@
         "<hr>",
         "Change the <code>0</code> so that the <code>quotient</code> is equal to <code>2</code>."
       ],
-      "solutions": [
-        "var quotient = 66 / 33;"
-      ],
+      "solutions": ["var quotient = 66 / 33;"],
       "tests": [
         {
           "text": "Make the variable <code>quotient</code> equal to 2.",
-          "testString": "assert(quotient === 2, 'Make the variable <code>quotient</code> equal to 2.');"
+          "testString":
+            "assert(quotient === 2, 'Make the variable <code>quotient</code> equal to 2.');"
         },
         {
           "text": "Use the <code>/</code> operator",
-          "testString": "assert(/\\d+\\s*\\/\\s*\\d+/.test(code), 'Use the <code>/</code> operator');"
+          "testString":
+            "assert(/\\d+\\s*\\/\\s*\\d+/.test(code), 'Use the <code>/</code> operator');"
         }
       ],
       "challengeType": 1,
@@ -625,15 +631,9 @@
           "key": "indexjs",
           "ext": "js",
           "name": "index",
-          "contents": [
-            "var quotient = 66 / 0;",
-            "",
-            ""
-          ],
+          "contents": ["var quotient = 66 / 0;", "", ""],
           "head": [],
-          "tail": [
-            "(function(z){return 'quotient = '+z;})(quotient);"
-          ]
+          "tail": ["(function(z){return 'quotient = '+z;})(quotient);"]
         }
       }
     },
@@ -651,25 +651,27 @@
         "<strong>Hint</strong><br>Learn more about <a href=\"https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment_()\" target=\"_blank\">Arithmetic operators - Increment (++)</a>."
       ],
       "releasedOn": "January 1, 2016",
-      "solutions": [
-        "var myVar = 87;\nmyVar++;"
-      ],
+      "solutions": ["var myVar = 87;\nmyVar++;"],
       "tests": [
         {
           "text": "<code>myVar</code> should equal <code>88</code>",
-          "testString": "assert(myVar === 88, '<code>myVar</code> should equal <code>88</code>');"
+          "testString":
+            "assert(myVar === 88, '<code>myVar</code> should equal <code>88</code>');"
         },
         {
           "text": "<code>myVar = myVar + 1;</code> should be changed",
-          "testString": "assert(/var\\s*myVar\\s*=\\s*87;\\s*\\/*.*\\s*myVar\\+\\+;/.test(code), '<code>myVar = myVar + 1;</code> should be changed');"
+          "testString":
+            "assert(/var\\s*myVar\\s*=\\s*87;\\s*\\/*.*\\s*myVar\\+\\+;/.test(code), '<code>myVar = myVar + 1;</code> should be changed');"
         },
         {
           "text": "Use the <code>++</code> operator",
-          "testString": "assert(/[+]{2}\\s*myVar|myVar\\s*[+]{2}/.test(code), 'Use the <code>++</code> operator');"
+          "testString":
+            "assert(/[+]{2}\\s*myVar|myVar\\s*[+]{2}/.test(code), 'Use the <code>++</code> operator');"
         },
         {
           "text": "Do not change code above the line",
-          "testString": "assert(/var myVar = 87;/.test(code), 'Do not change code above the line');"
+          "testString":
+            "assert(/var myVar = 87;/.test(code), 'Do not change code above the line');"
         }
       ],
       "challengeType": 1,
@@ -700,9 +702,7 @@
             ""
           ],
           "head": [],
-          "tail": [
-            "(function(z){return 'myVar = ' + z;})(myVar);"
-          ]
+          "tail": ["(function(z){return 'myVar = ' + z;})(myVar);"]
         }
       }
     },
@@ -719,25 +719,27 @@
         "Change the code to use the <code>--</code> operator on <code>myVar</code>."
       ],
       "releasedOn": "January 1, 2016",
-      "solutions": [
-        "var myVar = 11;\nmyVar--;"
-      ],
+      "solutions": ["var myVar = 11;\nmyVar--;"],
       "tests": [
         {
           "text": "<code>myVar</code> should equal <code>10</code>",
-          "testString": "assert(myVar === 10, '<code>myVar</code> should equal <code>10</code>');"
+          "testString":
+            "assert(myVar === 10, '<code>myVar</code> should equal <code>10</code>');"
         },
         {
           "text": "<code>myVar = myVar - 1;</code> should be changed",
-          "testString": "assert(/var\\s*myVar\\s*=\\s*11;\\s*\\/*.*\\s*myVar--;/.test(code), '<code>myVar = myVar - 1;</code> should be changed');"
+          "testString":
+            "assert(/var\\s*myVar\\s*=\\s*11;\\s*\\/*.*\\s*myVar--;/.test(code), '<code>myVar = myVar - 1;</code> should be changed');"
         },
         {
           "text": "Use the <code>--</code> operator on <code>myVar</code>",
-          "testString": "assert(/[-]{2}\\s*myVar|myVar\\s*[-]{2}/.test(code), 'Use the <code>--</code> operator on <code>myVar</code>');"
+          "testString":
+            "assert(/[-]{2}\\s*myVar|myVar\\s*[-]{2}/.test(code), 'Use the <code>--</code> operator on <code>myVar</code>');"
         },
         {
           "text": "Do not change code above the line",
-          "testString": "assert(/var myVar = 11;/.test(code), 'Do not change code above the line');"
+          "testString":
+            "assert(/var myVar = 11;/.test(code), 'Do not change code above the line');"
         }
       ],
       "challengeType": 1,
@@ -768,9 +770,7 @@
             ""
           ],
           "head": [],
-          "tail": [
-            "(function(z){return 'myVar = ' + z;})(myVar);"
-          ]
+          "tail": ["(function(z){return 'myVar = ' + z;})(myVar);"]
         }
       }
     },
@@ -783,17 +783,17 @@
         "<hr>",
         "Create a variable <code>myDecimal</code> and give it a decimal value with a fractional part (e.g. <code>5.7</code>)."
       ],
-      "solutions": [
-        "var myDecimal = 9.9;"
-      ],
+      "solutions": ["var myDecimal = 9.9;"],
       "tests": [
         {
           "text": "<code>myDecimal</code> should be a number.",
-          "testString": "assert(typeof myDecimal === \"number\", '<code>myDecimal</code> should be a number.');"
+          "testString":
+            "assert(typeof myDecimal === \"number\", '<code>myDecimal</code> should be a number.');"
         },
         {
           "text": "<code>myDecimal</code> should have a decimal point",
-          "testString": "assert(myDecimal % 1 != 0, '<code>myDecimal</code> should have a decimal point'); "
+          "testString":
+            "assert(myDecimal % 1 != 0, '<code>myDecimal</code> should have a decimal point'); "
         }
       ],
       "challengeType": 1,
@@ -836,17 +836,18 @@
         "<hr>",
         "Change the <code>0.0</code> so that product will equal <code>5.0</code>."
       ],
-      "solutions": [
-        "var product = 2.0 * 2.5;"
-      ],
+      "solutions": ["var product = 2.0 * 2.5;"],
       "tests": [
         {
-          "text": "The variable <code>product</code> should equal <code>5.0</code>.",
-          "testString": "assert(product === 5.0, 'The variable <code>product</code> should equal <code>5.0</code>.');"
+          "text":
+            "The variable <code>product</code> should equal <code>5.0</code>.",
+          "testString":
+            "assert(product === 5.0, 'The variable <code>product</code> should equal <code>5.0</code>.');"
         },
         {
           "text": "You should use the <code>*</code> operator",
-          "testString": "assert(/\\*/.test(code), 'You should use the <code>*</code> operator');"
+          "testString":
+            "assert(/\\*/.test(code), 'You should use the <code>*</code> operator');"
         }
       ],
       "challengeType": 1,
@@ -866,15 +867,9 @@
           "key": "indexjs",
           "ext": "js",
           "name": "index",
-          "contents": [
-            "var product = 2.0 * 0.0;",
-            "",
-            ""
-          ],
+          "contents": ["var product = 2.0 * 0.0;", "", ""],
           "head": [],
-          "tail": [
-            "(function(y){return 'product = '+y;})(product);"
-          ]
+          "tail": ["(function(y){return 'product = '+y;})(product);"]
         }
       }
     },
@@ -889,16 +884,21 @@
       "solutions": [],
       "tests": [
         {
-          "text": "The variable <code>quotient</code> should equal <code>2.2</code>",
-          "testString": "assert(quotient === 2.2, 'The variable <code>quotient</code> should equal <code>2.2</code>');"
+          "text":
+            "The variable <code>quotient</code> should equal <code>2.2</code>",
+          "testString":
+            "assert(quotient === 2.2, 'The variable <code>quotient</code> should equal <code>2.2</code>');"
         },
         {
-          "text": "You should use the <code>/</code> operator to divide 4.4 by 2",
-          "testString": "assert(/4\\.40*\\s*\\/\\s*2\\.*0*/.test(code), 'You should use the <code>/</code> operator to divide 4.4 by 2');"
+          "text":
+            "You should use the <code>/</code> operator to divide 4.4 by 2",
+          "testString":
+            "assert(/4\\.40*\\s*\\/\\s*2\\.*0*/.test(code), 'You should use the <code>/</code> operator to divide 4.4 by 2');"
         },
         {
           "text": "The quotient variable should only be assigned once",
-          "testString": "assert(code.match(/quotient/g).length === 1, 'The quotient variable should only be assigned once');"
+          "testString":
+            "assert(code.match(/quotient/g).length === 1, 'The quotient variable should only be assigned once');"
         }
       ],
       "challengeType": 1,
@@ -917,15 +917,9 @@
           "key": "indexjs",
           "ext": "js",
           "name": "index",
-          "contents": [
-            "var quotient = 0.0 / 2.0; // Fix this line",
-            "",
-            ""
-          ],
+          "contents": ["var quotient = 0.0 / 2.0; // Fix this line", "", ""],
           "head": [],
-          "tail": [
-            "(function(y){return 'quotient = '+y;})(quotient);"
-          ]
+          "tail": ["(function(y){return 'quotient = '+y;})(quotient);"]
         }
       }
     },
@@ -943,21 +937,23 @@
         "Set <code>remainder</code> equal to the remainder of <code>11</code> divided by <code>3</code> using the <dfn>remainder</dfn> (<code>%</code>) operator."
       ],
       "releasedOn": "January 1, 2016",
-      "solutions": [
-        "var remainder =  11 % 3;"
-      ],
+      "solutions": ["var remainder =  11 % 3;"],
       "tests": [
         {
           "text": "The variable <code>remainder</code> should be initialized",
-          "testString": "assert(/var\\s+?remainder/.test(code), 'The variable <code>remainder</code> should be initialized');"
+          "testString":
+            "assert(/var\\s+?remainder/.test(code), 'The variable <code>remainder</code> should be initialized');"
         },
         {
-          "text": "The value of <code>remainder</code> should be <code>2</code>",
-          "testString": "assert(remainder === 2, 'The value of <code>remainder</code> should be <code>2</code>');"
+          "text":
+            "The value of <code>remainder</code> should be <code>2</code>",
+          "testString":
+            "assert(remainder === 2, 'The value of <code>remainder</code> should be <code>2</code>');"
         },
         {
           "text": "You should use the <code>%</code> operator",
-          "testString": "assert(/\\s+?remainder\\s*?=\\s*?.*%.*;/.test(code), 'You should use the <code>%</code> operator');"
+          "testString":
+            "assert(/\\s+?remainder\\s*?=\\s*?.*%.*;/.test(code), 'You should use the <code>%</code> operator');"
         }
       ],
       "challengeType": 1,
@@ -988,9 +984,7 @@
             ""
           ],
           "head": [],
-          "tail": [
-            "(function(y){return 'remainder = '+y;})(remainder);"
-          ]
+          "tail": ["(function(y){return 'remainder = '+y;})(remainder);"]
         }
       }
     },
@@ -1013,23 +1007,29 @@
       "tests": [
         {
           "text": "<code>a</code> should equal <code>15</code>",
-          "testString": "assert(a === 15, '<code>a</code> should equal <code>15</code>');"
+          "testString":
+            "assert(a === 15, '<code>a</code> should equal <code>15</code>');"
         },
         {
           "text": "<code>b</code> should equal <code>26</code>",
-          "testString": "assert(b === 26, '<code>b</code> should equal <code>26</code>');"
+          "testString":
+            "assert(b === 26, '<code>b</code> should equal <code>26</code>');"
         },
         {
           "text": "<code>c</code> should equal <code>19</code>",
-          "testString": "assert(c === 19, '<code>c</code> should equal <code>19</code>');"
+          "testString":
+            "assert(c === 19, '<code>c</code> should equal <code>19</code>');"
         },
         {
-          "text": "You should use the <code>+=</code> operator for each variable",
-          "testString": "assert(code.match(/\\+=/g).length === 3, 'You should use the <code>+=</code> operator for each variable');"
+          "text":
+            "You should use the <code>+=</code> operator for each variable",
+          "testString":
+            "assert(code.match(/\\+=/g).length === 3, 'You should use the <code>+=</code> operator for each variable');"
         },
         {
           "text": "Do not modify the code above the line",
-          "testString": "assert(/var a = 3;/.test(code) && /var b = 17;/.test(code) && /var c = 12;/.test(code), 'Do not modify the code above the line');"
+          "testString":
+            "assert(/var a = 3;/.test(code) && /var b = 17;/.test(code) && /var c = 12;/.test(code), 'Do not modify the code above the line');"
         }
       ],
       "challengeType": 1,
@@ -1089,23 +1089,29 @@
       "tests": [
         {
           "text": "<code>a</code> should equal <code>5</code>",
-          "testString": "assert(a === 5, '<code>a</code> should equal <code>5</code>');"
+          "testString":
+            "assert(a === 5, '<code>a</code> should equal <code>5</code>');"
         },
         {
           "text": "<code>b</code> should equal <code>-6</code>",
-          "testString": "assert(b === -6, '<code>b</code> should equal <code>-6</code>');"
+          "testString":
+            "assert(b === -6, '<code>b</code> should equal <code>-6</code>');"
         },
         {
           "text": "<code>c</code> should equal <code>2</code>",
-          "testString": "assert(c === 2, '<code>c</code> should equal <code>2</code>');"
+          "testString":
+            "assert(c === 2, '<code>c</code> should equal <code>2</code>');"
         },
         {
-          "text": "You should use the <code>-=</code> operator for each variable",
-          "testString": "assert(code.match(/-=/g).length === 3, 'You should use the <code>-=</code> operator for each variable');"
+          "text":
+            "You should use the <code>-=</code> operator for each variable",
+          "testString":
+            "assert(code.match(/-=/g).length === 3, 'You should use the <code>-=</code> operator for each variable');"
         },
         {
           "text": "Do not modify the code above the line",
-          "testString": "assert(/var a = 11;/.test(code) && /var b = 9;/.test(code) && /var c = 3;/.test(code), 'Do not modify the code above the line');"
+          "testString":
+            "assert(/var a = 11;/.test(code) && /var b = 9;/.test(code) && /var c = 3;/.test(code), 'Do not modify the code above the line');"
         }
       ],
       "challengeType": 1,
@@ -1165,23 +1171,29 @@
       "tests": [
         {
           "text": "<code>a</code> should equal <code>25</code>",
-          "testString": "assert(a === 25, '<code>a</code> should equal <code>25</code>');"
+          "testString":
+            "assert(a === 25, '<code>a</code> should equal <code>25</code>');"
         },
         {
           "text": "<code>b</code> should equal <code>36</code>",
-          "testString": "assert(b === 36, '<code>b</code> should equal <code>36</code>');"
+          "testString":
+            "assert(b === 36, '<code>b</code> should equal <code>36</code>');"
         },
         {
           "text": "<code>c</code> should equal <code>46</code>",
-          "testString": "assert(c === 46, '<code>c</code> should equal <code>46</code>');"
+          "testString":
+            "assert(c === 46, '<code>c</code> should equal <code>46</code>');"
         },
         {
-          "text": "You should use the <code>*=</code> operator for each variable",
-          "testString": "assert(code.match(/\\*=/g).length === 3, 'You should use the <code>*=</code> operator for each variable');"
+          "text":
+            "You should use the <code>*=</code> operator for each variable",
+          "testString":
+            "assert(code.match(/\\*=/g).length === 3, 'You should use the <code>*=</code> operator for each variable');"
         },
         {
           "text": "Do not modify the code above the line",
-          "testString": "assert(/var a = 5;/.test(code) && /var b = 12;/.test(code) && /var c = 4\\.6;/.test(code), 'Do not modify the code above the line');"
+          "testString":
+            "assert(/var a = 5;/.test(code) && /var b = 12;/.test(code) && /var c = 4\\.6;/.test(code), 'Do not modify the code above the line');"
         }
       ],
       "challengeType": 1,
@@ -1241,23 +1253,29 @@
       "tests": [
         {
           "text": "<code>a</code> should equal <code>4</code>",
-          "testString": "assert(a === 4, '<code>a</code> should equal <code>4</code>');"
+          "testString":
+            "assert(a === 4, '<code>a</code> should equal <code>4</code>');"
         },
         {
           "text": "<code>b</code> should equal <code>27</code>",
-          "testString": "assert(b === 27, '<code>b</code> should equal <code>27</code>');"
+          "testString":
+            "assert(b === 27, '<code>b</code> should equal <code>27</code>');"
         },
         {
           "text": "<code>c</code> should equal <code>3</code>",
-          "testString": "assert(c === 3, '<code>c</code> should equal <code>3</code>');"
+          "testString":
+            "assert(c === 3, '<code>c</code> should equal <code>3</code>');"
         },
         {
-          "text": "You should use the <code>/=</code> operator for each variable",
-          "testString": "assert(code.match(/\\/=/g).length === 3, 'You should use the <code>/=</code> operator for each variable');"
+          "text":
+            "You should use the <code>/=</code> operator for each variable",
+          "testString":
+            "assert(code.match(/\\/=/g).length === 3, 'You should use the <code>/=</code> operator for each variable');"
         },
         {
           "text": "Do not modify the code above the line",
-          "testString": "assert(/var a = 48;/.test(code) && /var b = 108;/.test(code) && /var c = 33;/.test(code), 'Do not modify the code above the line');"
+          "testString":
+            "assert(/var a = 48;/.test(code) && /var b = 108;/.test(code) && /var c = 33;/.test(code), 'Do not modify the code above the line');"
         }
       ],
       "challengeType": 1,
@@ -1313,12 +1331,16 @@
       ],
       "tests": [
         {
-          "text": "<code>myFirstName</code> should be a string with at least one character in it.",
-          "testString": "assert((function(){if(typeof myFirstName !== \"undefined\" && typeof myFirstName === \"string\" && myFirstName.length > 0){return true;}else{return false;}})(), '<code>myFirstName</code> should be a string with at least one character in it.');"
+          "text":
+            "<code>myFirstName</code> should be a string with at least one character in it.",
+          "testString":
+            "assert((function(){if(typeof myFirstName !== \"undefined\" && typeof myFirstName === \"string\" && myFirstName.length > 0){return true;}else{return false;}})(), '<code>myFirstName</code> should be a string with at least one character in it.');"
         },
         {
-          "text": "<code>myLastName</code> should be a string with at least one character in it.",
-          "testString": "assert((function(){if(typeof myLastName !== \"undefined\" && typeof myLastName === \"string\" && myLastName.length > 0){return true;}else{return false;}})(), '<code>myLastName</code> should be a string with at least one character in it.');"
+          "text":
+            "<code>myLastName</code> should be a string with at least one character in it.",
+          "testString":
+            "assert((function(){if(typeof myLastName !== \"undefined\" && typeof myLastName === \"string\" && myLastName.length > 0){return true;}else{return false;}})(), '<code>myLastName</code> should be a string with at least one character in it.');"
         }
       ],
       "challengeType": 1,
@@ -1371,12 +1393,16 @@
       ],
       "tests": [
         {
-          "text": "You should use two double quotes (<code>&quot;</code>) and four escaped double quotes (<code>&#92;&quot;</code>).",
-          "testString": "assert(code.match(/\\\\\"/g).length === 4 && code.match(/[^\\\\]\"/g).length === 2, 'You should use two double quotes (<code>&quot;</code>) and four escaped double quotes (<code>&#92;&quot;</code>).');"
+          "text":
+            "You should use two double quotes (<code>&quot;</code>) and four escaped double quotes (<code>&#92;&quot;</code>).",
+          "testString":
+            "assert(code.match(/\\\\\"/g).length === 4 && code.match(/[^\\\\]\"/g).length === 2, 'You should use two double quotes (<code>&quot;</code>) and four escaped double quotes (<code>&#92;&quot;</code>).');"
         },
         {
-          "text": "Variable myStr should contain the string: <code>I am a \"double quoted\" string inside \"double quotes\".</code>",
-          "testString": "assert(myStr === \"I am a \\\"double quoted\\\" string inside \\\"double quotes\\\".\", 'Variable myStr should contain the string: <code>I am a \"double quoted\" string inside \"double quotes\".</code>');"
+          "text":
+            "Variable myStr should contain the string: <code>I am a \"double quoted\" string inside \"double quotes\".</code>",
+          "testString":
+            "assert(myStr === \"I am a \\\"double quoted\\\" string inside \\\"double quotes\\\".\", 'Variable myStr should contain the string: <code>I am a \"double quoted\" string inside \"double quotes\".</code>');"
         }
       ],
       "challengeType": 1,
@@ -1400,11 +1426,7 @@
           "key": "indexjs",
           "ext": "js",
           "name": "index",
-          "contents": [
-            "var myStr = \"\"; // Change this line",
-            "",
-            ""
-          ],
+          "contents": ["var myStr = \"\"; // Change this line", "", ""],
           "head": [],
           "tail": [
             "(function(){",
@@ -1441,11 +1463,14 @@
       "tests": [
         {
           "text": "Remove all the <code>backslashes</code> (<code>\\</code>)",
-          "testString": "assert(!/\\\\/g.test(code) && myStr.match('\\\\s*<a href\\\\s*=\\\\s*\"http://www.example.com\"\\\\s*target\\\\s*=\\\\s*\"_blank\">\\\\s*Link\\\\s*</a>\\\\s*'), 'Remove all the <code>backslashes</code> (<code>\\</code>)');"
+          "testString":
+            "assert(!/\\\\/g.test(code) && myStr.match('\\\\s*<a href\\\\s*=\\\\s*\"http://www.example.com\"\\\\s*target\\\\s*=\\\\s*\"_blank\">\\\\s*Link\\\\s*</a>\\\\s*'), 'Remove all the <code>backslashes</code> (<code>\\</code>)');"
         },
         {
-          "text": "You should have two single quotes <code>&#39;</code> and four double quotes <code>&quot;</code>",
-          "testString": "assert(code.match(/\"/g).length === 4 && code.match(/'/g).length === 2, 'You should have two single quotes <code>&#39;</code> and four double quotes <code>&quot;</code>');"
+          "text":
+            "You should have two single quotes <code>&#39;</code> and four double quotes <code>&quot;</code>",
+          "testString":
+            "assert(code.match(/\"/g).length === 4 && code.match(/'/g).length === 2, 'You should have two single quotes <code>&#39;</code> and four double quotes <code>&quot;</code>');"
         }
       ],
       "challengeType": 1,
@@ -1473,9 +1498,7 @@
             ""
           ],
           "head": [],
-          "tail": [
-            "(function() { return \"myStr = \" + myStr; })();"
-          ]
+          "tail": ["(function() { return \"myStr = \" + myStr; })();"]
         }
       }
     },
@@ -1500,27 +1523,38 @@
       "tests": [
         {
           "text": "<code>myStr</code> should not contain any spaces",
-          "testString": "assert(!/ /.test(myStr), '<code>myStr</code> should not contain any spaces');"
+          "testString":
+            "assert(!/ /.test(myStr), '<code>myStr</code> should not contain any spaces');"
         },
         {
-          "text": "<code>myStr</code> should contain the strings <code>FirstLine</code>, <code>SecondLine</code> and <code>ThirdLine</code> (remember case sensitivity)",
-          "testString": "assert(/FirstLine/.test(myStr) && /SecondLine/.test(myStr) && /ThirdLine/.test(myStr), '<code>myStr</code> should contain the strings <code>FirstLine</code>, <code>SecondLine</code> and <code>ThirdLine</code> (remember case sensitivity)');"
+          "text":
+            "<code>myStr</code> should contain the strings <code>FirstLine</code>, <code>SecondLine</code> and <code>ThirdLine</code> (remember case sensitivity)",
+          "testString":
+            "assert(/FirstLine/.test(myStr) && /SecondLine/.test(myStr) && /ThirdLine/.test(myStr), '<code>myStr</code> should contain the strings <code>FirstLine</code>, <code>SecondLine</code> and <code>ThirdLine</code> (remember case sensitivity)');"
         },
         {
-          "text": "<code>FirstLine</code> should be followed by the newline character <code>\\n</code>",
-          "testString": "assert(/FirstLine\\n/.test(myStr), '<code>FirstLine</code> should be followed by the newline character <code>\\n</code>');"
+          "text":
+            "<code>FirstLine</code> should be followed by the newline character <code>\\n</code>",
+          "testString":
+            "assert(/FirstLine\\n/.test(myStr), '<code>FirstLine</code> should be followed by the newline character <code>\\n</code>');"
         },
         {
-          "text": "<code>myStr</code> should contain a tab character <code>\\t</code> which follows a newline character",
-          "testString": "assert(/\\n\\t/.test(myStr), '<code>myStr</code> should contain a tab character <code>\\t</code> which follows a newline character');"
+          "text":
+            "<code>myStr</code> should contain a tab character <code>\\t</code> which follows a newline character",
+          "testString":
+            "assert(/\\n\\t/.test(myStr), '<code>myStr</code> should contain a tab character <code>\\t</code> which follows a newline character');"
         },
         {
-          "text": "<code>SecondLine</code> should be preceded by the backslash character <code>\\\\</code>",
-          "testString": "assert(/\\SecondLine/.test(myStr), '<code>SecondLine</code> should be preceded by the backslash character <code>\\\\</code>');"
+          "text":
+            "<code>SecondLine</code> should be preceded by the backslash character <code>\\\\</code>",
+          "testString":
+            "assert(/\\SecondLine/.test(myStr), '<code>SecondLine</code> should be preceded by the backslash character <code>\\\\</code>');"
         },
         {
-          "text": "There should be a newline character between <code>SecondLine</code> and <code>ThirdLine</code>",
-          "testString": "assert(/SecondLine\\nThirdLine/.test(myStr), 'There should be a newline character between <code>SecondLine</code> and <code>ThirdLine</code>');"
+          "text":
+            "There should be a newline character between <code>SecondLine</code> and <code>ThirdLine</code>",
+          "testString":
+            "assert(/SecondLine\\nThirdLine/.test(myStr), 'There should be a newline character between <code>SecondLine</code> and <code>ThirdLine</code>');"
         }
       ],
       "challengeType": 1,
@@ -1541,11 +1575,7 @@
           "key": "indexjs",
           "ext": "js",
           "name": "index",
-          "contents": [
-            "var myStr; // Change this line",
-            "",
-            ""
-          ],
+          "contents": ["var myStr; // Change this line", "", ""],
           "head": [],
           "tail": [
             "(function(){",
@@ -1572,20 +1602,27 @@
       ],
       "tests": [
         {
-          "text": "<code>myStr</code> should have a value of <code>This is the start. This is the end.</code>",
-          "testString": "assert(myStr === \"This is the start. This is the end.\", '<code>myStr</code> should have a value of <code>This is the start. This is the end.</code>');"
+          "text":
+            "<code>myStr</code> should have a value of <code>This is the start. This is the end.</code>",
+          "testString":
+            "assert(myStr === \"This is the start. This is the end.\", '<code>myStr</code> should have a value of <code>This is the start. This is the end.</code>');"
         },
         {
           "text": "Use the <code>+</code> operator to build <code>myStr</code>",
-          "testString": "assert(code.match(/([\"']).*([\"'])\\s*\\+\\s*([\"']).*([\"'])/g).length > 1, 'Use the <code>+</code> operator to build <code>myStr</code>');"
+          "testString":
+            "assert(code.match(/([\"']).*([\"'])\\s*\\+\\s*([\"']).*([\"'])/g).length > 1, 'Use the <code>+</code> operator to build <code>myStr</code>');"
         },
         {
-          "text": "<code>myStr</code> should be created using the <code>var</code> keyword.",
-          "testString": "assert(/var\\s+myStr/.test(code), '<code>myStr</code> should be created using the <code>var</code> keyword.');"
+          "text":
+            "<code>myStr</code> should be created using the <code>var</code> keyword.",
+          "testString":
+            "assert(/var\\s+myStr/.test(code), '<code>myStr</code> should be created using the <code>var</code> keyword.');"
         },
         {
-          "text": "Make sure to assign the result to the <code>myStr</code> variable.",
-          "testString": "assert(/myStr\\s*=/.test(code), 'Make sure to assign the result to the <code>myStr</code> variable.');"
+          "text":
+            "Make sure to assign the result to the <code>myStr</code> variable.",
+          "testString":
+            "assert(/myStr\\s*=/.test(code), 'Make sure to assign the result to the <code>myStr</code> variable.');"
         }
       ],
       "challengeType": 1,
@@ -1645,12 +1682,16 @@
       ],
       "tests": [
         {
-          "text": "<code>myStr</code> should have a value of <code>This is the first sentence. This is the second sentence.</code>",
-          "testString": "assert(myStr === \"This is the first sentence. This is the second sentence.\", '<code>myStr</code> should have a value of <code>This is the first sentence. This is the second sentence.</code>');"
+          "text":
+            "<code>myStr</code> should have a value of <code>This is the first sentence. This is the second sentence.</code>",
+          "testString":
+            "assert(myStr === \"This is the first sentence. This is the second sentence.\", '<code>myStr</code> should have a value of <code>This is the first sentence. This is the second sentence.</code>');"
         },
         {
-          "text": "Use the <code>+=</code> operator to build <code>myStr</code>",
-          "testString": "assert(code.match(/\\w\\s*\\+=\\s*[\"']/g).length > 1 && code.match(/\\w\\s*\\=\\s*[\"']/g).length > 1, 'Use the <code>+=</code> operator to build <code>myStr</code>');"
+          "text":
+            "Use the <code>+=</code> operator to build <code>myStr</code>",
+          "testString":
+            "assert(code.match(/\\w\\s*\\+=\\s*[\"']/g).length > 1 && code.match(/\\w\\s*\\=\\s*[\"']/g).length > 1, 'Use the <code>+=</code> operator to build <code>myStr</code>');"
         }
       ],
       "challengeType": 1,
@@ -1708,12 +1749,16 @@
       ],
       "tests": [
         {
-          "text": "<code>myName</code> should be set to a string at least 3 characters long",
-          "testString": "assert(typeof myName !== 'undefined' && myName.length > 2, '<code>myName</code> should be set to a string at least 3 characters long');"
+          "text":
+            "<code>myName</code> should be set to a string at least 3 characters long",
+          "testString":
+            "assert(typeof myName !== 'undefined' && myName.length > 2, '<code>myName</code> should be set to a string at least 3 characters long');"
         },
         {
-          "text": "Use two <code>+</code> operators to build <code>myStr</code> with <code>myName</code> inside it",
-          "testString": "assert(code.match(/[\"']\\s*\\+\\s*myName\\s*\\+\\s*[\"']/g).length > 0, 'Use two <code>+</code> operators to build <code>myStr</code> with <code>myName</code> inside it');"
+          "text":
+            "Use two <code>+</code> operators to build <code>myStr</code> with <code>myName</code> inside it",
+          "testString":
+            "assert(code.match(/[\"']\\s*\\+\\s*myName\\s*\\+\\s*[\"']/g).length > 0, 'Use two <code>+</code> operators to build <code>myStr</code> with <code>myName</code> inside it');"
         }
       ],
       "challengeType": 1,
@@ -1777,12 +1822,16 @@
       ],
       "tests": [
         {
-          "text": "<code>someAdjective</code> should be set to a string at least 3 characters long",
-          "testString": "assert(typeof someAdjective !== 'undefined' && someAdjective.length > 2, '<code>someAdjective</code> should be set to a string at least 3 characters long');"
+          "text":
+            "<code>someAdjective</code> should be set to a string at least 3 characters long",
+          "testString":
+            "assert(typeof someAdjective !== 'undefined' && someAdjective.length > 2, '<code>someAdjective</code> should be set to a string at least 3 characters long');"
         },
         {
-          "text": "Append <code>someAdjective</code> to <code>myStr</code> using the <code>+=</code> operator",
-          "testString": "assert(code.match(/myStr\\s*\\+=\\s*someAdjective\\s*/).length > 0, 'Append <code>someAdjective</code> to <code>myStr</code> using the <code>+=</code> operator');"
+          "text":
+            "Append <code>someAdjective</code> to <code>myStr</code> using the <code>+=</code> operator",
+          "testString":
+            "assert(code.match(/myStr\\s*\\+=\\s*someAdjective\\s*/).length > 0, 'Append <code>someAdjective</code> to <code>myStr</code> using the <code>+=</code> operator');"
         }
       ],
       "challengeType": 1,
@@ -1796,7 +1845,8 @@
           ]
         }
       },
-      "guideUrl": "https://guide.freecodecamp.org/certificates/appending-variables-to-strings",
+      "guideUrl":
+        "https://guide.freecodecamp.org/certificates/appending-variables-to-strings",
       "files": {
         "indexjs": {
           "key": "indexjs",
@@ -1850,17 +1900,21 @@
       "tests": [
         {
           "text": "<code>lastNameLength</code> should be equal to eight.",
-          "testString": "assert((function(){if(typeof lastNameLength !== \"undefined\" && typeof lastNameLength === \"number\" && lastNameLength === 8){return true;}else{return false;}})(), '<code>lastNameLength</code> should be equal to eight.');"
+          "testString":
+            "assert((function(){if(typeof lastNameLength !== \"undefined\" && typeof lastNameLength === \"number\" && lastNameLength === 8){return true;}else{return false;}})(), '<code>lastNameLength</code> should be equal to eight.');"
         },
         {
-          "text": "You should be getting the length of <code>lastName</code> by using <code>.length</code> like this: <code>lastName.length</code>.",
-          "testString": "assert((function(){if(code.match(/\\.length/gi) && code.match(/\\.length/gi).length >= 2 && code.match(/var lastNameLength \\= 0;/gi) && code.match(/var lastNameLength \\= 0;/gi).length >= 1){return true;}else{return false;}})(), 'You should be getting the length of <code>lastName</code> by using <code>.length</code> like this: <code>lastName.length</code>.');"
+          "text":
+            "You should be getting the length of <code>lastName</code> by using <code>.length</code> like this: <code>lastName.length</code>.",
+          "testString":
+            "assert((function(){if(code.match(/\\.length/gi) && code.match(/\\.length/gi).length >= 2 && code.match(/var lastNameLength \\= 0;/gi) && code.match(/var lastNameLength \\= 0;/gi).length >= 1){return true;}else{return false;}})(), 'You should be getting the length of <code>lastName</code> by using <code>.length</code> like this: <code>lastName.length</code>.');"
         }
       ],
       "challengeType": 1,
       "translations": {
         "es": {
-          "title": "Comprueba la propiedad longitud (length) de una variable tipo cadena",
+          "title":
+            "Comprueba la propiedad longitud (length) de una variable tipo cadena",
           "description": [
             "Las <code>estructuras de datos</code> tienen <code>propiedades</code>. Por ejemplo, las <code>cadenas</code> tienen una propiedad llamada <code>.length </code> que te dirá cuántos caracteres hay en la cadena.",
             "Por ejemplo, si creamos una variable <code>var firstName=\"Charles\"</code>, podemos averiguar la longitud de la cadena \"Charles\" usando la propiedad <code>firstName.length</code>. ",
@@ -1913,18 +1967,22 @@
       ],
       "tests": [
         {
-          "text": "The <code>firstLetterOfLastName</code> variable should have the value of <code>L</code>.",
-          "testString": "assert(firstLetterOfLastName === 'L', 'The <code>firstLetterOfLastName</code> variable should have the value of <code>L</code>.');"
+          "text":
+            "The <code>firstLetterOfLastName</code> variable should have the value of <code>L</code>.",
+          "testString":
+            "assert(firstLetterOfLastName === 'L', 'The <code>firstLetterOfLastName</code> variable should have the value of <code>L</code>.');"
         },
         {
           "text": "You should use bracket notation.",
-          "testString": "assert(code.match(/firstLetterOfLastName\\s*?=\\s*?lastName\\[.*?\\]/), 'You should use bracket notation.');"
+          "testString":
+            "assert(code.match(/firstLetterOfLastName\\s*?=\\s*?lastName\\[.*?\\]/), 'You should use bracket notation.');"
         }
       ],
       "challengeType": 1,
       "translations": {
         "es": {
-          "title": "Usa la notación de corchetes para encontrar el primer carácter de una cadena",
+          "title":
+            "Usa la notación de corchetes para encontrar el primer carácter de una cadena",
           "description": [
             "La <code>notación de corchetes</code> es una forma de obtener el caracter en un <code>índice</code> específico de una cadena.",
             "Los computadoras no empiezan a contar desde 1 como hacen los humanos. Comienzan en 0 ",
@@ -1956,9 +2014,7 @@
             ""
           ],
           "head": [],
-          "tail": [
-            "(function(v){return v;})(firstLetterOfLastName);"
-          ]
+          "tail": ["(function(v){return v;})(firstLetterOfLastName);"]
         }
       }
     },
@@ -1975,17 +2031,18 @@
         "Correct the assignment to <code>myStr</code> so it contains the string value of <code>Hello World</code> using the approach shown in the example above."
       ],
       "releasedOn": "January 1, 2016",
-      "solutions": [
-        "var myStr = \"Jello World\";\nmyStr = \"Hello World\";"
-      ],
+      "solutions": ["var myStr = \"Jello World\";\nmyStr = \"Hello World\";"],
       "tests": [
         {
-          "text": "<code>myStr</code> should have a value of <code>Hello World</code>",
-          "testString": "assert(myStr === \"Hello World\", '<code>myStr</code> should have a value of <code>Hello World</code>');"
+          "text":
+            "<code>myStr</code> should have a value of <code>Hello World</code>",
+          "testString":
+            "assert(myStr === \"Hello World\", '<code>myStr</code> should have a value of <code>Hello World</code>');"
         },
         {
           "text": "Do not change the code above the line",
-          "testString": "assert(/myStr = \"Jello World\"/.test(code), 'Do not change the code above the line');"
+          "testString":
+            "assert(/myStr = \"Jello World\"/.test(code), 'Do not change the code above the line');"
         }
       ],
       "challengeType": 1,
@@ -2019,9 +2076,7 @@
             ""
           ],
           "head": [],
-          "tail": [
-            "(function(v){return \"myStr = \" + v;})(myStr);"
-          ]
+          "tail": ["(function(v){return \"myStr = \" + v;})(myStr);"]
         }
       }
     },
@@ -2040,18 +2095,22 @@
       ],
       "tests": [
         {
-          "text": "The <code>thirdLetterOfLastName</code> variable should have the value of <code>v</code>.",
-          "testString": "assert(thirdLetterOfLastName === 'v', 'The <code>thirdLetterOfLastName</code> variable should have the value of <code>v</code>.');"
+          "text":
+            "The <code>thirdLetterOfLastName</code> variable should have the value of <code>v</code>.",
+          "testString":
+            "assert(thirdLetterOfLastName === 'v', 'The <code>thirdLetterOfLastName</code> variable should have the value of <code>v</code>.');"
         },
         {
           "text": "You should use bracket notation.",
-          "testString": "assert(code.match(/thirdLetterOfLastName\\s*?=\\s*?lastName\\[.*?\\]/), 'You should use bracket notation.');"
+          "testString":
+            "assert(code.match(/thirdLetterOfLastName\\s*?=\\s*?lastName\\[.*?\\]/), 'You should use bracket notation.');"
         }
       ],
       "challengeType": 1,
       "translations": {
         "es": {
-          "title": "Usar la notación de corchetes para encontrar el n-ésimo caracter en una cadena",
+          "title":
+            "Usar la notación de corchetes para encontrar el n-ésimo caracter en una cadena",
           "description": [
             "También puede usar <code>notación de corchetes</code> para obtener el caracter en otras posiciones dentro de una cadena.",
             "Recuerda que los computadores empiezan a contar a 0, por lo que el primer caracter es en realidad el caracter cero.",
@@ -2080,9 +2139,7 @@
             ""
           ],
           "head": [],
-          "tail": [
-            "(function(v){return v;})(thirdLetterOfLastName);"
-          ]
+          "tail": ["(function(v){return v;})(thirdLetterOfLastName);"]
         }
       }
     },
@@ -2102,17 +2159,21 @@
       "tests": [
         {
           "text": "<code>lastLetterOfLastName</code> should be \"e\".",
-          "testString": "assert(lastLetterOfLastName === \"e\", '<code>lastLetterOfLastName</code> should be \"e\".');"
+          "testString":
+            "assert(lastLetterOfLastName === \"e\", '<code>lastLetterOfLastName</code> should be \"e\".');"
         },
         {
-          "text": "You have to use <code>.length</code> to get the last letter.",
-          "testString": "assert(code.match(/\\.length/g).length === 2, 'You have to use <code>.length</code> to get the last letter.');"
+          "text":
+            "You have to use <code>.length</code> to get the last letter.",
+          "testString":
+            "assert(code.match(/\\.length/g).length === 2, 'You have to use <code>.length</code> to get the last letter.');"
         }
       ],
       "challengeType": 1,
       "translations": {
         "es": {
-          "title": "Usa notación de corchetes para encontrar el último caracter de una cadena",
+          "title":
+            "Usa notación de corchetes para encontrar el último caracter de una cadena",
           "description": [
             "Con el fin de conseguir la última letra de una cadena, puedes restar uno a la longitud de la cadena.",
             "Por ejemplo, si <code>var firstName = \"Charles\"</code>, se puede obtener la última letra usando <code>firstName[firstName.length - 1]</code>. ",
@@ -2141,15 +2202,14 @@
             ""
           ],
           "head": [],
-          "tail": [
-            "(function(v){return v;})(lastLetterOfLastName);"
-          ]
+          "tail": ["(function(v){return v;})(lastLetterOfLastName);"]
         }
       }
     },
     {
       "id": "bd7123c9c452eddfaeb5bdef",
-      "title": "Use Bracket Notation to Find the Nth-to-Last Character in a String",
+      "title":
+        "Use Bracket Notation to Find the Nth-to-Last Character in a String",
       "description": [
         "You can use the same principle we just used to retrieve the last character in a string to retrieve the Nth-to-last character.",
         "For example, you can get the value of the third-to-last letter of the <code>var firstName = \"Charles\"</code> string by using <code>firstName[firstName.length - 3]</code>",
@@ -2163,17 +2223,21 @@
       "tests": [
         {
           "text": "<code>secondToLastLetterOfLastName</code> should be \"c\".",
-          "testString": "assert(secondToLastLetterOfLastName === 'c', '<code>secondToLastLetterOfLastName</code> should be \"c\".');"
+          "testString":
+            "assert(secondToLastLetterOfLastName === 'c', '<code>secondToLastLetterOfLastName</code> should be \"c\".');"
         },
         {
-          "text": "You have to use <code>.length</code> to get the second last letter.",
-          "testString": "assert(code.match(/\\.length/g).length === 2, 'You have to use <code>.length</code> to get the second last letter.');"
+          "text":
+            "You have to use <code>.length</code> to get the second last letter.",
+          "testString":
+            "assert(code.match(/\\.length/g).length === 2, 'You have to use <code>.length</code> to get the second last letter.');"
         }
       ],
       "challengeType": 1,
       "translations": {
         "es": {
-          "title": "Usa notación de corchetes para encontrar el n-ésimo último caracter de una cadena",
+          "title":
+            "Usa notación de corchetes para encontrar el n-ésimo último caracter de una cadena",
           "description": [
             "Puede utilizar el mismo principio utilizamos para recuperar el último caracter de una cadena para recuperar el n-ésimo último caracter.",
             "Por ejemplo, se puede obtener el valor de la tercera última letra de la cadena <code>var firstName = \"Charles\"</code> utilizando <code>firstName[firstName.length - 3]</code> ",
@@ -2202,9 +2266,7 @@
             ""
           ],
           "head": [],
-          "tail": [
-            "(function(v){return v;})(secondToLastLetterOfLastName);"
-          ]
+          "tail": ["(function(v){return v;})(secondToLastLetterOfLastName);"]
         }
       }
     },
@@ -2227,16 +2289,22 @@
       ],
       "tests": [
         {
-          "text": "<code>wordBlanks(\"\",\"\",\"\",\"\")</code> should return a string.",
-          "testString": "assert(typeof wordBlanks(\"\",\"\",\"\",\"\") === 'string', '<code>wordBlanks(\"\",\"\",\"\",\"\")</code> should return a string.');"
+          "text":
+            "<code>wordBlanks(\"\",\"\",\"\",\"\")</code> should return a string.",
+          "testString":
+            "assert(typeof wordBlanks(\"\",\"\",\"\",\"\") === 'string', '<code>wordBlanks(\"\",\"\",\"\",\"\")</code> should return a string.');"
         },
         {
-          "text": "<code>wordBlanks(\"dog\", \"big\", \"ran\", \"quickly\")</code> should contain all of the passed in words separated by non-word characters (and any additional words in your madlib).",
-          "testString": "assert(/\\bdog\\b/.test(test1) && /\\bbig\\b/.test(test1) && /\\bran\\b/.test(test1) && /\\bquickly\\b/.test(test1),'<code>wordBlanks(\"dog\", \"big\", \"ran\", \"quickly\")</code> should contain all of the passed in words separated by non-word characters (and any additional words in your madlib).');"
+          "text":
+            "<code>wordBlanks(\"dog\", \"big\", \"ran\", \"quickly\")</code> should contain all of the passed in words separated by non-word characters (and any additional words in your madlib).",
+          "testString":
+            "assert(/\\bdog\\b/.test(test1) && /\\bbig\\b/.test(test1) && /\\bran\\b/.test(test1) && /\\bquickly\\b/.test(test1),'<code>wordBlanks(\"dog\", \"big\", \"ran\", \"quickly\")</code> should contain all of the passed in words separated by non-word characters (and any additional words in your madlib).');"
         },
         {
-          "text": "<code>wordBlanks(\"cat\", \"little\", \"hit\", \"slowly\")</code> should contain all of the passed in words separated by non-word characters (and any additional words in your madlib).",
-          "testString": "assert(/\\bcat\\b/.test(test2) && /\\blittle\\b/.test(test2) && /\\bhit\\b/.test(test2) && /\\bslowly\\b/.test(test2),'<code>wordBlanks(\"cat\", \"little\", \"hit\", \"slowly\")</code> should contain all of the passed in words separated by non-word characters (and any additional words in your madlib).');"
+          "text":
+            "<code>wordBlanks(\"cat\", \"little\", \"hit\", \"slowly\")</code> should contain all of the passed in words separated by non-word characters (and any additional words in your madlib).",
+          "testString":
+            "assert(/\\bcat\\b/.test(test2) && /\\blittle\\b/.test(test2) && /\\bhit\\b/.test(test2) && /\\bslowly\\b/.test(test2),'<code>wordBlanks(\"cat\", \"little\", \"hit\", \"slowly\")</code> should contain all of the passed in words separated by non-word characters (and any additional words in your madlib).');"
         }
       ],
       "challengeType": 1,
@@ -2287,27 +2355,31 @@
         "Modify the new array <code>myArray</code> so that it contains both a <code>string</code> and a <code>number</code> (in that order).",
         "<strong>Hint</strong><br>Refer to the example code in the text editor if you get stuck."
       ],
-      "solutions": [
-        "var myArray = [\"The Answer\", 42];"
-      ],
+      "solutions": ["var myArray = [\"The Answer\", 42];"],
       "tests": [
         {
           "text": "<code>myArray</code> should be an <code>array</code>.",
-          "testString": "assert(typeof myArray == 'object', '<code>myArray</code> should be an <code>array</code>.');"
+          "testString":
+            "assert(typeof myArray == 'object', '<code>myArray</code> should be an <code>array</code>.');"
         },
         {
-          "text": "The first item in <code>myArray</code> should be a <code>string</code>.",
-          "testString": "assert(typeof myArray[0] !== 'undefined' && typeof myArray[0] == 'string', 'The first item in <code>myArray</code> should be a <code>string</code>.');"
+          "text":
+            "The first item in <code>myArray</code> should be a <code>string</code>.",
+          "testString":
+            "assert(typeof myArray[0] !== 'undefined' && typeof myArray[0] == 'string', 'The first item in <code>myArray</code> should be a <code>string</code>.');"
         },
         {
-          "text": "The second item in <code>myArray</code> should be a <code>number</code>.",
-          "testString": "assert(typeof myArray[1] !== 'undefined' && typeof myArray[1] == 'number', 'The second item in <code>myArray</code> should be a <code>number</code>.');"
+          "text":
+            "The second item in <code>myArray</code> should be a <code>number</code>.",
+          "testString":
+            "assert(typeof myArray[1] !== 'undefined' && typeof myArray[1] == 'number', 'The second item in <code>myArray</code> should be a <code>number</code>.');"
         }
       ],
       "challengeType": 1,
       "translations": {
         "es": {
-          "title": "Almacena múltiples valores en una variable utilizando vectores en JavaScript",
+          "title":
+            "Almacena múltiples valores en una variable utilizando vectores en JavaScript",
           "description": [
             "Con las variables tipo <code>vector</code> (o en inglés <code>array</code>) podemos almacenar diversos datos en un solo lugar.",
             "Empiezas la declaración de un vector con un corchete de apertura, y terminas con un corchete de cierre, y pones una coma entre cada entrada, así: <code>var sandwich = [\"mantequilla de maní\", \"jalea\" , \"pan\"]</code>. ",
@@ -2331,9 +2403,7 @@
             ""
           ],
           "head": [],
-          "tail": [
-            "(function(z){return z;})(myArray);"
-          ]
+          "tail": ["(function(z){return z;})(myArray);"]
         }
       }
     },
@@ -2345,13 +2415,13 @@
         "<hr>",
         "Create a nested array called <code>myArray</code>."
       ],
-      "solutions": [
-        "var myArray = [[1,2,3]];"
-      ],
+      "solutions": ["var myArray = [[1,2,3]];"],
       "tests": [
         {
-          "text": "<code>myArray</code> should have at least one array nested within another array.",
-          "testString": "assert(Array.isArray(myArray) && myArray.some(Array.isArray), '<code>myArray</code> should have at least one array nested within another array.');"
+          "text":
+            "<code>myArray</code> should have at least one array nested within another array.",
+          "testString":
+            "assert(Array.isArray(myArray) && myArray.some(Array.isArray), '<code>myArray</code> should have at least one array nested within another array.');"
         }
       ],
       "challengeType": 1,
@@ -2397,17 +2467,19 @@
         "<hr>",
         "Create a variable called <code>myData</code> and set it to equal the first value of <code>myArray</code> using bracket notation."
       ],
-      "solutions": [
-        "var myArray = [50,60,70];\nvar myData = myArray[0];"
-      ],
+      "solutions": ["var myArray = [50,60,70];\nvar myData = myArray[0];"],
       "tests": [
         {
-          "text": "The variable <code>myData</code> should equal the first value of <code>myArray</code>.",
-          "testString": "assert((function(){if(typeof myArray !== 'undefined' && typeof myData !== 'undefined' && myArray[0] === myData){return true;}else{return false;}})(), 'The variable <code>myData</code> should equal the first value of <code>myArray</code>.');"
+          "text":
+            "The variable <code>myData</code> should equal the first value of <code>myArray</code>.",
+          "testString":
+            "assert((function(){if(typeof myArray !== 'undefined' && typeof myData !== 'undefined' && myArray[0] === myData){return true;}else{return false;}})(), 'The variable <code>myData</code> should equal the first value of <code>myArray</code>.');"
         },
         {
-          "text": "The data in variable <code>myArray</code> should be accessed using bracket notation.",
-          "testString": "assert((function(){if(code.match(/\\s*=\\s*myArray\\[0\\]/g)){return true;}else{return false;}})(), 'The data in variable <code>myArray</code> should be accessed using bracket notation.');"
+          "text":
+            "The data in variable <code>myArray</code> should be accessed using bracket notation.",
+          "testString":
+            "assert((function(){if(code.match(/\\s*=\\s*myArray\\[0\\]/g)){return true;}else{return false;}})(), 'The data in variable <code>myArray</code> should be accessed using bracket notation.');"
         }
       ],
       "challengeType": 1,
@@ -2426,7 +2498,8 @@
           ]
         }
       },
-      "guideUrl": "https://guide.freecodecamp.org/certificates/access-array-data-with-indexes",
+      "guideUrl":
+        "https://guide.freecodecamp.org/certificates/access-array-data-with-indexes",
       "files": {
         "indexjs": {
           "key": "indexjs",
@@ -2461,17 +2534,18 @@
         "<hr>",
         "Modify the data stored at index <code>0</code> of <code>myArray</code> to a value of <code>45</code>."
       ],
-      "solutions": [
-        "var myArray = [18,64,99];\nmyArray[0] = 45;"
-      ],
+      "solutions": ["var myArray = [18,64,99];\nmyArray[0] = 45;"],
       "tests": [
         {
           "text": "<code>myArray</code> should now be [45,64,99].",
-          "testString": "assert((function(){if(typeof myArray != 'undefined' && myArray[0] == 45 && myArray[1] == 64 && myArray[2] == 99){return true;}else{return false;}})(), '<code>myArray</code> should now be [45,64,99].');"
+          "testString":
+            "assert((function(){if(typeof myArray != 'undefined' && myArray[0] == 45 && myArray[1] == 64 && myArray[2] == 99){return true;}else{return false;}})(), '<code>myArray</code> should now be [45,64,99].');"
         },
         {
-          "text": "You should be using correct index to modify the value in <code>myArray</code>.",
-          "testString": "assert((function(){if(code.match(/myArray\\[0\\]\\s*=\\s*/g)){return true;}else{return false;}})(), 'You should be using correct index to modify the value in <code>myArray</code>.');"
+          "text":
+            "You should be using correct index to modify the value in <code>myArray</code>.",
+          "testString":
+            "assert((function(){if(code.match(/myArray\\[0\\]\\s*=\\s*/g)){return true;}else{return false;}})(), 'You should be using correct index to modify the value in <code>myArray</code>.');"
         }
       ],
       "challengeType": 1,
@@ -2518,7 +2592,7 @@
       "description": [
         "One way to think of a <dfn>multi-dimensional</dfn> array, is as an <em>array of arrays</em>. When you use brackets to access your array, the first set of brackets refers to the entries in the outer-most (the first level) array, and each additional pair of brackets refers to the next level of entries inside.",
         "<strong>Example</strong>",
-        "<blockquote>var arr = [<br>    [1,2,3],<br>    [4,5,6],<br>    [7,8,9],<br>    [[10,11,12], 13, 14]<br>];<br>arr[3]; // equals [[10,11,12], 13, 14]<br>arr[3][0]; // equals [10,11,12]<br>arr[3][0][1]; // equals 11</blockquote>",
+        "<blockquote>var arr = [<br>&nbsp;&nbsp;[1,2,3],<br>&nbsp;&nbsp;[4,5,6],<br>&nbsp;&nbsp;[7,8,9],<br>&nbsp;&nbsp;[[10,11,12], 13, 14]<br>];<br>arr[3]; // equals [[10,11,12], 13, 14]<br>arr[3][0]; // equals [10,11,12]<br>arr[3][0][1]; // equals 11</blockquote>",
         "<strong>Note</strong><br>There shouldn't be any spaces between the array name and the square brackets, like <code>array [0][0]</code> and even this <code>array [0] [0]</code> is not allowed. Although JavaScript is able to process this correctly, this may confuse other programmers reading your code.",
         "<hr>",
         "Using bracket notation select an element from <code>myArray</code> such that <code>myData</code> is equal to <code>8</code>."
@@ -2530,11 +2604,14 @@
       "tests": [
         {
           "text": "<code>myData</code> should be equal to <code>8</code>.",
-          "testString": "assert(myData === 8, '<code>myData</code> should be equal to <code>8</code>.');"
+          "testString":
+            "assert(myData === 8, '<code>myData</code> should be equal to <code>8</code>.');"
         },
         {
-          "text": "You should be using bracket notation to read the correct value from <code>myArray</code>.",
-          "testString": "assert(/myArray\\[2\\]\\[1\\]/g.test(code) && !/myData\\s*=\\s*(?:.*[-+*/%]|\\d)/g.test(code), 'You should be using bracket notation to read the correct value from <code>myArray</code>.');"
+          "text":
+            "You should be using bracket notation to read the correct value from <code>myArray</code>.",
+          "testString":
+            "assert(/myArray\\[2\\]\\[1\\]/g.test(code) && !/myData\\s*=\\s*(?:.*[-+*/%]|\\d)/g.test(code), 'You should be using bracket notation to read the correct value from <code>myArray</code>.');"
         }
       ],
       "challengeType": 1,
@@ -2544,13 +2621,14 @@
           "description": [
             "Una manera de pensar un vector <dfn>multi-dimensional</dfn>, es como un <em>vector de vectores</em>. Cuando usas corchetes para acceder a tu vector, el primer conjunto de brackets se refiere a las entradas en el vector más externo y cada nivel subsecuente de brackets se refiere al siguiente nivel de vectores internos.",
             "<strong>Ejemplo</strong>",
-            "<blockquote>var vec = [<br>    [1,2,3],<br>    [4,5,6],<br>    [7,8,9],<br>    [[10,11,12], 13, 14]<br>];<br>vec[0]; // es igual [1,2,3]<br>vec[1][2]; // es igual 6<br>vec[3][0][1]; // es igual 11</blockquote>",
+            "<blockquote>var vec = [<br>&nbsp;&nbsp;[1,2,3],<br>&nbsp;&nbsp;[4,5,6],<br>&nbsp;&nbsp;[7,8,9],<br>&nbsp;&nbsp;[[10,11,12], 13, 14]<br>];<br>vec[0]; // es igual [1,2,3]<br>vec[1][2]; // es igual 6<br>vec[3][0][1]; // es igual 11</blockquote>",
             "<h4>Instrucciones</h4>",
             "Lee de <code>myArray</code> usando la notación corchete de modo que myData sea igual a <code>8</code>"
           ]
         }
       },
-      "guideUrl": "https://guide.freecodecamp.org/certificates/access-array-data-with-indexes",
+      "guideUrl":
+        "https://guide.freecodecamp.org/certificates/access-array-data-with-indexes",
       "files": {
         "indexjs": {
           "key": "indexjs",
@@ -2586,8 +2664,10 @@
       ],
       "tests": [
         {
-          "text": "<code>myArray</code> should now equal <code>[[\"John\", 23], [\"cat\", 2], [\"dog\", 3]]</code>.",
-          "testString": "assert((function(d){if(d[2] != undefined && d[0][0] == 'John' && d[0][1] === 23 && d[2][0] == 'dog' && d[2][1] === 3 && d[2].length == 2){return true;}else{return false;}})(myArray), '<code>myArray</code> should now equal <code>[[\"John\", 23], [\"cat\", 2], [\"dog\", 3]]</code>.');"
+          "text":
+            "<code>myArray</code> should now equal <code>[[\"John\", 23], [\"cat\", 2], [\"dog\", 3]]</code>.",
+          "testString":
+            "assert((function(d){if(d[2] != undefined && d[0][0] == 'John' && d[0][1] === 23 && d[2][0] == 'dog' && d[2][1] === 3 && d[2].length == 2){return true;}else{return false;}})(myArray), '<code>myArray</code> should now equal <code>[[\"John\", 23], [\"cat\", 2], [\"dog\", 3]]</code>.');"
         }
       ],
       "challengeType": 1,
@@ -2642,16 +2722,21 @@
       ],
       "tests": [
         {
-          "text": "<code>myArray</code> should only contain <code>[[\"John\", 23]]</code>.",
-          "testString": "assert((function(d){if(d[0][0] == 'John' && d[0][1] === 23 && d[1] == undefined){return true;}else{return false;}})(myArray), '<code>myArray</code> should only contain <code>[[\"John\", 23]]</code>.');"
+          "text":
+            "<code>myArray</code> should only contain <code>[[\"John\", 23]]</code>.",
+          "testString":
+            "assert((function(d){if(d[0][0] == 'John' && d[0][1] === 23 && d[1] == undefined){return true;}else{return false;}})(myArray), '<code>myArray</code> should only contain <code>[[\"John\", 23]]</code>.');"
         },
         {
           "text": "Use <code>pop()</code> on <code>myArray</code>",
-          "testString": "assert(/removedFromMyArray\\s*=\\s*myArray\\s*.\\s*pop\\s*(\\s*)/.test(code), 'Use <code>pop()</code> on <code>myArray</code>');"
+          "testString":
+            "assert(/removedFromMyArray\\s*=\\s*myArray\\s*.\\s*pop\\s*(\\s*)/.test(code), 'Use <code>pop()</code> on <code>myArray</code>');"
         },
         {
-          "text": "<code>removedFromMyArray</code> should only contain <code>[\"cat\", 2]</code>.",
-          "testString": "assert((function(d){if(d[0] == 'cat' && d[1] === 2 && d[2] == undefined){return true;}else{return false;}})(removedFromMyArray), '<code>removedFromMyArray</code> should only contain <code>[\"cat\", 2]</code>.');"
+          "text":
+            "<code>removedFromMyArray</code> should only contain <code>[\"cat\", 2]</code>.",
+          "testString":
+            "assert((function(d){if(d[0] == 'cat' && d[1] === 2 && d[2] == undefined){return true;}else{return false;}})(removedFromMyArray), '<code>removedFromMyArray</code> should only contain <code>[\"cat\", 2]</code>.');"
         }
       ],
       "challengeType": 1,
@@ -2707,12 +2792,16 @@
       ],
       "tests": [
         {
-          "text": "<code>myArray</code> should now equal <code>[[\"dog\", 3]]</code>.",
-          "testString": "assert((function(d){if(d[0][0] == 'dog' && d[0][1] === 3 && d[1] == undefined){return true;}else{return false;}})(myArray), '<code>myArray</code> should now equal <code>[[\"dog\", 3]]</code>.');"
+          "text":
+            "<code>myArray</code> should now equal <code>[[\"dog\", 3]]</code>.",
+          "testString":
+            "assert((function(d){if(d[0][0] == 'dog' && d[0][1] === 3 && d[1] == undefined){return true;}else{return false;}})(myArray), '<code>myArray</code> should now equal <code>[[\"dog\", 3]]</code>.');"
         },
         {
-          "text": "<code>removedFromMyArray</code> should contain <code>[\"John\", 23]</code>.",
-          "testString": "assert((function(d){if(d[0] == 'John' && d[1] === 23 && typeof removedFromMyArray === 'object'){return true;}else{return false;}})(removedFromMyArray), '<code>removedFromMyArray</code> should contain <code>[\"John\", 23]</code>.');"
+          "text":
+            "<code>removedFromMyArray</code> should contain <code>[\"John\", 23]</code>.",
+          "testString":
+            "assert((function(d){if(d[0] == 'John' && d[1] === 23 && typeof removedFromMyArray === 'object'){return true;}else{return false;}})(removedFromMyArray), '<code>removedFromMyArray</code> should contain <code>[\"John\", 23]</code>.');"
         }
       ],
       "challengeType": 1,
@@ -2767,8 +2856,10 @@
       ],
       "tests": [
         {
-          "text": "<code>myArray</code> should now have [[\"Paul\", 35], [\"dog\", 3]].",
-          "testString": "assert((function(d){if(typeof d[0] === \"object\" && d[0][0] == 'Paul' && d[0][1] === 35 && d[1][0] != undefined && d[1][0] == 'dog' && d[1][1] != undefined && d[1][1] == 3){return true;}else{return false;}})(myArray), '<code>myArray</code> should now have [[\"Paul\", 35], [\"dog\", 3]].');"
+          "text":
+            "<code>myArray</code> should now have [[\"Paul\", 35], [\"dog\", 3]].",
+          "testString":
+            "assert((function(d){if(typeof d[0] === \"object\" && d[0][0] == 'Paul' && d[0][1] === 35 && d[1][0] != undefined && d[1][0] == 'dog' && d[1][1] != undefined && d[1][1] == 3){return true;}else{return false;}})(myArray), '<code>myArray</code> should now have [[\"Paul\", 35], [\"dog\", 3]].');"
         }
       ],
       "challengeType": 1,
@@ -2826,19 +2917,25 @@
       "tests": [
         {
           "text": "<code>myList</code> should be an array",
-          "testString": "assert(isArray, '<code>myList</code> should be an array');"
+          "testString":
+            "assert(isArray, '<code>myList</code> should be an array');"
         },
         {
-          "text": "The first elements in each of your sub-arrays must all be strings",
-          "testString": "assert(hasString, 'The first elements in each of your sub-arrays must all be strings');"
+          "text":
+            "The first elements in each of your sub-arrays must all be strings",
+          "testString":
+            "assert(hasString, 'The first elements in each of your sub-arrays must all be strings');"
         },
         {
-          "text": "The second elements in each of your sub-arrays must all be numbers",
-          "testString": "assert(hasNumber, 'The second elements in each of your sub-arrays must all be numbers');"
+          "text":
+            "The second elements in each of your sub-arrays must all be numbers",
+          "testString":
+            "assert(hasNumber, 'The second elements in each of your sub-arrays must all be numbers');"
         },
         {
           "text": "You must have at least 5 items in your list",
-          "testString": "assert(count > 4, 'You must have at least 5 items in your list');"
+          "testString":
+            "assert(count > 4, 'You must have at least 5 items in your list');"
         }
       ],
       "challengeType": 1,
@@ -2858,11 +2955,7 @@
           "key": "indexjs",
           "ext": "js",
           "name": "index",
-          "contents": [
-            "var myList = [];",
-            "",
-            ""
-          ],
+          "contents": ["var myList = [];", "", ""],
           "head": [],
           "tail": [
             "var count = 0;",
@@ -2901,7 +2994,7 @@
       "description": [
         "In JavaScript, we can divide up our code into reusable parts called <dfn>functions</dfn>.",
         "Here's an example of a function:",
-        "<blockquote>function functionName() {<br>  console.log(\"Hello World\");<br>}</blockquote>",
+        "<blockquote>function functionName() {<br>&nbsp;&nbsp;console.log(\"Hello World\");<br>}</blockquote>",
         "You can call or <dfn>invoke</dfn> this function by using its name followed by parentheses, like this:",
         "<code>functionName();</code>",
         "Each time the function is called it will print out the message <code>\"Hello World\"</code> on the dev console. All of the code between the curly braces will be executed every time the function is called.",
@@ -2914,15 +3007,19 @@
       "tests": [
         {
           "text": "<code>reusableFunction</code> should be a function",
-          "testString": "assert(typeof reusableFunction === 'function', '<code>reusableFunction</code> should be a function');"
+          "testString":
+            "assert(typeof reusableFunction === 'function', '<code>reusableFunction</code> should be a function');"
         },
         {
-          "text": "<code>reusableFunction</code> should output \"Hi World\" to the dev console",
-          "testString": "assert(\"Hi World\" === logOutput, '<code>reusableFunction</code> should output \"Hi World\" to the dev console');"
+          "text":
+            "<code>reusableFunction</code> should output \"Hi World\" to the dev console",
+          "testString":
+            "assert(\"Hi World\" === logOutput, '<code>reusableFunction</code> should output \"Hi World\" to the dev console');"
         },
         {
           "text": "Call <code>reusableFunction</code> after you define it",
-          "testString": "assert(/^\\s*reusableFunction\\(\\)\\s*;/m.test(code), 'Call <code>reusableFunction</code> after you define it');"
+          "testString":
+            "assert(/^\\s*reusableFunction\\(\\)\\s*;/m.test(code), 'Call <code>reusableFunction</code> after you define it');"
         }
       ],
       "challengeType": 1,
@@ -2998,7 +3095,7 @@
       "description": [
         "<dfn>Parameters</dfn> are variables that act as placeholders for the values that are to be input to a function when it is called. When a function is defined, it is typically defined along with one or more parameters. The actual values that are input (or <dfn>\"passed\"</dfn>) into a function when it is called are known as <dfn>arguments</dfn>.",
         "Here is a function with two parameters, <code>param1</code> and <code>param2</code>:",
-        "<blockquote>function testFun(param1, param2) {<br>  console.log(param1, param2);<br>}</blockquote>",
+        "<blockquote>function testFun(param1, param2) {<br>&nbsp;&nbsp;console.log(param1, param2);<br>}</blockquote>",
         "Then we can call <code>testFun</code>:",
         "<code>testFun(\"Hello\", \"World\");</code>",
         "We have passed two arguments, <code>\"Hello\"</code> and <code>\"World\"</code>. Inside the function, <code>param1</code> will equal \"Hello\" and <code>param2</code> will equal \"World\". Note that you could call <code>testFun</code> again with different arguments and the parameters would take on the value of the new arguments.",
@@ -3012,19 +3109,26 @@
       "tests": [
         {
           "text": "<code>functionWithArgs</code> should be a function",
-          "testString": "assert(typeof functionWithArgs === 'function', '<code>functionWithArgs</code> should be a function');"
+          "testString":
+            "assert(typeof functionWithArgs === 'function', '<code>functionWithArgs</code> should be a function');"
         },
         {
-          "text": "<code>functionWithArgs(1,2)</code> should output <code>3</code>",
-          "testString": "if(typeof functionWithArgs === \"function\") { capture(); functionWithArgs(1,2); uncapture(); } assert(logOutput == 3, '<code>functionWithArgs(1,2)</code> should output <code>3</code>');"
+          "text":
+            "<code>functionWithArgs(1,2)</code> should output <code>3</code>",
+          "testString":
+            "if(typeof functionWithArgs === \"function\") { capture(); functionWithArgs(1,2); uncapture(); } assert(logOutput == 3, '<code>functionWithArgs(1,2)</code> should output <code>3</code>');"
         },
         {
-          "text": "<code>functionWithArgs(7,9)</code> should output <code>16</code>",
-          "testString": "if(typeof functionWithArgs === \"function\") { capture(); functionWithArgs(7,9); uncapture(); } assert(logOutput == 16, '<code>functionWithArgs(7,9)</code> should output <code>16</code>');"
+          "text":
+            "<code>functionWithArgs(7,9)</code> should output <code>16</code>",
+          "testString":
+            "if(typeof functionWithArgs === \"function\") { capture(); functionWithArgs(7,9); uncapture(); } assert(logOutput == 16, '<code>functionWithArgs(7,9)</code> should output <code>16</code>');"
         },
         {
-          "text": "Call <code>functionWithArgs</code> with two numbers after you define it.",
-          "testString": "assert(/^\\s*functionWithArgs\\s*\\(\\s*\\d+\\s*,\\s*\\d+\\s*\\)\\s*;/m.test(code), 'Call <code>functionWithArgs</code> with two numbers after you define it.');"
+          "text":
+            "Call <code>functionWithArgs</code> with two numbers after you define it.",
+          "testString":
+            "assert(/^\\s*functionWithArgs\\s*\\(\\s*\\d+\\s*,\\s*\\d+\\s*\\)\\s*;/m.test(code), 'Call <code>functionWithArgs</code> with two numbers after you define it.');"
         }
       ],
       "challengeType": 1,
@@ -3034,7 +3138,7 @@
           "description": [
             "Los <dfn>parámetros</dfn> son variables que actúan como marcadores de lugar para los valores que han de ser entrada para una función cuando esta es llamada. Cuando una función es definida, es típicamente definida con uno o más parámetros. Los valores actuales que son entrada (or <dfn>\"pasados\"</dfn>) dentro de una función cuando esta es llamada son concidos como <dfn>argumentos</dfn>.",
             "Aquí hay una función con dos parámetros, <code>param1</code> y <code>param2</code>:",
-            "<blockquote>function testFun(param1, param2) {<br>  console.log(param1, param2);<br>}</blockquote>",
+            "<blockquote>function testFun(param1, param2) {<br>&nbsp;&nbsp;console.log(param1, param2);<br>}</blockquote>",
             "Entonces nosotros podemos llamar <code>testFun</code>:",
             "<code>testFun(\"Hello\", \"World\");</code>",
             "Nosotros hemos pasado dos argumentos, <code>\"Hello\"</code> y <code>\"World\"</code>. Dentro de la función, <code>param1</code> será igual a \"Hello\" y <code>param2</code> será igual a \"World\". Nota que puedes llamar <code>testFun</code> otra vez con argumentos diferentes y los parámetros asumirían el valor de los nuevos argumentos.",
@@ -3110,19 +3214,26 @@
       "tests": [
         {
           "text": "<code>myGlobal</code> should be defined",
-          "testString": "assert(typeof myGlobal != \"undefined\", '<code>myGlobal</code> should be defined');"
+          "testString":
+            "assert(typeof myGlobal != \"undefined\", '<code>myGlobal</code> should be defined');"
         },
         {
-          "text": "<code>myGlobal</code> should have a value of <code>10</code>",
-          "testString": "assert(myGlobal === 10, '<code>myGlobal</code> should have a value of <code>10</code>');"
+          "text":
+            "<code>myGlobal</code> should have a value of <code>10</code>",
+          "testString":
+            "assert(myGlobal === 10, '<code>myGlobal</code> should have a value of <code>10</code>');"
         },
         {
-          "text": "<code>myGlobal</code> should be declared using the <code>var</code> keyword",
-          "testString": "assert(/var\\s+myGlobal/.test(code), '<code>myGlobal</code> should be declared using the <code>var</code> keyword');"
+          "text":
+            "<code>myGlobal</code> should be declared using the <code>var</code> keyword",
+          "testString":
+            "assert(/var\\s+myGlobal/.test(code), '<code>myGlobal</code> should be declared using the <code>var</code> keyword');"
         },
         {
-          "text": "<code>oopsGlobal</code> should be a global variable and have a value of <code>5</code>",
-          "testString": "assert(typeof oopsGlobal != \"undefined\" && oopsGlobal === 5, '<code>oopsGlobal</code> should be a global variable and have a value of <code>5</code>');"
+          "text":
+            "<code>oopsGlobal</code> should be a global variable and have a value of <code>5</code>",
+          "testString":
+            "assert(typeof oopsGlobal != \"undefined\" && oopsGlobal === 5, '<code>oopsGlobal</code> should be a global variable and have a value of <code>5</code>');"
         }
       ],
       "challengeType": 1,
@@ -3201,7 +3312,7 @@
       "description": [
         "Variables which are declared within a function, as well as the function parameters have <dfn>local</dfn> scope. That means, they are only visible within that function.",
         "Here is a function <code>myTest</code> with a local variable called <code>loc</code>.",
-        "<blockquote>function myTest() {<br>  var loc = \"foo\";<br>  console.log(loc);<br>}<br>myTest(); // logs \"foo\"<br>console.log(loc); // loc is not defined</blockquote>",
+        "<blockquote>function myTest() {<br>&nbsp;&nbsp;var loc = \"foo\";<br>&nbsp;&nbsp;console.log(loc);<br>}<br>myTest(); // logs \"foo\"<br>console.log(loc); // loc is not defined</blockquote>",
         "<code>loc</code> is not defined outside of the function.",
         "<hr>",
         "Declare a local variable <code>myVar</code> inside <code>myLocalScope</code>. Run the tests and then follow the instructions commented out in the editor.",
@@ -3214,11 +3325,13 @@
       "tests": [
         {
           "text": "No global <code>myVar</code> variable",
-          "testString": "assert(typeof myVar === 'undefined', 'No global <code>myVar</code> variable');"
+          "testString":
+            "assert(typeof myVar === 'undefined', 'No global <code>myVar</code> variable');"
         },
         {
           "text": "Add a local <code>myVar</code> variable",
-          "testString": "assert(/var\\s+myVar/.test(code), 'Add a local <code>myVar</code> variable');"
+          "testString":
+            "assert(/var\\s+myVar/.test(code), 'Add a local <code>myVar</code> variable');"
         }
       ],
       "challengeType": 1,
@@ -3228,7 +3341,7 @@
           "description": [
             "Las variables que son declaradas dentro de una función, así como los parámetros de la función tienen alcance <dfn>local</dfn>. Eso significa que solo son visibles dentro de esa función.",
             "Aquí está una función <code>myTest</code> con una variable local llamada <code>loc</code>.",
-            "<blockquote>function myTest() {<br>  var loc = \"foo\";<br>  console.log(loc);<br>}<br>myTest(); // \"foo\"<br>console.log(loc); // \"undefined\"</blockquote>",
+            "<blockquote>function myTest() {<br>&nbsp;&nbsp;var loc = \"foo\";<br>&nbsp;&nbsp;console.log(loc);<br>}<br>myTest(); // \"foo\"<br>console.log(loc); // \"undefined\"</blockquote>",
             "<code>loc</code> no está definida fuera de la función.",
             "<h4>Instrucciones</h4>",
             "Declara una variable local <code>myVar</code> dentro de <code>myLocalScope</code>"
@@ -3289,7 +3402,7 @@
       "description": [
         "It is possible to have both <dfn>local</dfn> and <dfn>global</dfn> variables with the same name. When you do this, the <code>local</code> variable takes precedence over the <code>global</code> variable.",
         "In this example:",
-        "<blockquote>var someVar = \"Hat\";<br>function myFun() {<br>  var someVar = \"Head\";<br>  return someVar;<br>}</blockquote>",
+        "<blockquote>var someVar = \"Hat\";<br>function myFun() {<br>&nbsp;&nbsp;var someVar = \"Head\";<br>&nbsp;&nbsp;return someVar;<br>}</blockquote>",
         "The function <code>myFun</code> will return <code>\"Head\"</code> because the <code>local</code> version of the variable is present.",
         "<hr>",
         "Add a local variable to <code>myOutfit</code> function to override the value of <code>outerWear</code> with <code>\"sweater\"</code>."
@@ -3300,16 +3413,21 @@
       ],
       "tests": [
         {
-          "text": "Do not change the value of the global <code>outerWear</code>",
-          "testString": "assert(outerWear === \"T-Shirt\", 'Do not change the value of the global <code>outerWear</code>');"
+          "text":
+            "Do not change the value of the global <code>outerWear</code>",
+          "testString":
+            "assert(outerWear === \"T-Shirt\", 'Do not change the value of the global <code>outerWear</code>');"
         },
         {
-          "text": "<code>myOutfit</code> should return <code>\"sweater\"</code>",
-          "testString": "assert(myOutfit() === \"sweater\", '<code>myOutfit</code> should return <code>\"sweater\"</code>');"
+          "text":
+            "<code>myOutfit</code> should return <code>\"sweater\"</code>",
+          "testString":
+            "assert(myOutfit() === \"sweater\", '<code>myOutfit</code> should return <code>\"sweater\"</code>');"
         },
         {
           "text": "Do not change the return statement",
-          "testString": "assert(/return outerWear/.test(code), 'Do not change the return statement');"
+          "testString":
+            "assert(/return outerWear/.test(code), 'Do not change the return statement');"
         }
       ],
       "challengeType": 1,
@@ -3319,7 +3437,7 @@
           "description": [
             "Es posible tener variables <dfn>locales</dfn> y <dfn>globales</dfn> con el mismo nombre. Cuando tu haces esto, la variable <code>local</code> toma precedencia sobre la variable <code>global</code>.",
             "En este ejemplo:",
-            "<blockquote>var algunaVar = \"Sombrero\";<br>function miFun() {<br>  var algunaVar = \"Cabeza\";<br>  return algunaVar;<br>}</blockquote>",
+            "<blockquote>var algunaVar = \"Sombrero\";<br>function miFun() {<br>&nbsp;&nbsp;var algunaVar = \"Cabeza\";<br>&nbsp;&nbsp;return algunaVar;<br>}</blockquote>",
             "La función <code>miFun</code> regresará <code>\"Cabeza\"</code> porque la versión <code>local</code> de la variable tiene precedencia.",
             "<h4>Instrucciones</h4>",
             "Agrega una variable local a <code>myOutfit</code> para sobreescribir el valor de <code>outerWear</code> con <code>\"sweater\"</code>."
@@ -3357,7 +3475,7 @@
       "description": [
         "We can pass values into a function with <dfn>arguments</dfn>. You can use a <code>return</code> statement to send a value back out of a function.",
         "<strong>Example</strong>",
-        "<blockquote>function plusThree(num) {<br>  return num + 3;<br>}<br>var answer = plusThree(5); // 8</blockquote>",
+        "<blockquote>function plusThree(num) {<br>&nbsp;&nbsp;return num + 3;<br>}<br>var answer = plusThree(5); // 8</blockquote>",
         "<code>plusThree</code> takes an <dfn>argument</dfn> for <code>num</code> and returns a value equal to <code>num + 3</code>.",
         "<hr>",
         "Create a function <code>timesFive</code> that accepts one argument, multiplies it by <code>5</code>, and returns the new value. See the last line in the editor for an example of how you can test your <code>timesFive</code> function."
@@ -3369,23 +3487,29 @@
       "tests": [
         {
           "text": "<code>timesFive</code> should be a function",
-          "testString": "assert(typeof timesFive === 'function', '<code>timesFive</code> should be a function');"
+          "testString":
+            "assert(typeof timesFive === 'function', '<code>timesFive</code> should be a function');"
         },
         {
-          "text": "function <code>timesFive</code> should be called with a number",
-          "testString": "assert(code.match(/timesFive\\(\\s*\\d+\\s*\\)/g), 'function <code>timesFive</code> should be called with a number');"
+          "text":
+            "function <code>timesFive</code> should be called with a number",
+          "testString":
+            "assert(code.match(/timesFive\\(\\s*\\d+\\s*\\)/g), 'function <code>timesFive</code> should be called with a number');"
         },
         {
           "text": "<code>timesFive(5)</code> should return <code>25</code>",
-          "testString": "assert(timesFive(5) === 25, '<code>timesFive(5)</code> should return <code>25</code>');"
+          "testString":
+            "assert(timesFive(5) === 25, '<code>timesFive(5)</code> should return <code>25</code>');"
         },
         {
           "text": "<code>timesFive(2)</code> should return <code>10</code>",
-          "testString": "assert(timesFive(2) === 10, '<code>timesFive(2)</code> should return <code>10</code>');"
+          "testString":
+            "assert(timesFive(2) === 10, '<code>timesFive(2)</code> should return <code>10</code>');"
         },
         {
           "text": "<code>timesFive(0)</code> should return <code>0</code>",
-          "testString": "assert(timesFive(0) === 0, '<code>timesFive(0)</code> should return <code>0</code>');"
+          "testString":
+            "assert(timesFive(0) === 0, '<code>timesFive(0)</code> should return <code>0</code>');"
         }
       ],
       "challengeType": 1,
@@ -3395,7 +3519,7 @@
           "description": [
             "Podemos pasar valores a una función mediante los <dfn>argumentos</dfn>. Puedes usar una sentencia <code>return</code> para enviar un valor de vuelta de una función.",
             "<strong>Ejemplo</strong>",
-            "<blockquote>function masTres(num) {<br>  return num + 3;<br>}<br>var respuesta = masTres(5); // 8</blockquote>",
+            "<blockquote>function masTres(num) {<br>&nbsp;&nbsp;return num + 3;<br>}<br>var respuesta = masTres(5); // 8</blockquote>",
             "<code>masTres</code> toma un <dfn>argumento</dfn> que es <code>num</code> y retorna un valor igual a <code>num + 3</code>.",
             "<h4>Instrucciones</h4>",
             "Crea una función <code>timesFive</code> que acepte un argumento, lo multiplique por <code>5</code> y retorne el nuevo valor."
@@ -3430,31 +3554,35 @@
       "description": [
         "A function can include the <code>return</code> statement but it does not have to. In the case that the function doesn't have a <code>return</code> statement, when you call it, the function processes the inner code but the returned value is <code>undefined</code>.",
         "<strong>Example</strong>",
-        "<blockquote>var sum = 0;<br>function addSum(num) {<br>  sum = sum + num;<br>}<br>var returnedValue = addSum(3); // sum will be modified but returned value is undefined</blockquote>",
+        "<blockquote>var sum = 0;<br>function addSum(num) {<br>&nbsp;&nbsp;sum = sum + num;<br>}<br>var returnedValue = addSum(3); // sum will be modified but returned value is undefined</blockquote>",
         "<code>addSum</code> is a function without a <code>return</code> statement. The function will change the global <code>sum</code> variable but the returned value of the function is <code>undefined</code>",
         "<hr>",
         "Create a function <code>addFive</code> without any arguments. This function adds 5 to the <code>sum</code> variable, but its returned value is <code>undefined</code>."
       ],
       "releasedOn": "August 11, 2017",
-      "solutions": [
-        "function addFive() {\n sum = sum + 5;\n}"
-      ],
+      "solutions": ["function addFive() {\n sum = sum + 5;\n}"],
       "tests": [
         {
           "text": "<code>addFive</code> should be a function",
-          "testString": "assert(typeof addFive === 'function', '<code>addFive</code> should be a function');"
+          "testString":
+            "assert(typeof addFive === 'function', '<code>addFive</code> should be a function');"
         },
         {
           "text": "<code>sum</code> should be equal to 8",
-          "testString": "assert(sum === 8, '<code>sum</code> should be equal to 8');"
+          "testString":
+            "assert(sum === 8, '<code>sum</code> should be equal to 8');"
         },
         {
-          "text": "Returned value from <code>addFive</code> should be <code>undefined</code>",
-          "testString": "assert(addFive() === undefined, 'Returned value from <code>addFive</code> should be <code>undefined</code>');"
+          "text":
+            "Returned value from <code>addFive</code> should be <code>undefined</code>",
+          "testString":
+            "assert(addFive() === undefined, 'Returned value from <code>addFive</code> should be <code>undefined</code>');"
         },
         {
-          "text": "Inside of your functions, add 5 to the <code>sum</code> variable",
-          "testString": "assert(code.match(/(sum\\s*\\=\\s*sum\\s*\\+\\s*5)|(sum\\s*\\+\\=\\s*5)/g).length === 1, 'Inside of your functions, add 5 to the <code>sum</code> variable');"
+          "text":
+            "Inside of your functions, add 5 to the <code>sum</code> variable",
+          "testString":
+            "assert(code.match(/(sum\\s*\\=\\s*sum\\s*\\+\\s*5)|(sum\\s*\\+\\=\\s*5)/g).length === 1, 'Inside of your functions, add 5 to the <code>sum</code> variable');"
         }
       ],
       "challengeType": 1,
@@ -3505,12 +3633,16 @@
       ],
       "tests": [
         {
-          "text": "<code>processed</code> should have a value of <code>2</code>",
-          "testString": "assert(processed === 2, '<code>processed</code> should have a value of <code>2</code>');"
+          "text":
+            "<code>processed</code> should have a value of <code>2</code>",
+          "testString":
+            "assert(processed === 2, '<code>processed</code> should have a value of <code>2</code>');"
         },
         {
-          "text": "You should assign <code>processArg</code> to <code>processed</code>",
-          "testString": "assert(/processed\\s*=\\s*processArg\\(\\s*7\\s*\\)\\s*;/.test(code), 'You should assign <code>processArg</code> to <code>processed</code>');"
+          "text":
+            "You should assign <code>processArg</code> to <code>processed</code>",
+          "testString":
+            "assert(/processed\\s*=\\s*processArg\\(\\s*7\\s*\\)\\s*;/.test(code), 'You should assign <code>processArg</code> to <code>processed</code>');"
         }
       ],
       "challengeType": 1,
@@ -3527,7 +3659,8 @@
           ]
         }
       },
-      "guideUrl": "https://guide.freecodecamp.org/certificates/assignment-with-a-returned-value",
+      "guideUrl":
+        "https://guide.freecodecamp.org/certificates/assignment-with-a-returned-value",
       "files": {
         "indexjs": {
           "key": "indexjs",
@@ -3555,9 +3688,7 @@
             ""
           ],
           "head": [],
-          "tail": [
-            "(function(){return \"processed = \" + processed})();"
-          ]
+          "tail": ["(function(){return \"processed = \" + processed})();"]
         }
       }
     },
@@ -3577,23 +3708,31 @@
       "tests": [
         {
           "text": "<code>nextInLine([], 5)</code> should return a number.",
-          "testString": "assert.isNumber(nextInLine([],5), '<code>nextInLine([], 5)</code> should return a number.');"
+          "testString":
+            "assert.isNumber(nextInLine([],5), '<code>nextInLine([], 5)</code> should return a number.');"
         },
         {
           "text": "<code>nextInLine([], 1)</code> should return <code>1</code>",
-          "testString": "assert(nextInLine([],1) === 1, '<code>nextInLine([], 1)</code> should return <code>1</code>');"
+          "testString":
+            "assert(nextInLine([],1) === 1, '<code>nextInLine([], 1)</code> should return <code>1</code>');"
         },
         {
-          "text": "<code>nextInLine([2], 1)</code> should return <code>2</code>",
-          "testString": "assert(nextInLine([2],1) === 2, '<code>nextInLine([2], 1)</code> should return <code>2</code>');"
+          "text":
+            "<code>nextInLine([2], 1)</code> should return <code>2</code>",
+          "testString":
+            "assert(nextInLine([2],1) === 2, '<code>nextInLine([2], 1)</code> should return <code>2</code>');"
         },
         {
-          "text": "<code>nextInLine([5,6,7,8,9], 1)</code> should return <code>5</code>",
-          "testString": "assert(nextInLine([5,6,7,8,9],1) === 5, '<code>nextInLine([5,6,7,8,9], 1)</code> should return <code>5</code>');"
+          "text":
+            "<code>nextInLine([5,6,7,8,9], 1)</code> should return <code>5</code>",
+          "testString":
+            "assert(nextInLine([5,6,7,8,9],1) === 5, '<code>nextInLine([5,6,7,8,9], 1)</code> should return <code>5</code>');"
         },
         {
-          "text": "After <code>nextInLine(testArr, 10)</code>, <code>testArr[4]</code> should be <code>10</code>",
-          "testString": "nextInLine(testArr, 10); assert(testArr[4] === 10, 'After <code>nextInLine(testArr, 10)</code>, <code>testArr[4]</code> should be <code>10</code>');"
+          "text":
+            "After <code>nextInLine(testArr, 10)</code>, <code>testArr[4]</code> should be <code>10</code>",
+          "testString":
+            "nextInLine(testArr, 10); assert(testArr[4] === 10, 'After <code>nextInLine(testArr, 10)</code>, <code>testArr[4]</code> should be <code>10</code>');"
         }
       ],
       "challengeType": 1,
@@ -3670,12 +3809,15 @@
       ],
       "tests": [
         {
-          "text": "The <code>welcomeToBooleans()</code> function should return a boolean &#40;true/false&#41; value.",
-          "testString": "assert(typeof welcomeToBooleans() === 'boolean', 'The <code>welcomeToBooleans()</code> function should return a boolean &#40;true/false&#41; value.');"
+          "text":
+            "The <code>welcomeToBooleans()</code> function should return a boolean &#40;true/false&#41; value.",
+          "testString":
+            "assert(typeof welcomeToBooleans() === 'boolean', 'The <code>welcomeToBooleans()</code> function should return a boolean &#40;true/false&#41; value.');"
         },
         {
           "text": "<code>welcomeToBooleans()</code> should return true.",
-          "testString": "assert(welcomeToBooleans() === true, '<code>welcomeToBooleans()</code> should return true.');"
+          "testString":
+            "assert(welcomeToBooleans() === true, '<code>welcomeToBooleans()</code> should return true.');"
         }
       ],
       "challengeType": 1,
@@ -3706,9 +3848,7 @@
             "}"
           ],
           "head": [],
-          "tail": [
-            "welcomeToBooleans();"
-          ]
+          "tail": ["welcomeToBooleans();"]
         }
       }
     },
@@ -3719,9 +3859,9 @@
         "<code>If</code> statements are used to make decisions in code. The keyword <code>if</code> tells JavaScript to execute the code in the curly braces under certain conditions, defined in the parentheses. These conditions are known as <code>Boolean</code> conditions and they may only be <code>true</code> or <code>false</code>.",
         "When the condition evaluates to <code>true</code>, the program executes the statement inside the curly braces. When the Boolean condition evaluates to <code>false</code>, the statement inside the curly braces will not execute.",
         "<strong>Pseudocode</strong>",
-        "<blockquote>if (<i>condition is true</i>) {<br>  <i>statement is executed</i><br>}</blockquote>",
+        "<blockquote>if (<i>condition is true</i>) {<br>&nbsp;&nbsp;<i>statement is executed</i><br>}</blockquote>",
         "<strong>Example</strong>",
-        "<blockquote>function test (myCondition) {<br>  if (myCondition) {<br>     return \"It was true\";<br>  }<br>  return \"It was false\";<br>}<br>test(true);  // returns \"It was true\"<br>test(false); // returns \"It was false\"</blockquote>",
+        "<blockquote>function test (myCondition) {<br>&nbsp;&nbsp;if (myCondition) {<br>&nbsp;&nbsp;&nbsp;&nbsp; return \"It was true\";<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;return \"It was false\";<br>}<br>test(true);  // returns \"It was true\"<br>test(false); // returns \"It was false\"</blockquote>",
         "When <code>test</code> is called with a value of <code>true</code>, the <code>if</code> statement evaluates <code>myCondition</code> to see if it is <code>true</code> or not. Since it is <code>true</code>, the function returns <code>\"It was true\"</code>. When we call <code>test</code> with a value of <code>false</code>, <code>myCondition</code> is <em>not</em> <code>true</code> and the statement in the curly braces is not executed and the function returns <code>\"It was false\"</code>.",
         "<hr>",
         "Create an <code>if</code> statement inside the function to return <code>\"Yes, that was true\"</code> if the parameter <code>wasThatTrue</code> is <code>true</code> and return <code>\"No, that was false\"</code> otherwise."
@@ -3732,23 +3872,30 @@
       "tests": [
         {
           "text": "<code>trueOrFalse</code> should be a function",
-          "testString": "assert(typeof trueOrFalse === \"function\", '<code>trueOrFalse</code> should be a function');"
+          "testString":
+            "assert(typeof trueOrFalse === \"function\", '<code>trueOrFalse</code> should be a function');"
         },
         {
           "text": "<code>trueOrFalse(true)</code> should return a string",
-          "testString": "assert(typeof trueOrFalse(true) === \"string\", '<code>trueOrFalse(true)</code> should return a string');"
+          "testString":
+            "assert(typeof trueOrFalse(true) === \"string\", '<code>trueOrFalse(true)</code> should return a string');"
         },
         {
           "text": "<code>trueOrFalse(false)</code> should return a string",
-          "testString": "assert(typeof trueOrFalse(false) === \"string\", '<code>trueOrFalse(false)</code> should return a string');"
+          "testString":
+            "assert(typeof trueOrFalse(false) === \"string\", '<code>trueOrFalse(false)</code> should return a string');"
         },
         {
-          "text": "<code>trueOrFalse(true)</code> should return \"Yes, that was true\"",
-          "testString": "assert(trueOrFalse(true) === \"Yes, that was true\", '<code>trueOrFalse(true)</code> should return \"Yes, that was true\"');"
+          "text":
+            "<code>trueOrFalse(true)</code> should return \"Yes, that was true\"",
+          "testString":
+            "assert(trueOrFalse(true) === \"Yes, that was true\", '<code>trueOrFalse(true)</code> should return \"Yes, that was true\"');"
         },
         {
-          "text": "<code>trueOrFalse(false)</code> should return \"No, that was false\"",
-          "testString": "assert(trueOrFalse(false) === \"No, that was false\", '<code>trueOrFalse(false)</code> should return \"No, that was false\"');"
+          "text":
+            "<code>trueOrFalse(false)</code> should return \"No, that was false\"",
+          "testString":
+            "assert(trueOrFalse(false) === \"No, that was false\", '<code>trueOrFalse(false)</code> should return \"No, that was false\"');"
         }
       ],
       "challengeType": 1,
@@ -3809,10 +3956,10 @@
       "description": [
         "There are many <dfn>Comparison Operators</dfn> in JavaScript. All of these operators return a boolean <code>true</code> or <code>false</code> value.",
         "The most basic operator is the equality operator <code>==</code>. The equality operator compares two values and returns <code>true</code> if they're equivalent or <code>false</code> if they are not. Note that equality is different from assignment (<code>=</code>), which assigns the value at the right of the operator to a variable in the left.",
-        "<blockquote>function equalityTest(myVal) {<br>  if (myVal == 10) {<br>     return \"Equal\";<br>  }<br>  return \"Not Equal\";<br>}</blockquote>",
+        "<blockquote>function equalityTest(myVal) {<br>&nbsp;&nbsp;if (myVal == 10) {<br>&nbsp;&nbsp;&nbsp;&nbsp; return \"Equal\";<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;return \"Not Equal\";<br>}</blockquote>",
         "If <code>myVal</code> is equal to <code>10</code>, the equality operator returns <code>true</code>, so the code in the curly braces will execute, and the function will return <code>\"Equal\"</code>. Otherwise, the function will return <code>\"Not Equal\"</code>.",
         "In order for JavaScript to compare two different <code>data types</code> (for example, <code>numbers</code> and <code>strings</code>), it must convert one type to another. This is known as \"Type Coercion\". Once it does, however, it can compare terms as follows:",
-        "<blockquote>   1   ==  1    // true<br>   1   ==  2    // false<br>   1   == '1'   // true<br>  \"3\"  ==  3    // true</blockquote>",
+        "<blockquote>1   ==  1    // true<br>1   ==  2    // false<br>1   == '1'   // true<br>\"3\"  ==  3    // true</blockquote>",
         "<hr>",
         "Add the <code>equality operator</code> to the indicated line so that the function will return \"Equal\" when <code>val</code> is equivalent to <code>12</code>"
       ],
@@ -3823,19 +3970,23 @@
       "tests": [
         {
           "text": "<code>testEqual(10)</code> should return \"Not Equal\"",
-          "testString": "assert(testEqual(10) === \"Not Equal\", '<code>testEqual(10)</code> should return \"Not Equal\"');"
+          "testString":
+            "assert(testEqual(10) === \"Not Equal\", '<code>testEqual(10)</code> should return \"Not Equal\"');"
         },
         {
           "text": "<code>testEqual(12)</code> should return \"Equal\"",
-          "testString": "assert(testEqual(12) === \"Equal\", '<code>testEqual(12)</code> should return \"Equal\"');"
+          "testString":
+            "assert(testEqual(12) === \"Equal\", '<code>testEqual(12)</code> should return \"Equal\"');"
         },
         {
           "text": "<code>testEqual(\"12\")</code> should return \"Equal\"",
-          "testString": "assert(testEqual(\"12\") === \"Equal\", '<code>testEqual(\"12\")</code> should return \"Equal\"');"
+          "testString":
+            "assert(testEqual(\"12\") === \"Equal\", '<code>testEqual(\"12\")</code> should return \"Equal\"');"
         },
         {
           "text": "You should use the <code>==</code> operator",
-          "testString": "assert(code.match(/==/g) && !code.match(/===/g), 'You should use the <code>==</code> operator');"
+          "testString":
+            "assert(code.match(/==/g) && !code.match(/===/g), 'You should use the <code>==</code> operator');"
         }
       ],
       "challengeType": 1,
@@ -3845,10 +3996,10 @@
           "description": [
             "Hay muchos <dfn>Operadores de Comparación</dfn> en JavaScript. Todos estos operadores retornan un valor booleano <code>true</code>(verdadero) o <code>false</code>(falso).",
             "El operador más básico es el operador de igualdad <code>==</code>. El operador de igualdad compara dos valores y retorna <code>true</code> si son equivalentes o <code>false</code> si no lo son. Nota que la igualdad es diferente de la asignación (<code>=</code>), la cual asigna el valor a la derecha del operador a la variable en la izquierda.",
-            "<blockquote>function pruebaIgualdad(miVal) {<br>  if (miVal == 10) {<br>     return \"Igual\";<br>  }<br>  return \"No Es Igual\";<br>}</blockquote>",
+            "<blockquote>function pruebaIgualdad(miVal) {<br>&nbsp;&nbsp;if (miVal == 10) {<br>&nbsp;&nbsp;&nbsp;&nbsp; return \"Igual\";<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;return \"No Es Igual\";<br>}</blockquote>",
             "Si <code>miVal</code> es igual a <code>10</code>, el operador de igualdad retornará <code>true</code>(verdadero), así el código entre llaves será ejecutado y la función retornará <code>\"Equal\"</code>. De otra manera, la función retornará <code>\"Not Equal\"</code>.",
             "Para que JavaScript pueda comparar dos <code>tipos de datos</code> diferentes (por ejemplo, <code>números</code> y <code>cadenas de texto</code>), debe convertir un tipo a otro. Una vez que lo hace, sin embargo, puede comparar términos de la siguiente manera:",
-            "<blockquote>   1   ==  1    // true<br>   1   ==  2    // false<br>   1   == '1'   // true<br>  \"3\"  ==  3    // true</blockquote>",
+            "<blockquote>1   ==  1    // true<br>1   ==  2    // false<br>1   == '1'   // true<br>\"3\"  ==  3    // true</blockquote>",
             "<h4>Instrucciones</h4>",
             "Agrega el <code>operador de igualdad</code> a la línea indicada de manera que la función retornará \"Equal\" cuando <code>val</code> sea equivalente a <code>12</code>"
           ]
@@ -3895,19 +4046,23 @@
       "tests": [
         {
           "text": "<code>testStrict(10)</code> should return \"Not Equal\"",
-          "testString": "assert(testStrict(10) === \"Not Equal\", '<code>testStrict(10)</code> should return \"Not Equal\"');"
+          "testString":
+            "assert(testStrict(10) === \"Not Equal\", '<code>testStrict(10)</code> should return \"Not Equal\"');"
         },
         {
           "text": "<code>testStrict(7)</code> should return \"Equal\"",
-          "testString": "assert(testStrict(7) === \"Equal\", '<code>testStrict(7)</code> should return \"Equal\"');"
+          "testString":
+            "assert(testStrict(7) === \"Equal\", '<code>testStrict(7)</code> should return \"Equal\"');"
         },
         {
           "text": "<code>testStrict(\"7\")</code> should return \"Not Equal\"",
-          "testString": "assert(testStrict(\"7\") === \"Not Equal\", '<code>testStrict(\"7\")</code> should return \"Not Equal\"');"
+          "testString":
+            "assert(testStrict(\"7\") === \"Not Equal\", '<code>testStrict(\"7\")</code> should return \"Not Equal\"');"
         },
         {
           "text": "You should use the <code>===</code> operator",
-          "testString": "assert(code.match(/(val\\s*===\\s*\\d+)|(\\d+\\s*===\\s*val)/g).length > 0, 'You should use the <code>===</code> operator');"
+          "testString":
+            "assert(code.match(/(val\\s*===\\s*\\d+)|(\\d+\\s*===\\s*val)/g).length > 0, 'You should use the <code>===</code> operator');"
         }
       ],
       "challengeType": 1,
@@ -3965,16 +4120,21 @@
       ],
       "tests": [
         {
-          "text": "<code>compareEquality(10, \"10\")</code> should return \"Not Equal\"",
-          "testString": "assert(compareEquality(10, \"10\") === \"Not Equal\", '<code>compareEquality(10, \"10\")</code> should return \"Not Equal\"');"
+          "text":
+            "<code>compareEquality(10, \"10\")</code> should return \"Not Equal\"",
+          "testString":
+            "assert(compareEquality(10, \"10\") === \"Not Equal\", '<code>compareEquality(10, \"10\")</code> should return \"Not Equal\"');"
         },
         {
-          "text": "<code>compareEquality(\"20\", 20)</code> should return \"Not Equal\"",
-          "testString": "assert(compareEquality(\"20\", 20) === \"Not Equal\", '<code>compareEquality(\"20\", 20)</code> should return \"Not Equal\"');"
+          "text":
+            "<code>compareEquality(\"20\", 20)</code> should return \"Not Equal\"",
+          "testString":
+            "assert(compareEquality(\"20\", 20) === \"Not Equal\", '<code>compareEquality(\"20\", 20)</code> should return \"Not Equal\"');"
         },
         {
           "text": "You should use the <code>===</code> operator",
-          "testString": "assert(code.match(/===/g), 'You should use the <code>===</code> operator');"
+          "testString":
+            "assert(code.match(/===/g), 'You should use the <code>===</code> operator');"
         }
       ],
       "challengeType": 1,
@@ -4018,27 +4178,35 @@
       "tests": [
         {
           "text": "<code>testNotEqual(99)</code> should return \"Equal\"",
-          "testString": "assert(testNotEqual(99) === \"Equal\", '<code>testNotEqual(99)</code> should return \"Equal\"');"
+          "testString":
+            "assert(testNotEqual(99) === \"Equal\", '<code>testNotEqual(99)</code> should return \"Equal\"');"
         },
         {
           "text": "<code>testNotEqual(\"99\")</code> should return \"Equal\"",
-          "testString": "assert(testNotEqual(\"99\") === \"Equal\", '<code>testNotEqual(\"99\")</code> should return \"Equal\"');"
+          "testString":
+            "assert(testNotEqual(\"99\") === \"Equal\", '<code>testNotEqual(\"99\")</code> should return \"Equal\"');"
         },
         {
           "text": "<code>testNotEqual(12)</code> should return \"Not Equal\"",
-          "testString": "assert(testNotEqual(12) === \"Not Equal\", '<code>testNotEqual(12)</code> should return \"Not Equal\"');"
+          "testString":
+            "assert(testNotEqual(12) === \"Not Equal\", '<code>testNotEqual(12)</code> should return \"Not Equal\"');"
         },
         {
-          "text": "<code>testNotEqual(\"12\")</code> should return \"Not Equal\"",
-          "testString": "assert(testNotEqual(\"12\") === \"Not Equal\", '<code>testNotEqual(\"12\")</code> should return \"Not Equal\"');"
+          "text":
+            "<code>testNotEqual(\"12\")</code> should return \"Not Equal\"",
+          "testString":
+            "assert(testNotEqual(\"12\") === \"Not Equal\", '<code>testNotEqual(\"12\")</code> should return \"Not Equal\"');"
         },
         {
-          "text": "<code>testNotEqual(\"bob\")</code> should return \"Not Equal\"",
-          "testString": "assert(testNotEqual(\"bob\") === \"Not Equal\", '<code>testNotEqual(\"bob\")</code> should return \"Not Equal\"');"
+          "text":
+            "<code>testNotEqual(\"bob\")</code> should return \"Not Equal\"",
+          "testString":
+            "assert(testNotEqual(\"bob\") === \"Not Equal\", '<code>testNotEqual(\"bob\")</code> should return \"Not Equal\"');"
         },
         {
           "text": "You should use the <code>!=</code> operator",
-          "testString": "assert(code.match(/(?!!==)!=/), 'You should use the <code>!=</code> operator');"
+          "testString":
+            "assert(code.match(/(?!!==)!=/), 'You should use the <code>!=</code> operator');"
         }
       ],
       "challengeType": 1,
@@ -4090,29 +4258,35 @@
       "solutions": [
         "function testStrictNotEqual(val) {\n  if (val !== 17) {\n    return \"Not Equal\";\n  }\n  return \"Equal\";\n}"
       ],
-      "MDNlinks": [
-        "Strict Inequality Operator"
-      ],
+      "MDNlinks": ["Strict Inequality Operator"],
       "tests": [
         {
           "text": "<code>testStrictNotEqual(17)</code> should return \"Equal\"",
-          "testString": "assert(testStrictNotEqual(17) === \"Equal\", '<code>testStrictNotEqual(17)</code> should return \"Equal\"');"
+          "testString":
+            "assert(testStrictNotEqual(17) === \"Equal\", '<code>testStrictNotEqual(17)</code> should return \"Equal\"');"
         },
         {
-          "text": "<code>testStrictNotEqual(\"17\")</code> should return \"Not Equal\"",
-          "testString": "assert(testStrictNotEqual(\"17\") === \"Not Equal\", '<code>testStrictNotEqual(\"17\")</code> should return \"Not Equal\"');"
+          "text":
+            "<code>testStrictNotEqual(\"17\")</code> should return \"Not Equal\"",
+          "testString":
+            "assert(testStrictNotEqual(\"17\") === \"Not Equal\", '<code>testStrictNotEqual(\"17\")</code> should return \"Not Equal\"');"
         },
         {
-          "text": "<code>testStrictNotEqual(12)</code> should return \"Not Equal\"",
-          "testString": "assert(testStrictNotEqual(12) === \"Not Equal\", '<code>testStrictNotEqual(12)</code> should return \"Not Equal\"');"
+          "text":
+            "<code>testStrictNotEqual(12)</code> should return \"Not Equal\"",
+          "testString":
+            "assert(testStrictNotEqual(12) === \"Not Equal\", '<code>testStrictNotEqual(12)</code> should return \"Not Equal\"');"
         },
         {
-          "text": "<code>testStrictNotEqual(\"bob\")</code> should return \"Not Equal\"",
-          "testString": "assert(testStrictNotEqual(\"bob\") === \"Not Equal\", '<code>testStrictNotEqual(\"bob\")</code> should return \"Not Equal\"');"
+          "text":
+            "<code>testStrictNotEqual(\"bob\")</code> should return \"Not Equal\"",
+          "testString":
+            "assert(testStrictNotEqual(\"bob\") === \"Not Equal\", '<code>testStrictNotEqual(\"bob\")</code> should return \"Not Equal\"');"
         },
         {
           "text": "You should use the <code>!==</code> operator",
-          "testString": "assert(code.match(/(val\\s*!==\\s*\\d+)|(\\d+\\s*!==\\s*val)/g).length > 0, 'You should use the <code>!==</code> operator');"
+          "testString":
+            "assert(code.match(/(val\\s*!==\\s*\\d+)|(\\d+\\s*!==\\s*val)/g).length > 0, 'You should use the <code>!==</code> operator');"
         }
       ],
       "challengeType": 1,
@@ -4172,36 +4346,49 @@
       ],
       "tests": [
         {
-          "text": "<code>testGreaterThan(0)</code> should return \"10 or Under\"",
-          "testString": "assert(testGreaterThan(0) === \"10 or Under\", '<code>testGreaterThan(0)</code> should return \"10 or Under\"');"
+          "text":
+            "<code>testGreaterThan(0)</code> should return \"10 or Under\"",
+          "testString":
+            "assert(testGreaterThan(0) === \"10 or Under\", '<code>testGreaterThan(0)</code> should return \"10 or Under\"');"
         },
         {
-          "text": "<code>testGreaterThan(10)</code> should return \"10 or Under\"",
-          "testString": "assert(testGreaterThan(10) === \"10 or Under\", '<code>testGreaterThan(10)</code> should return \"10 or Under\"');"
+          "text":
+            "<code>testGreaterThan(10)</code> should return \"10 or Under\"",
+          "testString":
+            "assert(testGreaterThan(10) === \"10 or Under\", '<code>testGreaterThan(10)</code> should return \"10 or Under\"');"
         },
         {
           "text": "<code>testGreaterThan(11)</code> should return \"Over 10\"",
-          "testString": "assert(testGreaterThan(11) === \"Over 10\", '<code>testGreaterThan(11)</code> should return \"Over 10\"');"
+          "testString":
+            "assert(testGreaterThan(11) === \"Over 10\", '<code>testGreaterThan(11)</code> should return \"Over 10\"');"
         },
         {
           "text": "<code>testGreaterThan(99)</code> should return \"Over 10\"",
-          "testString": "assert(testGreaterThan(99) === \"Over 10\", '<code>testGreaterThan(99)</code> should return \"Over 10\"');"
+          "testString":
+            "assert(testGreaterThan(99) === \"Over 10\", '<code>testGreaterThan(99)</code> should return \"Over 10\"');"
         },
         {
           "text": "<code>testGreaterThan(100)</code> should return \"Over 10\"",
-          "testString": "assert(testGreaterThan(100) === \"Over 10\", '<code>testGreaterThan(100)</code> should return \"Over 10\"');"
+          "testString":
+            "assert(testGreaterThan(100) === \"Over 10\", '<code>testGreaterThan(100)</code> should return \"Over 10\"');"
         },
         {
-          "text": "<code>testGreaterThan(101)</code> should return \"Over 100\"",
-          "testString": "assert(testGreaterThan(101) === \"Over 100\", '<code>testGreaterThan(101)</code> should return \"Over 100\"');"
+          "text":
+            "<code>testGreaterThan(101)</code> should return \"Over 100\"",
+          "testString":
+            "assert(testGreaterThan(101) === \"Over 100\", '<code>testGreaterThan(101)</code> should return \"Over 100\"');"
         },
         {
-          "text": "<code>testGreaterThan(150)</code> should return \"Over 100\"",
-          "testString": "assert(testGreaterThan(150) === \"Over 100\", '<code>testGreaterThan(150)</code> should return \"Over 100\"');"
+          "text":
+            "<code>testGreaterThan(150)</code> should return \"Over 100\"",
+          "testString":
+            "assert(testGreaterThan(150) === \"Over 100\", '<code>testGreaterThan(150)</code> should return \"Over 100\"');"
         },
         {
-          "text": "You should use the <code>&gt;</code> operator at least twice",
-          "testString": "assert(code.match(/val\\s*>\\s*('|\")*\\d+('|\")*/g).length > 1, 'You should use the <code>&gt;</code> operator at least twice');"
+          "text":
+            "You should use the <code>&gt;</code> operator at least twice",
+          "testString":
+            "assert(code.match(/val\\s*>\\s*('|\")*\\d+('|\")*/g).length > 1, 'You should use the <code>&gt;</code> operator at least twice');"
         }
       ],
       "challengeType": 1,
@@ -4261,36 +4448,52 @@
       ],
       "tests": [
         {
-          "text": "<code>testGreaterOrEqual(0)</code> should return \"Less than 10\"",
-          "testString": "assert(testGreaterOrEqual(0) === \"Less than 10\", '<code>testGreaterOrEqual(0)</code> should return \"Less than 10\"');"
+          "text":
+            "<code>testGreaterOrEqual(0)</code> should return \"Less than 10\"",
+          "testString":
+            "assert(testGreaterOrEqual(0) === \"Less than 10\", '<code>testGreaterOrEqual(0)</code> should return \"Less than 10\"');"
         },
         {
-          "text": "<code>testGreaterOrEqual(9)</code> should return \"Less than 10\"",
-          "testString": "assert(testGreaterOrEqual(9) === \"Less than 10\", '<code>testGreaterOrEqual(9)</code> should return \"Less than 10\"');"
+          "text":
+            "<code>testGreaterOrEqual(9)</code> should return \"Less than 10\"",
+          "testString":
+            "assert(testGreaterOrEqual(9) === \"Less than 10\", '<code>testGreaterOrEqual(9)</code> should return \"Less than 10\"');"
         },
         {
-          "text": "<code>testGreaterOrEqual(10)</code> should return \"10 or Over\"",
-          "testString": "assert(testGreaterOrEqual(10) === \"10 or Over\", '<code>testGreaterOrEqual(10)</code> should return \"10 or Over\"');"
+          "text":
+            "<code>testGreaterOrEqual(10)</code> should return \"10 or Over\"",
+          "testString":
+            "assert(testGreaterOrEqual(10) === \"10 or Over\", '<code>testGreaterOrEqual(10)</code> should return \"10 or Over\"');"
         },
         {
-          "text": "<code>testGreaterOrEqual(11)</code> should return \"10 or Over\"",
-          "testString": "assert(testGreaterOrEqual(11) === \"10 or Over\", '<code>testGreaterOrEqual(11)</code> should return \"10 or Over\"');"
+          "text":
+            "<code>testGreaterOrEqual(11)</code> should return \"10 or Over\"",
+          "testString":
+            "assert(testGreaterOrEqual(11) === \"10 or Over\", '<code>testGreaterOrEqual(11)</code> should return \"10 or Over\"');"
         },
         {
-          "text": "<code>testGreaterOrEqual(19)</code> should return \"10 or Over\"",
-          "testString": "assert(testGreaterOrEqual(19) === \"10 or Over\", '<code>testGreaterOrEqual(19)</code> should return \"10 or Over\"');"
+          "text":
+            "<code>testGreaterOrEqual(19)</code> should return \"10 or Over\"",
+          "testString":
+            "assert(testGreaterOrEqual(19) === \"10 or Over\", '<code>testGreaterOrEqual(19)</code> should return \"10 or Over\"');"
         },
         {
-          "text": "<code>testGreaterOrEqual(100)</code> should return \"20 or Over\"",
-          "testString": "assert(testGreaterOrEqual(100) === \"20 or Over\", '<code>testGreaterOrEqual(100)</code> should return \"20 or Over\"');"
+          "text":
+            "<code>testGreaterOrEqual(100)</code> should return \"20 or Over\"",
+          "testString":
+            "assert(testGreaterOrEqual(100) === \"20 or Over\", '<code>testGreaterOrEqual(100)</code> should return \"20 or Over\"');"
         },
         {
-          "text": "<code>testGreaterOrEqual(21)</code> should return \"20 or Over\"",
-          "testString": "assert(testGreaterOrEqual(21) === \"20 or Over\", '<code>testGreaterOrEqual(21)</code> should return \"20 or Over\"');"
+          "text":
+            "<code>testGreaterOrEqual(21)</code> should return \"20 or Over\"",
+          "testString":
+            "assert(testGreaterOrEqual(21) === \"20 or Over\", '<code>testGreaterOrEqual(21)</code> should return \"20 or Over\"');"
         },
         {
-          "text": "You should use the <code>&gt;=</code> operator at least twice",
-          "testString": "assert(code.match(/val\\s*>=\\s*('|\")*\\d+('|\")*/g).length > 1, 'You should use the <code>&gt;=</code> operator at least twice');"
+          "text":
+            "You should use the <code>&gt;=</code> operator at least twice",
+          "testString":
+            "assert(code.match(/val\\s*>=\\s*('|\")*\\d+('|\")*/g).length > 1, 'You should use the <code>&gt;=</code> operator at least twice');"
         }
       ],
       "challengeType": 1,
@@ -4339,7 +4542,7 @@
       "description": [
         "The <dfn>less than</dfn> operator (<code>&lt;</code>) compares the values of two numbers. If the number to the left is less than the number to the right, it returns <code>true</code>. Otherwise, it returns <code>false</code>. Like the equality operator, <dfn>less than</dfn> operator converts data types while comparing.",
         "<strong>Examples</strong>",
-        "<blockquote>  2 &lt; 5  // true<br>'3' &lt; 7  // true<br>  5 &lt; 5  // false<br>  3 &lt; 2  // false<br>'8' &lt; 4  // false</blockquote>",
+        "<blockquote>2 &lt; 5  // true<br>'3' &lt; 7  // true<br>5 &lt; 5  // false<br>3 &lt; 2  // false<br>'8' &lt; 4  // false</blockquote>",
         "<hr>",
         "Add the <code>less than</code> operator to the indicated lines so that the return statements make sense."
       ],
@@ -4350,31 +4553,39 @@
       "tests": [
         {
           "text": "<code>testLessThan(0)</code> should return \"Under 25\"",
-          "testString": "assert(testLessThan(0) === \"Under 25\", '<code>testLessThan(0)</code> should return \"Under 25\"');"
+          "testString":
+            "assert(testLessThan(0) === \"Under 25\", '<code>testLessThan(0)</code> should return \"Under 25\"');"
         },
         {
           "text": "<code>testLessThan(24)</code> should return \"Under 25\"",
-          "testString": "assert(testLessThan(24) === \"Under 25\", '<code>testLessThan(24)</code> should return \"Under 25\"');"
+          "testString":
+            "assert(testLessThan(24) === \"Under 25\", '<code>testLessThan(24)</code> should return \"Under 25\"');"
         },
         {
           "text": "<code>testLessThan(25)</code> should return \"Under 55\"",
-          "testString": "assert(testLessThan(25) === \"Under 55\", '<code>testLessThan(25)</code> should return \"Under 55\"');"
+          "testString":
+            "assert(testLessThan(25) === \"Under 55\", '<code>testLessThan(25)</code> should return \"Under 55\"');"
         },
         {
           "text": "<code>testLessThan(54)</code> should return \"Under 55\"",
-          "testString": "assert(testLessThan(54) === \"Under 55\", '<code>testLessThan(54)</code> should return \"Under 55\"');"
+          "testString":
+            "assert(testLessThan(54) === \"Under 55\", '<code>testLessThan(54)</code> should return \"Under 55\"');"
         },
         {
           "text": "<code>testLessThan(55)</code> should return \"55 or Over\"",
-          "testString": "assert(testLessThan(55) === \"55 or Over\", '<code>testLessThan(55)</code> should return \"55 or Over\"');"
+          "testString":
+            "assert(testLessThan(55) === \"55 or Over\", '<code>testLessThan(55)</code> should return \"55 or Over\"');"
         },
         {
           "text": "<code>testLessThan(99)</code> should return \"55 or Over\"",
-          "testString": "assert(testLessThan(99) === \"55 or Over\", '<code>testLessThan(99)</code> should return \"55 or Over\"');"
+          "testString":
+            "assert(testLessThan(99) === \"55 or Over\", '<code>testLessThan(99)</code> should return \"55 or Over\"');"
         },
         {
-          "text": "You should use the <code>&lt;</code> operator at least twice",
-          "testString": "assert(code.match(/val\\s*<\\s*('|\")*\\d+('|\")*/g).length > 1, 'You should use the <code>&lt;</code> operator at least twice');"
+          "text":
+            "You should use the <code>&lt;</code> operator at least twice",
+          "testString":
+            "assert(code.match(/val\\s*<\\s*('|\")*\\d+('|\")*/g).length > 1, 'You should use the <code>&lt;</code> operator at least twice');"
         }
       ],
       "challengeType": 1,
@@ -4384,7 +4595,7 @@
           "description": [
             "El operador <dfn>menor que</dfn> (<code>&lt;</code>) compara los valores de dos números. Si el número a la izquierda es menor que el número de la derecha, este retorna <code>true</code>(verdadero). De otra manera, este retorna <code>false</code>(falso). Como el operador de igualdad, el operador <dfn>menor que</dfn> convierte tipos de datos mientra compara.",
             "<strong>Ejemplos</strong>",
-            "<blockquote>  2 &lt; 5  // true<br>'3' &lt; 7  // true<br>  5 &lt; 5  // false<br>  3 &lt; 2  // false<br>'8' &lt; 4  // false</blockquote>",
+            "<blockquote>2 &lt; 5  // true<br>'3' &lt; 7  // true<br>5 &lt; 5  // false<br>3 &lt; 2  // false<br>'8' &lt; 4  // false</blockquote>",
             "<h4>Instrucciones</h4>",
             "Agregar el operador <code>menor que</code> a las líneas indicadas de modo que las sentencias de retorno tengan sentido."
           ]
@@ -4422,7 +4633,7 @@
       "description": [
         "The <code>less than or equal to</code> operator (<code>&lt;=</code>) compares the values of two numbers. If the number to the left is less than or equal to the number to the right, it returns <code>true</code>. If the number on the left is greater than the number on the right, it returns <code>false</code>. Like the equality operator, <code>less than or equal to</code> converts data types.",
         "<strong>Examples</strong>",
-        "<blockquote>  4 &lt;= 5  // true<br>'7' &lt;= 7  // true<br>  5 &lt;= 5  // true<br>  3 &lt;= 2  // false<br>'8' &lt;= 4  // false</blockquote>",
+        "<blockquote>4 &lt;= 5  // true<br>'7' &lt;= 7  // true<br>5 &lt;= 5  // true<br>3 &lt;= 2  // false<br>'8' &lt;= 4  // false</blockquote>",
         "<hr>",
         "Add the <code>less than or equal to</code> operator to the indicated lines so that the return statements make sense."
       ],
@@ -4432,36 +4643,52 @@
       ],
       "tests": [
         {
-          "text": "<code>testLessOrEqual(0)</code> should return \"Smaller Than or Equal to 12\"",
-          "testString": "assert(testLessOrEqual(0) === \"Smaller Than or Equal to 12\", '<code>testLessOrEqual(0)</code> should return \"Smaller Than or Equal to 12\"');"
+          "text":
+            "<code>testLessOrEqual(0)</code> should return \"Smaller Than or Equal to 12\"",
+          "testString":
+            "assert(testLessOrEqual(0) === \"Smaller Than or Equal to 12\", '<code>testLessOrEqual(0)</code> should return \"Smaller Than or Equal to 12\"');"
         },
         {
-          "text": "<code>testLessOrEqual(11)</code> should return \"Smaller Than or Equal to 12\"",
-          "testString": "assert(testLessOrEqual(11) === \"Smaller Than or Equal to 12\", '<code>testLessOrEqual(11)</code> should return \"Smaller Than or Equal to 12\"');"
+          "text":
+            "<code>testLessOrEqual(11)</code> should return \"Smaller Than or Equal to 12\"",
+          "testString":
+            "assert(testLessOrEqual(11) === \"Smaller Than or Equal to 12\", '<code>testLessOrEqual(11)</code> should return \"Smaller Than or Equal to 12\"');"
         },
         {
-          "text": "<code>testLessOrEqual(12)</code> should return \"Smaller Than or Equal to 12\"",
-          "testString": "assert(testLessOrEqual(12) === \"Smaller Than or Equal to 12\", '<code>testLessOrEqual(12)</code> should return \"Smaller Than or Equal to 12\"');"
+          "text":
+            "<code>testLessOrEqual(12)</code> should return \"Smaller Than or Equal to 12\"",
+          "testString":
+            "assert(testLessOrEqual(12) === \"Smaller Than or Equal to 12\", '<code>testLessOrEqual(12)</code> should return \"Smaller Than or Equal to 12\"');"
         },
         {
-          "text": "<code>testLessOrEqual(23)</code> should return \"Smaller Than or Equal to 24\"",
-          "testString": "assert(testLessOrEqual(23) === \"Smaller Than or Equal to 24\", '<code>testLessOrEqual(23)</code> should return \"Smaller Than or Equal to 24\"');"
+          "text":
+            "<code>testLessOrEqual(23)</code> should return \"Smaller Than or Equal to 24\"",
+          "testString":
+            "assert(testLessOrEqual(23) === \"Smaller Than or Equal to 24\", '<code>testLessOrEqual(23)</code> should return \"Smaller Than or Equal to 24\"');"
         },
         {
-          "text": "<code>testLessOrEqual(24)</code> should return \"Smaller Than or Equal to 24\"",
-          "testString": "assert(testLessOrEqual(24) === \"Smaller Than or Equal to 24\", '<code>testLessOrEqual(24)</code> should return \"Smaller Than or Equal to 24\"');"
+          "text":
+            "<code>testLessOrEqual(24)</code> should return \"Smaller Than or Equal to 24\"",
+          "testString":
+            "assert(testLessOrEqual(24) === \"Smaller Than or Equal to 24\", '<code>testLessOrEqual(24)</code> should return \"Smaller Than or Equal to 24\"');"
         },
         {
-          "text": "<code>testLessOrEqual(25)</code> should return \"More Than 24\"",
-          "testString": "assert(testLessOrEqual(25) === \"More Than 24\", '<code>testLessOrEqual(25)</code> should return \"More Than 24\"');"
+          "text":
+            "<code>testLessOrEqual(25)</code> should return \"More Than 24\"",
+          "testString":
+            "assert(testLessOrEqual(25) === \"More Than 24\", '<code>testLessOrEqual(25)</code> should return \"More Than 24\"');"
         },
         {
-          "text": "<code>testLessOrEqual(55)</code> should return \"More Than 24\"",
-          "testString": "assert(testLessOrEqual(55) === \"More Than 24\", '<code>testLessOrEqual(55)</code> should return \"More Than 24\"');"
+          "text":
+            "<code>testLessOrEqual(55)</code> should return \"More Than 24\"",
+          "testString":
+            "assert(testLessOrEqual(55) === \"More Than 24\", '<code>testLessOrEqual(55)</code> should return \"More Than 24\"');"
         },
         {
-          "text": "You should use the <code>&lt;=</code> operator at least twice",
-          "testString": "assert(code.match(/val\\s*<=\\s*('|\")*\\d+('|\")*/g).length > 1, 'You should use the <code>&lt;=</code> operator at least twice');"
+          "text":
+            "You should use the <code>&lt;=</code> operator at least twice",
+          "testString":
+            "assert(code.match(/val\\s*<=\\s*('|\")*\\d+('|\")*/g).length > 1, 'You should use the <code>&lt;=</code> operator at least twice');"
         }
       ],
       "challengeType": 1,
@@ -4471,7 +4698,7 @@
           "description": [
             "El operador <code>menor o igual</code> (<code>&lt;=</code>) compara los valores de dos números. Si el número a la izquierda es menor o igual que el número de la derecha, este retorna <code>true</code>(verdadero). Si el número a la izquierda es mayor que el número de la derecha, este retorna <code>false</code>(falso). Al igual que el operador de igualdad, <code>menor o igual</code> convierte tipos de datos.",
             "<strong>Ejemplos</strong>",
-            "<blockquote>  4 &lt;= 5  // true<br>'7' &lt;= 7  // true<br>  5 &lt;= 5  // true<br>  3 &lt;= 2  // false<br>'8' &lt;= 4  // false</blockquote>",
+            "<blockquote>  4 &lt;= 5  // true<br>'7' &lt;= 7  // true<br>&nbsp;&nbsp;5 &lt;= 5  // true<br>&nbsp;&nbsp;3 &lt;= 2  // false<br>'8' &lt;= 4  // false</blockquote>",
             "<h4>Instrucciones</h4>",
             "Agrega el operador <code>menor o igual</code> a las líneas indicadas de modo que las sentencias de retorno tengan sentido."
           ]
@@ -4510,9 +4737,9 @@
       "description": [
         "Sometimes you will need to test more than one thing at a time. The <dfn>logical and</dfn> operator (<code>&&</code>) returns <code>true</code> if and only if the <dfn>operands</dfn> to the left and right of it are true.",
         "The same effect could be achieved by nesting an if statement inside another if:",
-        "<blockquote>if (num > 5) {<br>  if (num < 10) {<br>    return \"Yes\";<br>  }<br>}<br>return \"No\";</blockquote>",
+        "<blockquote>if (num > 5) {<br>&nbsp;&nbsp;if (num < 10) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return \"Yes\";<br>&nbsp;&nbsp;}<br>}<br>return \"No\";</blockquote>",
         "will only return \"Yes\" if <code>num</code> is greater than <code>5</code> and less than <code>10</code>. The same logic can be written as:",
-        "<blockquote>if (num > 5 && num < 10) {<br>  return \"Yes\";<br>}<br>return \"No\";</blockquote>",
+        "<blockquote>if (num > 5 && num < 10) {<br>&nbsp;&nbsp;return \"Yes\";<br>}<br>return \"No\";</blockquote>",
         "<hr>",
         "Combine the two if statements into one statement which will return <code>\"Yes\"</code> if <code>val</code> is less than or equal to <code>50</code> and greater than or equal to <code>25</code>. Otherwise, will return <code>\"No\"</code>."
       ],
@@ -4523,43 +4750,53 @@
       "tests": [
         {
           "text": "You should use the <code>&&</code> operator once",
-          "testString": "assert(code.match(/&&/g).length === 1, 'You should use the <code>&&</code> operator once');"
+          "testString":
+            "assert(code.match(/&&/g).length === 1, 'You should use the <code>&&</code> operator once');"
         },
         {
           "text": "You should only have one <code>if</code> statement",
-          "testString": "assert(code.match(/if/g).length === 1, 'You should only have one <code>if</code> statement');"
+          "testString":
+            "assert(code.match(/if/g).length === 1, 'You should only have one <code>if</code> statement');"
         },
         {
           "text": "<code>testLogicalAnd(0)</code> should return \"No\"",
-          "testString": "assert(testLogicalAnd(0) === \"No\", '<code>testLogicalAnd(0)</code> should return \"No\"');"
+          "testString":
+            "assert(testLogicalAnd(0) === \"No\", '<code>testLogicalAnd(0)</code> should return \"No\"');"
         },
         {
           "text": "<code>testLogicalAnd(24)</code> should return \"No\"",
-          "testString": "assert(testLogicalAnd(24) === \"No\", '<code>testLogicalAnd(24)</code> should return \"No\"');"
+          "testString":
+            "assert(testLogicalAnd(24) === \"No\", '<code>testLogicalAnd(24)</code> should return \"No\"');"
         },
         {
           "text": "<code>testLogicalAnd(25)</code> should return \"Yes\"",
-          "testString": "assert(testLogicalAnd(25) === \"Yes\", '<code>testLogicalAnd(25)</code> should return \"Yes\"');"
+          "testString":
+            "assert(testLogicalAnd(25) === \"Yes\", '<code>testLogicalAnd(25)</code> should return \"Yes\"');"
         },
         {
           "text": "<code>testLogicalAnd(30)</code> should return \"Yes\"",
-          "testString": "assert(testLogicalAnd(30) === \"Yes\", '<code>testLogicalAnd(30)</code> should return \"Yes\"');"
+          "testString":
+            "assert(testLogicalAnd(30) === \"Yes\", '<code>testLogicalAnd(30)</code> should return \"Yes\"');"
         },
         {
           "text": "<code>testLogicalAnd(50)</code> should return \"Yes\"",
-          "testString": "assert(testLogicalAnd(50) === \"Yes\", '<code>testLogicalAnd(50)</code> should return \"Yes\"');"
+          "testString":
+            "assert(testLogicalAnd(50) === \"Yes\", '<code>testLogicalAnd(50)</code> should return \"Yes\"');"
         },
         {
           "text": "<code>testLogicalAnd(51)</code> should return \"No\"",
-          "testString": "assert(testLogicalAnd(51) === \"No\", '<code>testLogicalAnd(51)</code> should return \"No\"');"
+          "testString":
+            "assert(testLogicalAnd(51) === \"No\", '<code>testLogicalAnd(51)</code> should return \"No\"');"
         },
         {
           "text": "<code>testLogicalAnd(75)</code> should return \"No\"",
-          "testString": "assert(testLogicalAnd(75) === \"No\", '<code>testLogicalAnd(75)</code> should return \"No\"');"
+          "testString":
+            "assert(testLogicalAnd(75) === \"No\", '<code>testLogicalAnd(75)</code> should return \"No\"');"
         },
         {
           "text": "<code>testLogicalAnd(80)</code> should return \"No\"",
-          "testString": "assert(testLogicalAnd(80) === \"No\", '<code>testLogicalAnd(80)</code> should return \"No\"');"
+          "testString":
+            "assert(testLogicalAnd(80) === \"No\", '<code>testLogicalAnd(80)</code> should return \"No\"');"
         }
       ],
       "challengeType": 1,
@@ -4569,9 +4806,9 @@
           "description": [
             "A veces necesitarás probar más de una cosa a la vez. El operador <dfn>lógico y</dfn> (<code>&&</code>) retorna <code>true</code>(verdadero) si y solo si los <dfn>operandos</dfn> a la izquierda y derecha de este son verdaderos.",
             "El mismo efecto podría lograrse anidando una sentencia if dentro de otro if:",
-            "<blockquote>if (num > 5) {<br>  if (num < 10) {<br>    return \"Yes\";<br>  }<br>}<br>return \"No\";</blockquote>",
+            "<blockquote>if (num > 5) {<br>&nbsp;&nbsp;if (num < 10) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return \"Yes\";<br>&nbsp;&nbsp;}<br>}<br>return \"No\";</blockquote>",
             "solo retornará \"Yes\" si <code>num</code> está entre <code>6</code> y <code>9</code> (6 y 9 incluidos). La misma lógica puede ser escrita como:",
-            "<blockquote>if (num > 5 && num < 10) {<br>  return \"Yes\";<br>}<br>return \"No\";</blockquote>",
+            "<blockquote>if (num > 5 && num < 10) {<br>&nbsp;&nbsp;return \"Yes\";<br>}<br>return \"No\";</blockquote>",
             "<h4>Instrucciones</h4>",
             "Combina las dos sentencias if dentro de una sentencia la cual retornará <code>\"Yes\"</code> si <code>val</code> es menor o igual a <code>50</code> y mayor o igual a <code>25</code>. De otra manera, retornará <code>\"No\"</code>."
           ]
@@ -4611,9 +4848,9 @@
         "The <dfn>logical or</dfn> operator (<code>||</code>) returns <code>true</code> if either of the <dfn>operands</dfn> is <code>true</code>. Otherwise, it returns <code>false</code>.",
         "The <dfn>logical or</dfn> operator is composed of two pipe symbols (<code>|</code>). This can typically be found between your Backspace and Enter keys.",
         "The pattern below should look familiar from prior waypoints:",
-        "<blockquote>if (num > 10) {<br>  return \"No\";<br>}<br>if (num < 5) {<br>  return \"No\";<br>}<br>return \"Yes\";</blockquote>",
+        "<blockquote>if (num > 10) {<br>&nbsp;&nbsp;return \"No\";<br>}<br>if (num < 5) {<br>&nbsp;&nbsp;return \"No\";<br>}<br>return \"Yes\";</blockquote>",
         "will return \"Yes\" only if <code>num</code> is between <code>5</code> and <code>10</code> (5 and 10 included). The same logic can be written as:",
-        "<blockquote>if (num > 10 || num < 5) {<br>  return \"No\";<br>}<br>return \"Yes\";</blockquote>",
+        "<blockquote>if (num > 10 || num < 5) {<br>&nbsp;&nbsp;return \"No\";<br>}<br>return \"Yes\";</blockquote>",
         "<hr>",
         "Combine the two <code>if</code> statements into one statement which returns <code>\"Outside\"</code> if <code>val</code> is not between <code>10</code> and <code>20</code>, inclusive. Otherwise, return <code>\"Inside\"</code>."
       ],
@@ -4624,43 +4861,53 @@
       "tests": [
         {
           "text": "You should use the <code>||</code> operator once",
-          "testString": "assert(code.match(/\\|\\|/g).length === 1, 'You should use the <code>||</code> operator once');"
+          "testString":
+            "assert(code.match(/\\|\\|/g).length === 1, 'You should use the <code>||</code> operator once');"
         },
         {
           "text": "You should only have one <code>if</code> statement",
-          "testString": "assert(code.match(/if/g).length === 1, 'You should only have one <code>if</code> statement');"
+          "testString":
+            "assert(code.match(/if/g).length === 1, 'You should only have one <code>if</code> statement');"
         },
         {
           "text": "<code>testLogicalOr(0)</code> should return \"Outside\"",
-          "testString": "assert(testLogicalOr(0) === \"Outside\", '<code>testLogicalOr(0)</code> should return \"Outside\"');"
+          "testString":
+            "assert(testLogicalOr(0) === \"Outside\", '<code>testLogicalOr(0)</code> should return \"Outside\"');"
         },
         {
           "text": "<code>testLogicalOr(9)</code> should return \"Outside\"",
-          "testString": "assert(testLogicalOr(9) === \"Outside\", '<code>testLogicalOr(9)</code> should return \"Outside\"');"
+          "testString":
+            "assert(testLogicalOr(9) === \"Outside\", '<code>testLogicalOr(9)</code> should return \"Outside\"');"
         },
         {
           "text": "<code>testLogicalOr(10)</code> should return \"Inside\"",
-          "testString": "assert(testLogicalOr(10) === \"Inside\", '<code>testLogicalOr(10)</code> should return \"Inside\"');"
+          "testString":
+            "assert(testLogicalOr(10) === \"Inside\", '<code>testLogicalOr(10)</code> should return \"Inside\"');"
         },
         {
           "text": "<code>testLogicalOr(15)</code> should return \"Inside\"",
-          "testString": "assert(testLogicalOr(15) === \"Inside\", '<code>testLogicalOr(15)</code> should return \"Inside\"');"
+          "testString":
+            "assert(testLogicalOr(15) === \"Inside\", '<code>testLogicalOr(15)</code> should return \"Inside\"');"
         },
         {
           "text": "<code>testLogicalOr(19)</code> should return \"Inside\"",
-          "testString": "assert(testLogicalOr(19) === \"Inside\", '<code>testLogicalOr(19)</code> should return \"Inside\"');"
+          "testString":
+            "assert(testLogicalOr(19) === \"Inside\", '<code>testLogicalOr(19)</code> should return \"Inside\"');"
         },
         {
           "text": "<code>testLogicalOr(20)</code> should return \"Inside\"",
-          "testString": "assert(testLogicalOr(20) === \"Inside\", '<code>testLogicalOr(20)</code> should return \"Inside\"');"
+          "testString":
+            "assert(testLogicalOr(20) === \"Inside\", '<code>testLogicalOr(20)</code> should return \"Inside\"');"
         },
         {
           "text": "<code>testLogicalOr(21)</code> should return \"Outside\"",
-          "testString": "assert(testLogicalOr(21) === \"Outside\", '<code>testLogicalOr(21)</code> should return \"Outside\"');"
+          "testString":
+            "assert(testLogicalOr(21) === \"Outside\", '<code>testLogicalOr(21)</code> should return \"Outside\"');"
         },
         {
           "text": "<code>testLogicalOr(25)</code> should return \"Outside\"",
-          "testString": "assert(testLogicalOr(25) === \"Outside\", '<code>testLogicalOr(25)</code> should return \"Outside\"');"
+          "testString":
+            "assert(testLogicalOr(25) === \"Outside\", '<code>testLogicalOr(25)</code> should return \"Outside\"');"
         }
       ],
       "challengeType": 1,
@@ -4670,9 +4917,9 @@
           "description": [
             "El operador <dfn>lógico o</dfn> (<code>||</code>) retorna <code>true</code>(verdadero) si cualquiera de los <dfn>operandos</dfn> es <code>true</code>(verdadero). De otra manera, este retorna <code>false</code>(falso).",
             "El patrón de abajo debería ser familiar de los puntos de referencia anteriores:",
-            "<blockquote>if (num > 10) {<br>  return \"No\";<br>}<br>if (num < 5) {<br>  return \"No\";<br>}<br>return \"Yes\";</blockquote>",
+            "<blockquote>if (num > 10) {<br>&nbsp;&nbsp;return \"No\";<br>}<br>if (num < 5) {<br>&nbsp;&nbsp;return \"No\";<br>}<br>return \"Yes\";</blockquote>",
             "retornará \"Yes\" solo si <code>num</code> está entre <code>5</code> y <code>10</code> (5 y 10 incluidos). La misma lógica puede ser escrita como:",
-            "<blockquote>if (num > 10 || num < 5) {<br>  return \"No\";<br>}<br>return \"Yes\";</blockquote>",
+            "<blockquote>if (num > 10 || num < 5) {<br>&nbsp;&nbsp;return \"No\";<br>}<br>return \"Yes\";</blockquote>",
             "<h4>Instrucciones</h4>",
             "Combina las dos sentencias <code>if</code> dentro de una sentencia la cual retorne <code>\"Outside\"</code> si <code>val</code> no está entre <code>10</code> y <code>20</code>, inclusive. De otra manera, retorna <code>\"Inside\"</code>."
           ]
@@ -4712,7 +4959,7 @@
       "title": "Introducing Else Statements",
       "description": [
         "When a condition for an <code>if</code> statement is true, the block of code following it is executed. What about when that condition is false?  Normally nothing would happen. With an <code>else</code> statement, an alternate block of code can be executed.",
-        "<blockquote>if (num > 10) {<br>  return \"Bigger than 10\";<br>} else {<br>  return \"10 or Less\";<br>}</blockquote>",
+        "<blockquote>if (num > 10) {<br>&nbsp;&nbsp;return \"Bigger than 10\";<br>} else {<br>&nbsp;&nbsp;return \"10 or Less\";<br>}</blockquote>",
         "<hr>",
         "Combine the <code>if</code> statements into a single <code>if/else</code> statement."
       ],
@@ -4722,32 +4969,40 @@
       ],
       "tests": [
         {
-          "text": "You should only have one <code>if</code> statement in the editor",
-          "testString": "assert(code.match(/if/g).length === 1, 'You should only have one <code>if</code> statement in the editor');"
+          "text":
+            "You should only have one <code>if</code> statement in the editor",
+          "testString":
+            "assert(code.match(/if/g).length === 1, 'You should only have one <code>if</code> statement in the editor');"
         },
         {
           "text": "You should use an <code>else</code> statement",
-          "testString": "assert(/else/g.test(code), 'You should use an <code>else</code> statement');"
+          "testString":
+            "assert(/else/g.test(code), 'You should use an <code>else</code> statement');"
         },
         {
           "text": "<code>testElse(4)</code> should return \"5 or Smaller\"",
-          "testString": "assert(testElse(4) === \"5 or Smaller\", '<code>testElse(4)</code> should return \"5 or Smaller\"');"
+          "testString":
+            "assert(testElse(4) === \"5 or Smaller\", '<code>testElse(4)</code> should return \"5 or Smaller\"');"
         },
         {
           "text": "<code>testElse(5)</code> should return \"5 or Smaller\"",
-          "testString": "assert(testElse(5) === \"5 or Smaller\", '<code>testElse(5)</code> should return \"5 or Smaller\"');"
+          "testString":
+            "assert(testElse(5) === \"5 or Smaller\", '<code>testElse(5)</code> should return \"5 or Smaller\"');"
         },
         {
           "text": "<code>testElse(6)</code> should return \"Bigger than 5\"",
-          "testString": "assert(testElse(6) === \"Bigger than 5\", '<code>testElse(6)</code> should return \"Bigger than 5\"');"
+          "testString":
+            "assert(testElse(6) === \"Bigger than 5\", '<code>testElse(6)</code> should return \"Bigger than 5\"');"
         },
         {
           "text": "<code>testElse(10)</code> should return \"Bigger than 5\"",
-          "testString": "assert(testElse(10) === \"Bigger than 5\", '<code>testElse(10)</code> should return \"Bigger than 5\"');"
+          "testString":
+            "assert(testElse(10) === \"Bigger than 5\", '<code>testElse(10)</code> should return \"Bigger than 5\"');"
         },
         {
           "text": "Do not change the code above or below the lines.",
-          "testString": "assert(/var result = \"\";/.test(code) && /return result;/.test(code), 'Do not change the code above or below the lines.');"
+          "testString":
+            "assert(/var result = \"\";/.test(code) && /return result;/.test(code), 'Do not change the code above or below the lines.');"
         }
       ],
       "challengeType": 1,
@@ -4756,7 +5011,7 @@
           "title": "Introducción de las sentencias else",
           "description": [
             "Cuando una condición de una sentencia <code>if</code> es verdadera, el siguiente bloque de código es ejecutado. ¿Y cuando esa condición es falsa? Normalmente nada pasaría. Con una sentencia <code>else</code>(además), un bloque alternativo de código puede ser ejecutado.",
-            "<blockquote>if (num > 10) {<br>  return \"Más grande que 10\";<br>} else {<br>  return \"10 o Menos\";<br>}</blockquote>",
+            "<blockquote>if (num > 10) {<br>&nbsp;&nbsp;return \"Más grande que 10\";<br>} else {<br>&nbsp;&nbsp;return \"10 o Menos\";<br>}</blockquote>",
             "<h4>Instrucciones</h4>",
             "Combina las sentencias <code>if</code> dentro de una sola sentencia <code>if/else</code>."
           ]
@@ -4798,7 +5053,7 @@
       "title": "Introducing Else If Statements",
       "description": [
         "If you have multiple conditions that need to be addressed, you can chain <code>if</code> statements together with <code>else if</code> statements.",
-        "<blockquote>if (num > 15) {<br>  return \"Bigger than 15\";<br>} else if (num < 5) {<br>  return \"Smaller than 5\";<br>} else {<br>  return \"Between 5 and 15\";<br>}</blockquote>",
+        "<blockquote>if (num > 15) {<br>&nbsp;&nbsp;return \"Bigger than 15\";<br>} else if (num < 5) {<br>&nbsp;&nbsp;return \"Smaller than 5\";<br>} else {<br>&nbsp;&nbsp;return \"Between 5 and 15\";<br>}</blockquote>",
         "<hr>",
         "Convert the logic to use <code>else if</code> statements."
       ],
@@ -4809,31 +5064,42 @@
       "tests": [
         {
           "text": "You should have at least two <code>else</code> statements",
-          "testString": "assert(code.match(/else/g).length > 1, 'You should have at least two <code>else</code> statements');"
+          "testString":
+            "assert(code.match(/else/g).length > 1, 'You should have at least two <code>else</code> statements');"
         },
         {
           "text": "You should have at least two <code>if</code> statements",
-          "testString": "assert(code.match(/if/g).length > 1, 'You should have at least two <code>if</code> statements');"
+          "testString":
+            "assert(code.match(/if/g).length > 1, 'You should have at least two <code>if</code> statements');"
         },
         {
           "text": "<code>testElseIf(0)</code> should return \"Smaller than 5\"",
-          "testString": "assert(testElseIf(0) === \"Smaller than 5\", '<code>testElseIf(0)</code> should return \"Smaller than 5\"');"
+          "testString":
+            "assert(testElseIf(0) === \"Smaller than 5\", '<code>testElseIf(0)</code> should return \"Smaller than 5\"');"
         },
         {
-          "text": "<code>testElseIf(5)</code> should return \"Between 5 and 10\"",
-          "testString": "assert(testElseIf(5) === \"Between 5 and 10\", '<code>testElseIf(5)</code> should return \"Between 5 and 10\"');"
+          "text":
+            "<code>testElseIf(5)</code> should return \"Between 5 and 10\"",
+          "testString":
+            "assert(testElseIf(5) === \"Between 5 and 10\", '<code>testElseIf(5)</code> should return \"Between 5 and 10\"');"
         },
         {
-          "text": "<code>testElseIf(7)</code> should return \"Between 5 and 10\"",
-          "testString": "assert(testElseIf(7) === \"Between 5 and 10\", '<code>testElseIf(7)</code> should return \"Between 5 and 10\"');"
+          "text":
+            "<code>testElseIf(7)</code> should return \"Between 5 and 10\"",
+          "testString":
+            "assert(testElseIf(7) === \"Between 5 and 10\", '<code>testElseIf(7)</code> should return \"Between 5 and 10\"');"
         },
         {
-          "text": "<code>testElseIf(10)</code> should return \"Between 5 and 10\"",
-          "testString": "assert(testElseIf(10) === \"Between 5 and 10\", '<code>testElseIf(10)</code> should return \"Between 5 and 10\"');"
+          "text":
+            "<code>testElseIf(10)</code> should return \"Between 5 and 10\"",
+          "testString":
+            "assert(testElseIf(10) === \"Between 5 and 10\", '<code>testElseIf(10)</code> should return \"Between 5 and 10\"');"
         },
         {
-          "text": "<code>testElseIf(12)</code> should return \"Greater than 10\"",
-          "testString": "assert(testElseIf(12) === \"Greater than 10\", '<code>testElseIf(12)</code> should return \"Greater than 10\"');"
+          "text":
+            "<code>testElseIf(12)</code> should return \"Greater than 10\"",
+          "testString":
+            "assert(testElseIf(12) === \"Greater than 10\", '<code>testElseIf(12)</code> should return \"Greater than 10\"');"
         }
       ],
       "challengeType": 1,
@@ -4842,7 +5108,7 @@
           "title": "Introducción de las sentencias else if",
           "description": [
             "Si tienes múltiples condiciones que deben abordarse, puedes encadenar sentencias <code>if</code> juntas con sentencias <code>else if</code>.",
-            "<blockquote>if (num > 15) {<br>  return \"Más grande que 15\";<br>} else if (num < 5) {<br>  return \"Más pequeño que 5\";<br>} else {<br>  return \"Entre 5 y 15\";<br>}</blockquote>",
+            "<blockquote>if (num > 15) {<br>&nbsp;&nbsp;return \"Más grande que 15\";<br>} else if (num < 5) {<br>&nbsp;&nbsp;return \"Más pequeño que 5\";<br>} else {<br>&nbsp;&nbsp;return \"Entre 5 y 15\";<br>}</blockquote>",
             "<h4>Instrucciones</h4>",
             "Convierte la lógica para usar sentencias <code>else if</code>."
           ]
@@ -4883,9 +5149,9 @@
         "The function is executed from top to bottom so you will want to be careful of what statement comes first.",
         "Take these two functions as an example.",
         "Here's the first:",
-        "<blockquote>function foo(x) {<br>  if (x < 1) {<br>    return \"Less than one\";<br>  } else if (x < 2) {<br>    return \"Less than two\";<br>  } else {<br>    return \"Greater than or equal to two\";<br>  }<br>}</blockquote>",
+        "<blockquote>function foo(x) {<br>&nbsp;&nbsp;if (x < 1) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return \"Less than one\";<br>&nbsp;&nbsp;} else if (x < 2) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return \"Less than two\";<br>&nbsp;&nbsp;} else {<br>&nbsp;&nbsp;&nbsp;&nbsp;return \"Greater than or equal to two\";<br>&nbsp;&nbsp;}<br>}</blockquote>",
         "And the second just switches the order of the statements:",
-        "<blockquote>function bar(x) {<br>  if (x < 2) {<br>    return \"Less than two\";<br>  } else if (x < 1) {<br>    return \"Less than one\";<br>  } else {<br>    return \"Greater than or equal to two\";<br>  }<br>}</blockquote>",
+        "<blockquote>function bar(x) {<br>&nbsp;&nbsp;if (x < 2) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return \"Less than two\";<br>&nbsp;&nbsp;} else if (x < 1) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return \"Less than one\";<br>&nbsp;&nbsp;} else {<br>&nbsp;&nbsp;&nbsp;&nbsp;return \"Greater than or equal to two\";<br>&nbsp;&nbsp;}<br>}</blockquote>",
         "While these two functions look nearly identical if we pass a number to both we get different outputs.",
         "<blockquote>foo(0) // \"Less than one\"<br>bar(0) // \"Less than two\"</blockquote>",
         "<hr>",
@@ -4897,15 +5163,19 @@
       "tests": [
         {
           "text": "<code>orderMyLogic(4)</code> should return \"Less than 5\"",
-          "testString": "assert(orderMyLogic(4) === \"Less than 5\", '<code>orderMyLogic(4)</code> should return \"Less than 5\"');"
+          "testString":
+            "assert(orderMyLogic(4) === \"Less than 5\", '<code>orderMyLogic(4)</code> should return \"Less than 5\"');"
         },
         {
           "text": "<code>orderMyLogic(6)</code> should return \"Less than 10\"",
-          "testString": "assert(orderMyLogic(6) === \"Less than 10\", '<code>orderMyLogic(6)</code> should return \"Less than 10\"');"
+          "testString":
+            "assert(orderMyLogic(6) === \"Less than 10\", '<code>orderMyLogic(6)</code> should return \"Less than 10\"');"
         },
         {
-          "text": "<code>orderMyLogic(11)</code> should return \"Greater than or equal to 10\"",
-          "testString": "assert(orderMyLogic(11) === \"Greater than or equal to 10\", '<code>orderMyLogic(11)</code> should return \"Greater than or equal to 10\"');"
+          "text":
+            "<code>orderMyLogic(11)</code> should return \"Greater than or equal to 10\"",
+          "testString":
+            "assert(orderMyLogic(11) === \"Greater than or equal to 10\", '<code>orderMyLogic(11)</code> should return \"Greater than or equal to 10\"');"
         }
       ],
       "challengeType": 1,
@@ -4917,9 +5187,9 @@
             "El ciclo es ejecutado de arriba hacia abajo por lo que tendrás que ser cuidadoso de cual sentencia va primero.",
             "Toma estas dos funciones como ejemplo.",
             "Aquí está la primera:",
-            "<blockquote>function foo(x) {<br>  if (x < 1) {<br>    return \"Menor que uno\";<br>  } else if (x < 2) {<br>    return \"Menor que dos\";<br>  } else {<br>    return \"Mayor o igual a dos\";<br>  }<br>}</blockquote>",
+            "<blockquote>function foo(x) {<br>&nbsp;&nbsp;if (x < 1) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return \"Menor que uno\";<br>&nbsp;&nbsp;} else if (x < 2) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return \"Menor que dos\";<br>&nbsp;&nbsp;} else {<br>&nbsp;&nbsp;&nbsp;&nbsp;return \"Mayor o igual a dos\";<br>&nbsp;&nbsp;}<br>}</blockquote>",
             "Y el segundo solo cambia el orden de las sentencias:",
-            "<blockquote>function bar(x) {<br>  if (x < 2) {<br>    return \"Menor que dos\";<br>  } else if (x < 1) {<br>    return \"Menor que uno\";<br>  } else {<br>    return \"Mayor o igual a dos\";<br>  }<br>}</blockquote>",
+            "<blockquote>function bar(x) {<br>&nbsp;&nbsp;if (x < 2) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return \"Menor que dos\";<br>&nbsp;&nbsp;} else if (x < 1) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return \"Menor que uno\";<br>&nbsp;&nbsp;} else {<br>&nbsp;&nbsp;&nbsp;&nbsp;return \"Mayor o igual a dos\";<br>&nbsp;&nbsp;}<br>}</blockquote>",
             "Mientras esas dos funciones parecen casi idénticas, si nosotros pasamos un número a ambas obtendremos diferentes salidas.",
             "<blockquote>foo(0) // \"Menor que uno\"<br>bar(0) // \"Menor que dos\"</blockquote>",
             "<h4>Instrucciones</h4>",
@@ -4956,7 +5226,7 @@
       "title": "Chaining If Else Statements",
       "description": [
         "<code>if/else</code> statements can be chained together for complex logic. Here is <dfn>pseudocode</dfn> of multiple chained <code>if</code> / <code>else if</code> statements:",
-        "<blockquote>if (<em>condition1</em>) {<br>  <em>statement1</em><br>} else if (<em>condition2</em>) {<br>  <em>statement2</em><br>} else if (<em>condition3</em>) {<br>  <em>statement3</em><br>. . .<br>} else {<br>  <em>statementN</em><br>}</blockquote>",
+        "<blockquote>if (<em>condition1</em>) {<br>&nbsp;&nbsp;<em>statement1</em><br>} else if (<em>condition2</em>) {<br>&nbsp;&nbsp;<em>statement2</em><br>} else if (<em>condition3</em>) {<br>&nbsp;&nbsp;<em>statement3</em><br>. . .<br>} else {<br>&nbsp;&nbsp;<em>statementN</em><br>}</blockquote>",
         "<hr>",
         "Write chained <code>if</code>/<code>else if</code> statements to fulfill the following conditions:",
         "<code>num &lt;   5</code> - return \"Tiny\"<br><code>num &lt;  10</code> - return \"Small\"<br><code>num &lt; 15</code> - return \"Medium\"<br><code>num &lt; 20</code> - return \"Large\"<br><code>num >= 20</code>  - return \"Huge\""
@@ -4968,55 +5238,68 @@
       "tests": [
         {
           "text": "You should have at least four <code>else</code> statements",
-          "testString": "assert(code.match(/else/g).length > 3, 'You should have at least four <code>else</code> statements');"
+          "testString":
+            "assert(code.match(/else/g).length > 3, 'You should have at least four <code>else</code> statements');"
         },
         {
           "text": "You should have at least four <code>if</code> statements",
-          "testString": "assert(code.match(/if/g).length > 3, 'You should have at least four <code>if</code> statements');"
+          "testString":
+            "assert(code.match(/if/g).length > 3, 'You should have at least four <code>if</code> statements');"
         },
         {
           "text": "You should have at least one <code>return</code> statement",
-          "testString": "assert(code.match(/return/g).length >= 1, 'You should have at least one <code>return</code> statement');"
+          "testString":
+            "assert(code.match(/return/g).length >= 1, 'You should have at least one <code>return</code> statement');"
         },
         {
           "text": "<code>testSize(0)</code> should return \"Tiny\"",
-          "testString": "assert(testSize(0) === \"Tiny\", '<code>testSize(0)</code> should return \"Tiny\"');"
+          "testString":
+            "assert(testSize(0) === \"Tiny\", '<code>testSize(0)</code> should return \"Tiny\"');"
         },
         {
           "text": "<code>testSize(4)</code> should return \"Tiny\"",
-          "testString": "assert(testSize(4) === \"Tiny\", '<code>testSize(4)</code> should return \"Tiny\"');"
+          "testString":
+            "assert(testSize(4) === \"Tiny\", '<code>testSize(4)</code> should return \"Tiny\"');"
         },
         {
           "text": "<code>testSize(5)</code> should return \"Small\"",
-          "testString": "assert(testSize(5) === \"Small\", '<code>testSize(5)</code> should return \"Small\"');"
+          "testString":
+            "assert(testSize(5) === \"Small\", '<code>testSize(5)</code> should return \"Small\"');"
         },
         {
           "text": "<code>testSize(8)</code> should return \"Small\"",
-          "testString": "assert(testSize(8) === \"Small\", '<code>testSize(8)</code> should return \"Small\"');"
+          "testString":
+            "assert(testSize(8) === \"Small\", '<code>testSize(8)</code> should return \"Small\"');"
         },
         {
           "text": "<code>testSize(10)</code> should return \"Medium\"",
-          "testString": "assert(testSize(10) === \"Medium\", '<code>testSize(10)</code> should return \"Medium\"');"
+          "testString":
+            "assert(testSize(10) === \"Medium\", '<code>testSize(10)</code> should return \"Medium\"');"
         },
         {
           "text": "<code>testSize(14)</code> should return \"Medium\"",
-          "testString": "assert(testSize(14) === \"Medium\", '<code>testSize(14)</code> should return \"Medium\"');"
+          "testString":
+            "assert(testSize(14) === \"Medium\", '<code>testSize(14)</code> should return \"Medium\"');"
         },
         {
           "text": "<code>testSize(15)</code> should return \"Large\"",
-          "testString": "assert(testSize(15) === \"Large\", '<code>testSize(15)</code> should return \"Large\"');"
+          "testString":
+            "assert(testSize(15) === \"Large\", '<code>testSize(15)</code> should return \"Large\"');"
         },
         {
           "text": "<code>testSize(17)</code> should return \"Large\"",
-          "testString": "assert(testSize(17) === \"Large\", '<code>testSize(17)</code> should return \"Large\"');"
+          "testString":
+            "assert(testSize(17) === \"Large\", '<code>testSize(17)</code> should return \"Large\"');"
         },
         {
           "text": "<code>testSize(20)</code> should return \"Huge\"",
-          "testString": "assert(testSize(20) === \"Huge\", '<code>testSize(20)</code> should return \"Huge\"');"
+          "testString":
+            "assert(testSize(20) === \"Huge\", '<code>testSize(20)</code> should return \"Huge\"');"
         },
         {
           "text": "<code>testSize(25)</code> should return \"Huge\"",
-          "testString": "assert(testSize(25) === \"Huge\", '<code>testSize(25)</code> should return \"Huge\"');"
+          "testString":
+            "assert(testSize(25) === \"Huge\", '<code>testSize(25)</code> should return \"Huge\"');"
         }
       ],
       "challengeType": 1,
@@ -5025,7 +5308,7 @@
           "title": "Encadenamiento de sentencias else if",
           "description": [
             "Las sentencias <code>if/else</code>(si/de lo contrario) pueden ser encadenadas juntas por una lógica compleja. Aquí está el <dfn>pseudocódigo</dfn> de múltiples sentencias <code>if</code> / <code>else if</code> encadenadas:",
-            "<blockquote>if (<em>condicion1</em>) {<br>  <em>sentencias1</em><br>} else if (<em>condicion2</em>) {<br>  <em>sentencias2</em><br>} else if (<em>condicion3</em>) {<br>  <em>sentencias3</em><br>. . .<br>} else {<br>  <em>sentenciasN</em><br>}</blockquote>",
+            "<blockquote>if (<em>condicion1</em>) {<br>&nbsp;&nbsp;<em>sentencias1</em><br>} else if (<em>condicion2</em>) {<br>&nbsp;&nbsp;<em>sentencias2</em><br>} else if (<em>condicion3</em>) {<br>&nbsp;&nbsp;<em>sentencias3</em><br>. . .<br>} else {<br>&nbsp;&nbsp;<em>sentenciasN</em><br>}</blockquote>",
             "<h4>Instrucciones</h4>",
             "Escribe sentencias <code>if</code>/<code>else if</code> encadenadas para cumplir las siguientes condiciones:",
             "<code>num &lt;   5</code> - retorna \"Tiny\"<br><code>num &lt;  10</code> - retorna \"Small\"<br><code>num &lt; 15</code> - retorna \"Medium\"<br><code>num &lt; 20</code> - retorna \"Large\"<br><code>num >= 20</code>  - retorna \"Huge\""
@@ -5070,47 +5353,58 @@
       "tests": [
         {
           "text": "<code>golfScore(4, 1)</code> should return \"Hole-in-one!\"",
-          "testString": "assert(golfScore(4, 1) === \"Hole-in-one!\", '<code>golfScore(4, 1)</code> should return \"Hole-in-one!\"');"
+          "testString":
+            "assert(golfScore(4, 1) === \"Hole-in-one!\", '<code>golfScore(4, 1)</code> should return \"Hole-in-one!\"');"
         },
         {
           "text": "<code>golfScore(4, 2)</code> should return \"Eagle\"",
-          "testString": "assert(golfScore(4, 2) === \"Eagle\", '<code>golfScore(4, 2)</code> should return \"Eagle\"');"
+          "testString":
+            "assert(golfScore(4, 2) === \"Eagle\", '<code>golfScore(4, 2)</code> should return \"Eagle\"');"
         },
         {
           "text": "<code>golfScore(5, 2)</code> should return \"Eagle\"",
-          "testString": "assert(golfScore(5, 2) === \"Eagle\", '<code>golfScore(5, 2)</code> should return \"Eagle\"');"
+          "testString":
+            "assert(golfScore(5, 2) === \"Eagle\", '<code>golfScore(5, 2)</code> should return \"Eagle\"');"
         },
         {
           "text": "<code>golfScore(4, 3)</code> should return \"Birdie\"",
-          "testString": "assert(golfScore(4, 3) === \"Birdie\", '<code>golfScore(4, 3)</code> should return \"Birdie\"');"
+          "testString":
+            "assert(golfScore(4, 3) === \"Birdie\", '<code>golfScore(4, 3)</code> should return \"Birdie\"');"
         },
         {
           "text": "<code>golfScore(4, 4)</code> should return \"Par\"",
-          "testString": "assert(golfScore(4, 4) === \"Par\", '<code>golfScore(4, 4)</code> should return \"Par\"');"
+          "testString":
+            "assert(golfScore(4, 4) === \"Par\", '<code>golfScore(4, 4)</code> should return \"Par\"');"
         },
         {
           "text": "<code>golfScore(1, 1)</code> should return \"Hole-in-one!\"",
-          "testString": "assert(golfScore(1, 1) === \"Hole-in-one!\", '<code>golfScore(1, 1)</code> should return \"Hole-in-one!\"');"
+          "testString":
+            "assert(golfScore(1, 1) === \"Hole-in-one!\", '<code>golfScore(1, 1)</code> should return \"Hole-in-one!\"');"
         },
         {
           "text": "<code>golfScore(5, 5)</code> should return \"Par\"",
-          "testString": "assert(golfScore(5, 5) === \"Par\", '<code>golfScore(5, 5)</code> should return \"Par\"');"
+          "testString":
+            "assert(golfScore(5, 5) === \"Par\", '<code>golfScore(5, 5)</code> should return \"Par\"');"
         },
         {
           "text": "<code>golfScore(4, 5)</code> should return \"Bogey\"",
-          "testString": "assert(golfScore(4, 5) === \"Bogey\", '<code>golfScore(4, 5)</code> should return \"Bogey\"');"
+          "testString":
+            "assert(golfScore(4, 5) === \"Bogey\", '<code>golfScore(4, 5)</code> should return \"Bogey\"');"
         },
         {
           "text": "<code>golfScore(4, 6)</code> should return \"Double Bogey\"",
-          "testString": "assert(golfScore(4, 6) === \"Double Bogey\", '<code>golfScore(4, 6)</code> should return \"Double Bogey\"');"
+          "testString":
+            "assert(golfScore(4, 6) === \"Double Bogey\", '<code>golfScore(4, 6)</code> should return \"Double Bogey\"');"
         },
         {
           "text": "<code>golfScore(4, 7)</code> should return \"Go Home!\"",
-          "testString": "assert(golfScore(4, 7) === \"Go Home!\", '<code>golfScore(4, 7)</code> should return \"Go Home!\"');"
+          "testString":
+            "assert(golfScore(4, 7) === \"Go Home!\", '<code>golfScore(4, 7)</code> should return \"Go Home!\"');"
         },
         {
           "text": "<code>golfScore(5, 9)</code> should return \"Go Home!\"",
-          "testString": "assert(golfScore(5, 9) === \"Go Home!\", '<code>golfScore(5, 9)</code> should return \"Go Home!\"');"
+          "testString":
+            "assert(golfScore(5, 9) === \"Go Home!\", '<code>golfScore(5, 9)</code> should return \"Go Home!\"');"
         }
       ],
       "challengeType": 1,
@@ -5154,7 +5448,7 @@
       "description": [
         "If you have many options to choose from, use a <code>switch</code> statement. A <code>switch</code> statement tests a value and can have many <code>case</code> statements which define various possible values. Statements are executed from the first matched <code>case</code> value until a <code>break</code> is encountered.",
         "Here is a <dfn>pseudocode</dfn> example:",
-        "<blockquote>switch(num) {<br>  case value1:<br>    statement1;<br>    break;<br>  case value2:<br>    statement2;<br>    break;<br>...<br>  case valueN:<br>    statementN;<br>    break;<br>}</blockquote>",
+        "<blockquote>switch(num) {<br>&nbsp;&nbsp;case value1:<br>&nbsp;&nbsp;&nbsp;&nbsp;statement1;<br>&nbsp;&nbsp;&nbsp;&nbsp;break;<br>&nbsp;&nbsp;case value2:<br>&nbsp;&nbsp;&nbsp;&nbsp;statement2;<br>&nbsp;&nbsp;&nbsp;&nbsp;break;<br>...<br>&nbsp;&nbsp;case valueN:<br>&nbsp;&nbsp;&nbsp;&nbsp;statementN;<br>&nbsp;&nbsp;&nbsp;&nbsp;break;<br>}</blockquote>",
         "<code>case</code> values are tested with strict equality (<code>===</code>). The <code>break</code> tells JavaScript to stop executing statements. If the <code>break</code> is omitted, the next statement will be executed.",
         "<hr>",
         "Write a switch statement which tests <code>val</code> and sets <code>answer</code> for the following conditions:<br><code>1</code> - \"alpha\"<br><code>2</code> - \"beta\"<br><code>3</code> - \"gamma\"<br><code>4</code> - \"delta\""
@@ -5165,41 +5459,51 @@
       ],
       "tests": [
         {
-          "text": "<code>caseInSwitch(1)</code> should have a value of \"alpha\"",
-          "testString": "assert(caseInSwitch(1) === \"alpha\", '<code>caseInSwitch(1)</code> should have a value of \"alpha\"');"
+          "text":
+            "<code>caseInSwitch(1)</code> should have a value of \"alpha\"",
+          "testString":
+            "assert(caseInSwitch(1) === \"alpha\", '<code>caseInSwitch(1)</code> should have a value of \"alpha\"');"
         },
         {
-          "text": "<code>caseInSwitch(2)</code> should have a value of \"beta\"",
-          "testString": "assert(caseInSwitch(2) === \"beta\", '<code>caseInSwitch(2)</code> should have a value of \"beta\"');"
+          "text":
+            "<code>caseInSwitch(2)</code> should have a value of \"beta\"",
+          "testString":
+            "assert(caseInSwitch(2) === \"beta\", '<code>caseInSwitch(2)</code> should have a value of \"beta\"');"
         },
         {
-          "text": "<code>caseInSwitch(3)</code> should have a value of \"gamma\"",
-          "testString": "assert(caseInSwitch(3) === \"gamma\", '<code>caseInSwitch(3)</code> should have a value of \"gamma\"');"
+          "text":
+            "<code>caseInSwitch(3)</code> should have a value of \"gamma\"",
+          "testString":
+            "assert(caseInSwitch(3) === \"gamma\", '<code>caseInSwitch(3)</code> should have a value of \"gamma\"');"
         },
         {
-          "text": "<code>caseInSwitch(4)</code> should have a value of \"delta\"",
-          "testString": "assert(caseInSwitch(4) === \"delta\", '<code>caseInSwitch(4)</code> should have a value of \"delta\"');"
+          "text":
+            "<code>caseInSwitch(4)</code> should have a value of \"delta\"",
+          "testString":
+            "assert(caseInSwitch(4) === \"delta\", '<code>caseInSwitch(4)</code> should have a value of \"delta\"');"
         },
         {
-          "text": "You should not use any <code>if</code> or <code>else</code> statements",
-          "testString": "assert(!/else/g.test(code) || !/if/g.test(code), 'You should not use any <code>if</code> or <code>else</code> statements');"
+          "text":
+            "You should not use any <code>if</code> or <code>else</code> statements",
+          "testString":
+            "assert(!/else/g.test(code) || !/if/g.test(code), 'You should not use any <code>if</code> or <code>else</code> statements');"
         },
         {
           "text": "You should have at least 3 <code>break</code> statements",
-          "testString": "assert(code.match(/break/g).length > 2, 'You should have at least 3 <code>break</code> statements');"
+          "testString":
+            "assert(code.match(/break/g).length > 2, 'You should have at least 3 <code>break</code> statements');"
         }
       ],
-      "MDNlinks": [
-        "Switch Statement"
-      ],
+      "MDNlinks": ["Switch Statement"],
       "challengeType": 1,
       "translations": {
         "es": {
-          "title": "Seleccionar desde diferentes opciones con la sentencia switch",
+          "title":
+            "Seleccionar desde diferentes opciones con la sentencia switch",
           "description": [
             "Si tienes varias opciones para elegir, usa una sentencia <code>switch</code>. Una sentencia <code>switch</code> prueba un valor y puede tener varias sentencias <code>case</code> las cuales definen varios posibles valores. Las sentencias son ejecutadas desde el primer valor <code>case</code> igualado hasta que se encuentr un <code>break</code>.",
             "Aquí hay un <dfn>pseudocódigo</dfn> de ejemplo:",
-            "<blockquote>switch(num) {<br>  case valor1:<br>    sentencia1;<br>    break;<br>  case valor2:<br>    sentencia2;<br>    break;<br>...<br>  case valorN:<br>    sentenciaN;<br>    break;<br>}</blockquote>",
+            "<blockquote>switch(num) {<br>&nbsp;&nbsp;case valor1:<br>&nbsp;&nbsp;&nbsp;&nbsp;sentencia1;<br>&nbsp;&nbsp;&nbsp;&nbsp;break;<br>&nbsp;&nbsp;case valor2:<br>&nbsp;&nbsp;&nbsp;&nbsp;sentencia2;<br>&nbsp;&nbsp;&nbsp;&nbsp;break;<br>...<br>&nbsp;&nbsp;case valorN:<br>&nbsp;&nbsp;&nbsp;&nbsp;sentenciaN;<br>&nbsp;&nbsp;&nbsp;&nbsp;break;<br>}</blockquote>",
             "Los valores <code>case</code> son probados con estricta igualdad (<code>===</code>). El <code>break</code> le dice a JavaScript que pare la ejecución del bloque de sentencias en el que está. Si se omite <code>break</code>, se ejecutará la siguiente sentencia.",
             "<h4>Instrucciones</h4>",
             "Escribe una sentencia <code>switch</code> que pruebe <code>val</code> y establezca <code>answer</code> para las siguientes condiciones:<br><code>1</code> - \"alpha\"<br><code>2</code> - \"beta\"<br><code>3</code> - \"gamma\"<br><code>4</code> - \"delta\""
@@ -5237,7 +5541,7 @@
       "description": [
         "In a <code>switch</code> statement you may not be able to specify all possible values as <code>case</code> statements. Instead, you can add the <code>default</code> statement which will be executed if no matching <code>case</code> statements are found. Think of it like the final <code>else</code> statement in an <code>if/else</code> chain.",
         "A <code>default</code> statement should be the last case.",
-        "<blockquote>switch (num) {<br>  case value1:<br>    statement1;<br>    break;<br>  case value2:<br>    statement2;<br>    break;<br>...<br>  default:<br>    defaultStatement;<br>    break;<br>}</blockquote>",
+        "<blockquote>switch (num) {<br>&nbsp;&nbsp;case value1:<br>&nbsp;&nbsp;&nbsp;&nbsp;statement1;<br>&nbsp;&nbsp;&nbsp;&nbsp;break;<br>&nbsp;&nbsp;case value2:<br>&nbsp;&nbsp;&nbsp;&nbsp;statement2;<br>&nbsp;&nbsp;&nbsp;&nbsp;break;<br>...<br>&nbsp;&nbsp;default:<br>&nbsp;&nbsp;&nbsp;&nbsp;defaultStatement;<br>&nbsp;&nbsp;&nbsp;&nbsp;break;<br>}</blockquote>",
         "<hr>",
         "Write a switch statement to set <code>answer</code> for the following conditions:<br><code>\"a\"</code> - \"apple\"<br><code>\"b\"</code> - \"bird\"<br><code>\"c\"</code> - \"cat\"<br><code>default</code> - \"stuff\""
       ],
@@ -5247,52 +5551,68 @@
       ],
       "tests": [
         {
-          "text": "<code>switchOfStuff(\"a\")</code> should have a value of \"apple\"",
-          "testString": "assert(switchOfStuff(\"a\") === \"apple\", '<code>switchOfStuff(\"a\")</code> should have a value of \"apple\"');"
+          "text":
+            "<code>switchOfStuff(\"a\")</code> should have a value of \"apple\"",
+          "testString":
+            "assert(switchOfStuff(\"a\") === \"apple\", '<code>switchOfStuff(\"a\")</code> should have a value of \"apple\"');"
         },
         {
-          "text": "<code>switchOfStuff(\"b\")</code> should have a value of \"bird\"",
-          "testString": "assert(switchOfStuff(\"b\") === \"bird\", '<code>switchOfStuff(\"b\")</code> should have a value of \"bird\"');"
+          "text":
+            "<code>switchOfStuff(\"b\")</code> should have a value of \"bird\"",
+          "testString":
+            "assert(switchOfStuff(\"b\") === \"bird\", '<code>switchOfStuff(\"b\")</code> should have a value of \"bird\"');"
         },
         {
-          "text": "<code>switchOfStuff(\"c\")</code> should have a value of \"cat\"",
-          "testString": "assert(switchOfStuff(\"c\") === \"cat\", '<code>switchOfStuff(\"c\")</code> should have a value of \"cat\"');"
+          "text":
+            "<code>switchOfStuff(\"c\")</code> should have a value of \"cat\"",
+          "testString":
+            "assert(switchOfStuff(\"c\") === \"cat\", '<code>switchOfStuff(\"c\")</code> should have a value of \"cat\"');"
         },
         {
-          "text": "<code>switchOfStuff(\"d\")</code> should have a value of \"stuff\"",
-          "testString": "assert(switchOfStuff(\"d\") === \"stuff\", '<code>switchOfStuff(\"d\")</code> should have a value of \"stuff\"');"
+          "text":
+            "<code>switchOfStuff(\"d\")</code> should have a value of \"stuff\"",
+          "testString":
+            "assert(switchOfStuff(\"d\") === \"stuff\", '<code>switchOfStuff(\"d\")</code> should have a value of \"stuff\"');"
         },
         {
-          "text": "<code>switchOfStuff(4)</code> should have a value of \"stuff\"",
-          "testString": "assert(switchOfStuff(4) === \"stuff\", '<code>switchOfStuff(4)</code> should have a value of \"stuff\"');"
+          "text":
+            "<code>switchOfStuff(4)</code> should have a value of \"stuff\"",
+          "testString":
+            "assert(switchOfStuff(4) === \"stuff\", '<code>switchOfStuff(4)</code> should have a value of \"stuff\"');"
         },
         {
-          "text": "You should not use any <code>if</code> or <code>else</code> statements",
-          "testString": "assert(!/else/g.test(code) || !/if/g.test(code), 'You should not use any <code>if</code> or <code>else</code> statements');"
+          "text":
+            "You should not use any <code>if</code> or <code>else</code> statements",
+          "testString":
+            "assert(!/else/g.test(code) || !/if/g.test(code), 'You should not use any <code>if</code> or <code>else</code> statements');"
         },
         {
           "text": "You should use a <code>default</code> statement",
-          "testString": "assert(switchOfStuff(\"string-to-trigger-default-case\") === \"stuff\", 'You should use a <code>default</code> statement');"
+          "testString":
+            "assert(switchOfStuff(\"string-to-trigger-default-case\") === \"stuff\", 'You should use a <code>default</code> statement');"
         },
         {
           "text": "You should have at least 3 <code>break</code> statements",
-          "testString": "assert(code.match(/break/g).length > 2, 'You should have at least 3 <code>break</code> statements');"
+          "testString":
+            "assert(code.match(/break/g).length > 2, 'You should have at least 3 <code>break</code> statements');"
         }
       ],
       "challengeType": 1,
       "translations": {
         "es": {
-          "title": "Agregar una opción por omisión (default) en una sentencia switch",
+          "title":
+            "Agregar una opción por omisión (default) en una sentencia switch",
           "description": [
             "En una sentencia <code>switch</code> puede que no seas capaz de especificar todos los posibles valores en las sentencias <code>case</code>. En su lugar, puedes agregar la sentencia <code>default</code> la cual será ejecutada si no es encontrada ninguna coincidencia con alguna sentencia <code>case</code>. Piensa en esto como la última sentencia <code>else</code> en una cadena <code>if/else</code>.",
             "Una sentencia <code>default</code> debería ser el último caso.",
-            "<blockquote>switch(num) {<br>  case valor1:<br>    sentencia1;<br>    break;<br>  case valor2:<br>    sentencia2;<br>    break;<br>...<br>  default:<br>    sentenciaDefault;<br>}</blockquote>",
+            "<blockquote>switch(num) {<br>&nbsp;&nbsp;case valor1:<br>&nbsp;&nbsp;&nbsp;&nbsp;sentencia1;<br>&nbsp;&nbsp;&nbsp;&nbsp;break;<br>&nbsp;&nbsp;case valor2:<br>&nbsp;&nbsp;&nbsp;&nbsp;sentencia2;<br>&nbsp;&nbsp;&nbsp;&nbsp;break;<br>...<br>&nbsp;&nbsp;default:<br>&nbsp;&nbsp;&nbsp;&nbsp;sentenciaDefault;<br>}</blockquote>",
             "<h4>Instrucciones</h4>",
             "Escribe una sentencia switch para establecer <code>answer</code> para las siguientes condiciones:<br><code>\"a\"</code> - \"apple\"<br><code>\"b\"</code> - \"bird\"<br><code>\"c\"</code> - \"cat\"<br><code>default</code> - \"stuff\""
           ]
         }
       },
-      "guideUrl": "https://guide.freecodecamp.org/certificates/adding-a-default-option-in-switch-statements",
+      "guideUrl":
+        "https://guide.freecodecamp.org/certificates/adding-a-default-option-in-switch-statements",
       "files": {
         "indexjs": {
           "key": "indexjs",
@@ -5323,7 +5643,7 @@
       "title": "Multiple Identical Options in Switch Statements",
       "description": [
         "If the <code>break</code> statement is omitted from a <code>switch</code> statement's <code>case</code>, the following <code>case</code> statement(s) are executed until a <code>break</code> is encountered. If you have multiple inputs with the same output, you can represent them in a <code>switch</code> statement like this:",
-        "<blockquote>switch(val) {<br>  case 1:<br>  case 2:<br>  case 3:<br>    result = \"1, 2, or 3\";<br>    break;<br>  case 4:<br>    result = \"4 alone\";<br>}</blockquote>",
+        "<blockquote>switch(val) {<br>&nbsp;&nbsp;case 1:<br>&nbsp;&nbsp;case 2:<br>&nbsp;&nbsp;case 3:<br>&nbsp;&nbsp;&nbsp;&nbsp;result = \"1, 2, or 3\";<br>&nbsp;&nbsp;&nbsp;&nbsp;break;<br>&nbsp;&nbsp;case 4:<br>&nbsp;&nbsp;&nbsp;&nbsp;result = \"4 alone\";<br>}</blockquote>",
         "Cases for 1, 2, and 3 will all produce the same result.",
         "<hr>",
         "Write a switch statement to set <code>answer</code> for the following ranges:<br><code>1-3</code> - \"Low\"<br><code>4-6</code> - \"Mid\"<br><code>7-9</code> - \"High\"",
@@ -5336,47 +5656,59 @@
       "tests": [
         {
           "text": "<code>sequentialSizes(1)</code> should return \"Low\"",
-          "testString": "assert(sequentialSizes(1) === \"Low\", '<code>sequentialSizes(1)</code> should return \"Low\"');"
+          "testString":
+            "assert(sequentialSizes(1) === \"Low\", '<code>sequentialSizes(1)</code> should return \"Low\"');"
         },
         {
           "text": "<code>sequentialSizes(2)</code> should return \"Low\"",
-          "testString": "assert(sequentialSizes(2) === \"Low\", '<code>sequentialSizes(2)</code> should return \"Low\"');"
+          "testString":
+            "assert(sequentialSizes(2) === \"Low\", '<code>sequentialSizes(2)</code> should return \"Low\"');"
         },
         {
           "text": "<code>sequentialSizes(3)</code> should return \"Low\"",
-          "testString": "assert(sequentialSizes(3) === \"Low\", '<code>sequentialSizes(3)</code> should return \"Low\"');"
+          "testString":
+            "assert(sequentialSizes(3) === \"Low\", '<code>sequentialSizes(3)</code> should return \"Low\"');"
         },
         {
           "text": "<code>sequentialSizes(4)</code> should return \"Mid\"",
-          "testString": "assert(sequentialSizes(4) === \"Mid\", '<code>sequentialSizes(4)</code> should return \"Mid\"');"
+          "testString":
+            "assert(sequentialSizes(4) === \"Mid\", '<code>sequentialSizes(4)</code> should return \"Mid\"');"
         },
         {
           "text": "<code>sequentialSizes(5)</code> should return \"Mid\"",
-          "testString": "assert(sequentialSizes(5) === \"Mid\", '<code>sequentialSizes(5)</code> should return \"Mid\"');"
+          "testString":
+            "assert(sequentialSizes(5) === \"Mid\", '<code>sequentialSizes(5)</code> should return \"Mid\"');"
         },
         {
           "text": "<code>sequentialSizes(6)</code> should return \"Mid\"",
-          "testString": "assert(sequentialSizes(6) === \"Mid\", '<code>sequentialSizes(6)</code> should return \"Mid\"');"
+          "testString":
+            "assert(sequentialSizes(6) === \"Mid\", '<code>sequentialSizes(6)</code> should return \"Mid\"');"
         },
         {
           "text": "<code>sequentialSizes(7)</code> should return \"High\"",
-          "testString": "assert(sequentialSizes(7) === \"High\", '<code>sequentialSizes(7)</code> should return \"High\"');"
+          "testString":
+            "assert(sequentialSizes(7) === \"High\", '<code>sequentialSizes(7)</code> should return \"High\"');"
         },
         {
           "text": "<code>sequentialSizes(8)</code> should return \"High\"",
-          "testString": "assert(sequentialSizes(8) === \"High\", '<code>sequentialSizes(8)</code> should return \"High\"');"
+          "testString":
+            "assert(sequentialSizes(8) === \"High\", '<code>sequentialSizes(8)</code> should return \"High\"');"
         },
         {
           "text": "<code>sequentialSizes(9)</code> should return \"High\"",
-          "testString": "assert(sequentialSizes(9) === \"High\", '<code>sequentialSizes(9)</code> should return \"High\"');"
+          "testString":
+            "assert(sequentialSizes(9) === \"High\", '<code>sequentialSizes(9)</code> should return \"High\"');"
         },
         {
-          "text": "You should not use any <code>if</code> or <code>else</code> statements",
-          "testString": "assert(!/else/g.test(code) || !/if/g.test(code), 'You should not use any <code>if</code> or <code>else</code> statements');"
+          "text":
+            "You should not use any <code>if</code> or <code>else</code> statements",
+          "testString":
+            "assert(!/else/g.test(code) || !/if/g.test(code), 'You should not use any <code>if</code> or <code>else</code> statements');"
         },
         {
           "text": "You should have nine <code>case</code> statements",
-          "testString": "assert(code.match(/case/g).length === 9, 'You should have nine <code>case</code> statements');"
+          "testString":
+            "assert(code.match(/case/g).length === 9, 'You should have nine <code>case</code> statements');"
         }
       ],
       "challengeType": 1,
@@ -5385,7 +5717,7 @@
           "title": "Múltiples opciones idénticas en una sentencias switch",
           "description": [
             "Si la sentencia <code>break</code> es omitida de una sentencia <code>case</code> de un <code>switch</code>, las siguientes sentencias <code>case</code> son ejecutadas hasta que sea encontrado un <code>break</code>. Si tienes multiples entradas con la misma salida, puede representarlas en una sentencia <code>switch</code> así:",
-            "<blockquote>switch(val) {<br>  case 1:<br>  case 2:<br>  case 3:<br>    result = \"1, 2, or 3\";<br>    break;<br>  case 4:<br>    result = \"4 alone\";<br>}</blockquote>",
+            "<blockquote>switch(val) {<br>&nbsp;&nbsp;case 1:<br>&nbsp;&nbsp;case 2:<br>&nbsp;&nbsp;case 3:<br>&nbsp;&nbsp;&nbsp;&nbsp;result = \"1, 2, or 3\";<br>&nbsp;&nbsp;&nbsp;&nbsp;break;<br>&nbsp;&nbsp;case 4:<br>&nbsp;&nbsp;&nbsp;&nbsp;result = \"4 alone\";<br>}</blockquote>",
             "Los casos 1, 2, y 3 producirán el mismo resultado.",
             "<h4>Instrucciones</h4>",
             "Escribe una sentencia <code>switch</code> para establecer <code>answer</code> para los siguientes rangos:<br><code>1-3</code> - \"Low\"<br><code>4-6</code> - \"Mid\"<br><code>7-9</code> - \"High\"",
@@ -5423,9 +5755,9 @@
       "title": "Replacing If Else Chains with Switch",
       "description": [
         "If you have many options to choose from, a <code>switch</code> statement can be easier to write than many chained <code>if</code>/<code>else if</code> statements. The following:",
-        "<blockquote>if (val === 1) {<br>  answer = \"a\";<br>} else if (val === 2) {<br>  answer = \"b\";<br>} else {<br>  answer = \"c\";<br>}</blockquote>",
+        "<blockquote>if (val === 1) {<br>&nbsp;&nbsp;answer = \"a\";<br>} else if (val === 2) {<br>&nbsp;&nbsp;answer = \"b\";<br>} else {<br>&nbsp;&nbsp;answer = \"c\";<br>}</blockquote>",
         "can be replaced with:",
-        "<blockquote>switch(val) {<br>  case 1:<br>    answer = \"a\";<br>    break;<br>  case 2:<br>    answer = \"b\";<br>    break;<br>  default:<br>    answer = \"c\";<br>}</blockquote>",
+        "<blockquote>switch(val) {<br>&nbsp;&nbsp;case 1:<br>&nbsp;&nbsp;&nbsp;&nbsp;answer = \"a\";<br>&nbsp;&nbsp;&nbsp;&nbsp;break;<br>&nbsp;&nbsp;case 2:<br>&nbsp;&nbsp;&nbsp;&nbsp;answer = \"b\";<br>&nbsp;&nbsp;&nbsp;&nbsp;break;<br>&nbsp;&nbsp;default:<br>&nbsp;&nbsp;&nbsp;&nbsp;answer = \"c\";<br>}</blockquote>",
         "<hr>",
         "Change the chained <code>if</code>/<code>else if</code> statements into a <code>switch</code> statement."
       ],
@@ -5435,44 +5767,59 @@
       ],
       "tests": [
         {
-          "text": "You should not use any <code>else</code> statements anywhere in the editor",
-          "testString": "assert(!/else/g.test(code), 'You should not use any <code>else</code> statements anywhere in the editor');"
+          "text":
+            "You should not use any <code>else</code> statements anywhere in the editor",
+          "testString":
+            "assert(!/else/g.test(code), 'You should not use any <code>else</code> statements anywhere in the editor');"
         },
         {
-          "text": "You should not use any <code>if</code> statements anywhere in the editor",
-          "testString": "assert(!/if/g.test(code), 'You should not use any <code>if</code> statements anywhere in the editor');"
+          "text":
+            "You should not use any <code>if</code> statements anywhere in the editor",
+          "testString":
+            "assert(!/if/g.test(code), 'You should not use any <code>if</code> statements anywhere in the editor');"
         },
         {
           "text": "You should have at least four <code>break</code> statements",
-          "testString": "assert(code.match(/break/g).length >= 4, 'You should have at least four <code>break</code> statements');"
+          "testString":
+            "assert(code.match(/break/g).length >= 4, 'You should have at least four <code>break</code> statements');"
         },
         {
           "text": "<code>chainToSwitch(\"bob\")</code> should be \"Marley\"",
-          "testString": "assert(chainToSwitch(\"bob\") === \"Marley\", '<code>chainToSwitch(\"bob\")</code> should be \"Marley\"');"
+          "testString":
+            "assert(chainToSwitch(\"bob\") === \"Marley\", '<code>chainToSwitch(\"bob\")</code> should be \"Marley\"');"
         },
         {
           "text": "<code>chainToSwitch(42)</code> should be \"The Answer\"",
-          "testString": "assert(chainToSwitch(42) === \"The Answer\", '<code>chainToSwitch(42)</code> should be \"The Answer\"');"
+          "testString":
+            "assert(chainToSwitch(42) === \"The Answer\", '<code>chainToSwitch(42)</code> should be \"The Answer\"');"
         },
         {
           "text": "<code>chainToSwitch(1)</code> should be \"There is no #1\"",
-          "testString": "assert(chainToSwitch(1) === \"There is no #1\", '<code>chainToSwitch(1)</code> should be \"There is no #1\"');"
+          "testString":
+            "assert(chainToSwitch(1) === \"There is no #1\", '<code>chainToSwitch(1)</code> should be \"There is no #1\"');"
         },
         {
-          "text": "<code>chainToSwitch(99)</code> should be \"Missed me by this much!\"",
-          "testString": "assert(chainToSwitch(99) === \"Missed me by this much!\", '<code>chainToSwitch(99)</code> should be \"Missed me by this much!\"');"
+          "text":
+            "<code>chainToSwitch(99)</code> should be \"Missed me by this much!\"",
+          "testString":
+            "assert(chainToSwitch(99) === \"Missed me by this much!\", '<code>chainToSwitch(99)</code> should be \"Missed me by this much!\"');"
         },
         {
           "text": "<code>chainToSwitch(7)</code> should be \"Ate Nine\"",
-          "testString": "assert(chainToSwitch(7) === \"Ate Nine\", '<code>chainToSwitch(7)</code> should be \"Ate Nine\"');"
+          "testString":
+            "assert(chainToSwitch(7) === \"Ate Nine\", '<code>chainToSwitch(7)</code> should be \"Ate Nine\"');"
         },
         {
-          "text": "<code>chainToSwitch(\"John\")</code> should be \"\" (empty string)",
-          "testString": "assert(chainToSwitch(\"John\") === \"\", '<code>chainToSwitch(\"John\")</code> should be \"\" (empty string)');"
+          "text":
+            "<code>chainToSwitch(\"John\")</code> should be \"\" (empty string)",
+          "testString":
+            "assert(chainToSwitch(\"John\") === \"\", '<code>chainToSwitch(\"John\")</code> should be \"\" (empty string)');"
         },
         {
-          "text": "<code>chainToSwitch(156)</code> should be \"\" (empty string)",
-          "testString": "assert(chainToSwitch(156) === \"\", '<code>chainToSwitch(156)</code> should be \"\" (empty string)');"
+          "text":
+            "<code>chainToSwitch(156)</code> should be \"\" (empty string)",
+          "testString":
+            "assert(chainToSwitch(156) === \"\", '<code>chainToSwitch(156)</code> should be \"\" (empty string)');"
         }
       ],
       "challengeType": 1,
@@ -5481,9 +5828,9 @@
           "title": "Reemplazar cadenas if else con switch",
           "description": [
             "Si tienes varias opciones para elegir, una sentencia <code>switch</code> puede ser más fácil de escribir que varias sentencias <code>if</code>/<code>if else</code> anidadas. Lo siguiente:",
-            "<blockquote>if (val === 1) {<br>  respuesta = \"a\";<br>} else if (val === 2) {<br>  respuesta = \"b\";<br>} else {<br>  respuesta = \"c\";<br>}</blockquote>",
+            "<blockquote>if (val === 1) {<br>&nbsp;&nbsp;respuesta = \"a\";<br>} else if (val === 2) {<br>&nbsp;&nbsp;respuesta = \"b\";<br>} else {<br>&nbsp;&nbsp;respuesta = \"c\";<br>}</blockquote>",
             "puede ser reemplazado con:",
-            "<blockquote>switch(val) {<br>  case 1:<br>    respuesta = \"a\";<br>    break;<br>  case 2:<br>    respuesta = \"b\";<br>    break;<br>  default:<br>    respuesta = \"c\";<br>}</blockquote>",
+            "<blockquote>switch(val) {<br>&nbsp;&nbsp;case 1:<br>&nbsp;&nbsp;&nbsp;&nbsp;respuesta = \"a\";<br>&nbsp;&nbsp;&nbsp;&nbsp;break;<br>&nbsp;&nbsp;case 2:<br>&nbsp;&nbsp;&nbsp;&nbsp;respuesta = \"b\";<br>&nbsp;&nbsp;&nbsp;&nbsp;break;<br>&nbsp;&nbsp;default:<br>&nbsp;&nbsp;&nbsp;&nbsp;respuesta = \"c\";<br>}</blockquote>",
             "<h4>Instrucciones</h4>",
             "Cambia las sentencias <code>if</code>/<code>if else</code> anidadas dentro de una sentencia <code>switch</code>."
           ]
@@ -5530,28 +5877,30 @@
       "description": [
         "You may recall from <a href=\"waypoint-comparison-with-the-equality-operator\" target=\"_blank\">Comparison with the Equality Operator</a> that all comparison operators return a boolean <code>true</code> or <code>false</code> value.",
         "Sometimes people use an if/else statement to do a comparison, like this:",
-        "<blockquote>function isEqual(a,b) {<br>  if (a === b) {<br>    return true;<br>  } else {<br>    return false;<br>  }<br>}</blockquote>",
+        "<blockquote>function isEqual(a,b) {<br>&nbsp;&nbsp;if (a === b) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return true;<br>&nbsp;&nbsp;} else {<br>&nbsp;&nbsp;&nbsp;&nbsp;return false;<br>&nbsp;&nbsp;}<br>}</blockquote>",
         "But there's a better way to do this. Since <code>===</code> returns <code>true</code> or <code>false</code>, we can return the result of the comparison:",
-        "<blockquote>function isEqual(a,b) {<br>  return a === b;<br>}</blockquote>",
+        "<blockquote>function isEqual(a,b) {<br>&nbsp;&nbsp;return a === b;<br>}</blockquote>",
         "<hr>",
         "Fix the function <code>isLess</code> to remove the <code>if/else</code> statements."
       ],
       "releasedOn": "January 1, 2016",
-      "solutions": [
-        "function isLess(a, b) {\n  return a < b;\n}"
-      ],
+      "solutions": ["function isLess(a, b) {\n  return a < b;\n}"],
       "tests": [
         {
           "text": "<code>isLess(10,15)</code> should return <code>true</code>",
-          "testString": "assert(isLess(10,15) === true, '<code>isLess(10,15)</code> should return <code>true</code>');"
+          "testString":
+            "assert(isLess(10,15) === true, '<code>isLess(10,15)</code> should return <code>true</code>');"
         },
         {
           "text": "<code>isLess(15,10)</code> should return <code>false</code>",
-          "testString": "assert(isLess(15, 10) === false, '<code>isLess(15,10)</code> should return <code>false</code>');"
+          "testString":
+            "assert(isLess(15, 10) === false, '<code>isLess(15,10)</code> should return <code>false</code>');"
         },
         {
-          "text": "You should not use any <code>if</code> or <code>else</code> statements",
-          "testString": "assert(!/if|else/g.test(code), 'You should not use any <code>if</code> or <code>else</code> statements');"
+          "text":
+            "You should not use any <code>if</code> or <code>else</code> statements",
+          "testString":
+            "assert(!/if|else/g.test(code), 'You should not use any <code>if</code> or <code>else</code> statements');"
         }
       ],
       "challengeType": 1,
@@ -5561,9 +5910,9 @@
           "description": [
             "Tal vez recuerdes de <a href=\"waypoint-comparison-with-the-equality-operator\" target=\"_blank\">La comparación con el operador de igualdad</a> que todos los operadores de comparación retornan un valor booleano <code>true</code> (verdadero) o <code>false</code> (falso).",
             "Un <dfn>anti-patrón</dfn> común es usar una sentencia <code>if/else</code> para hacer una comparación y entonces retornar <code>true</code> o <code>false</code>:",
-            "<blockquote>function sonIguales(a,b) {<br>  if (a === b) {<br>    return true;<br>  } else {<br>    return false;<br>  }<br>}</blockquote>",
+            "<blockquote>function sonIguales(a,b) {<br>&nbsp;&nbsp;if (a === b) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return true;<br>&nbsp;&nbsp;} else {<br>&nbsp;&nbsp;&nbsp;&nbsp;return false;<br>&nbsp;&nbsp;}<br>}</blockquote>",
             "Ya que <code>===</code> returna <code>true</code> (verdadero) o <code>false</code> (falso), podemos simplemente retornar el resultado de la comparación:",
-            "<blockquote>function sonIguales(a,b) {<br>  return a === b;<br>}</blockquote>",
+            "<blockquote>function sonIguales(a,b) {<br>&nbsp;&nbsp;return a === b;<br>}</blockquote>",
             "<h4>Instrucciones</h4>",
             "Arregla la función <code>isLess</code> para remover las sentencias <code>if/else</code>."
           ]
@@ -5598,7 +5947,7 @@
       "description": [
         "When a <code>return</code> statement is reached, the execution of the current function stops and control returns to the calling location.",
         "<strong>Example</strong>",
-        "<blockquote>function myFun() {<br>  console.log(\"Hello\");<br>  return \"World\";<br>  console.log(\"byebye\")<br>}<br>myFun();</blockquote>",
+        "<blockquote>function myFun() {<br>&nbsp;&nbsp;console.log(\"Hello\");<br>&nbsp;&nbsp;return \"World\";<br>&nbsp;&nbsp;console.log(\"byebye\")<br>}<br>myFun();</blockquote>",
         "The above outputs \"Hello\" to the console, returns \"World\", but <code>\"byebye\"</code> is never output, because the function exits at the <code>return</code> statement.",
         "<hr>",
         "Modify the function <code>abTest</code> so that if <code>a</code> or <code>b</code> are less than <code>0</code> the function will immediately exit with a value of <code>undefined</code>.",
@@ -5611,27 +5960,35 @@
       "tests": [
         {
           "text": "<code>abTest(2,2)</code> should return a number",
-          "testString": "assert(typeof abTest(2,2) === 'number' , '<code>abTest(2,2)</code> should return a number');"
+          "testString":
+            "assert(typeof abTest(2,2) === 'number' , '<code>abTest(2,2)</code> should return a number');"
         },
         {
           "text": "<code>abTest(2,2)</code> should return <code>8</code>",
-          "testString": "assert(abTest(2,2) === 8 , '<code>abTest(2,2)</code> should return <code>8</code>');"
+          "testString":
+            "assert(abTest(2,2) === 8 , '<code>abTest(2,2)</code> should return <code>8</code>');"
         },
         {
-          "text": "<code>abTest(-2,2)</code> should return <code>undefined</code>",
-          "testString": "assert(abTest(-2,2) === undefined , '<code>abTest(-2,2)</code> should return <code>undefined</code>');"
+          "text":
+            "<code>abTest(-2,2)</code> should return <code>undefined</code>",
+          "testString":
+            "assert(abTest(-2,2) === undefined , '<code>abTest(-2,2)</code> should return <code>undefined</code>');"
         },
         {
-          "text": "<code>abTest(2,-2)</code> should return <code>undefined</code>",
-          "testString": "assert(abTest(2,-2) === undefined , '<code>abTest(2,-2)</code> should return <code>undefined</code>');"
+          "text":
+            "<code>abTest(2,-2)</code> should return <code>undefined</code>",
+          "testString":
+            "assert(abTest(2,-2) === undefined , '<code>abTest(2,-2)</code> should return <code>undefined</code>');"
         },
         {
           "text": "<code>abTest(2,8)</code> should return <code>18</code>",
-          "testString": "assert(abTest(2,8) === 18 , '<code>abTest(2,8)</code> should return <code>18</code>');"
+          "testString":
+            "assert(abTest(2,8) === 18 , '<code>abTest(2,8)</code> should return <code>18</code>');"
         },
         {
           "text": "<code>abTest(3,3)</code> should return <code>12</code>",
-          "testString": "assert(abTest(3,3) === 12 , '<code>abTest(3,3)</code> should return <code>12</code>');"
+          "testString":
+            "assert(abTest(3,3) === 12 , '<code>abTest(3,3)</code> should return <code>12</code>');"
         }
       ],
       "challengeType": 1,
@@ -5641,7 +5998,7 @@
           "description": [
             "Cuando se alcanza una sentencia <code>return</code>, la ejecución de la presente función se detiene y el control la retorna a la ubicación de la llamada.",
             "<strong>Ejemplo</strong>",
-            "<blockquote>function miFuncion() {<br>  console.log(\"Hola\");<br>  return \"Mundo\";<br>  console.log(\"chaochao\")<br>}<br>miFuncion();</blockquote>",
+            "<blockquote>function miFuncion() {<br>&nbsp;&nbsp;console.log(\"Hola\");<br>&nbsp;&nbsp;return \"Mundo\";<br>&nbsp;&nbsp;console.log(\"chaochao\")<br>}<br>miFuncion();</blockquote>",
             "Esta presenta en consola \"Hola\", retorna \"Mundo\", pero <code>\"chaochao\"</code> nunca se presenta, porque la función sale con la sentencia <code>return</code>.",
             "<h4>Instrucciones</h4>",
             "Modifica la función <code>abTest</code> de manera que si <code>a</code> o <code>b</code> son menores que <code>0</code> la función saldrá inmediatamente con un valor <code>undefined</code>.",
@@ -5691,32 +6048,44 @@
       ],
       "tests": [
         {
-          "text": "Cards Sequence 2, 3, 4, 5, 6 should return <code>5 Bet</code>",
-          "testString": "assert((function(){ count = 0; cc(2);cc(3);cc(4);cc(5);var out = cc(6); if(out === \"5 Bet\") {return true;} return false; })(), 'Cards Sequence 2, 3, 4, 5, 6 should return <code>5 Bet</code>');"
+          "text":
+            "Cards Sequence 2, 3, 4, 5, 6 should return <code>5 Bet</code>",
+          "testString":
+            "assert((function(){ count = 0; cc(2);cc(3);cc(4);cc(5);var out = cc(6); if(out === \"5 Bet\") {return true;} return false; })(), 'Cards Sequence 2, 3, 4, 5, 6 should return <code>5 Bet</code>');"
         },
         {
           "text": "Cards Sequence 7, 8, 9 should return <code>0 Hold</code>",
-          "testString": "assert((function(){ count = 0; cc(7);cc(8);var out = cc(9); if(out === \"0 Hold\") {return true;} return false; })(), 'Cards Sequence 7, 8, 9 should return <code>0 Hold</code>');"
+          "testString":
+            "assert((function(){ count = 0; cc(7);cc(8);var out = cc(9); if(out === \"0 Hold\") {return true;} return false; })(), 'Cards Sequence 7, 8, 9 should return <code>0 Hold</code>');"
         },
         {
-          "text": "Cards Sequence 10, J, Q, K, A should return <code>-5 Hold</code>",
-          "testString": "assert((function(){ count = 0; cc(10);cc('J');cc('Q');cc('K');var out = cc('A'); if(out === \"-5 Hold\") {return true;} return false; })(), 'Cards Sequence 10, J, Q, K, A should return <code>-5 Hold</code>');"
+          "text":
+            "Cards Sequence 10, J, Q, K, A should return <code>-5 Hold</code>",
+          "testString":
+            "assert((function(){ count = 0; cc(10);cc('J');cc('Q');cc('K');var out = cc('A'); if(out === \"-5 Hold\") {return true;} return false; })(), 'Cards Sequence 10, J, Q, K, A should return <code>-5 Hold</code>');"
         },
         {
-          "text": "Cards Sequence 3, 7, Q, 8, A should return <code>-1 Hold</code>",
-          "testString": "assert((function(){ count = 0; cc(3);cc(7);cc('Q');cc(8);var out = cc('A'); if(out === \"-1 Hold\") {return true;} return false; })(), 'Cards Sequence 3, 7, Q, 8, A should return <code>-1 Hold</code>');"
+          "text":
+            "Cards Sequence 3, 7, Q, 8, A should return <code>-1 Hold</code>",
+          "testString":
+            "assert((function(){ count = 0; cc(3);cc(7);cc('Q');cc(8);var out = cc('A'); if(out === \"-1 Hold\") {return true;} return false; })(), 'Cards Sequence 3, 7, Q, 8, A should return <code>-1 Hold</code>');"
         },
         {
-          "text": "Cards Sequence 2, J, 9, 2, 7 should return <code>1 Bet</code>",
-          "testString": "assert((function(){ count = 0; cc(2);cc('J');cc(9);cc(2);var out = cc(7); if(out === \"1 Bet\") {return true;} return false; })(), 'Cards Sequence 2, J, 9, 2, 7 should return <code>1 Bet</code>');"
+          "text":
+            "Cards Sequence 2, J, 9, 2, 7 should return <code>1 Bet</code>",
+          "testString":
+            "assert((function(){ count = 0; cc(2);cc('J');cc(9);cc(2);var out = cc(7); if(out === \"1 Bet\") {return true;} return false; })(), 'Cards Sequence 2, J, 9, 2, 7 should return <code>1 Bet</code>');"
         },
         {
           "text": "Cards Sequence 2, 2, 10 should return <code>1 Bet</code>",
-          "testString": "assert((function(){ count = 0; cc(2);cc(2);var out = cc(10); if(out === \"1 Bet\") {return true;} return false; })(), 'Cards Sequence 2, 2, 10 should return <code>1 Bet</code>');"
+          "testString":
+            "assert((function(){ count = 0; cc(2);cc(2);var out = cc(10); if(out === \"1 Bet\") {return true;} return false; })(), 'Cards Sequence 2, 2, 10 should return <code>1 Bet</code>');"
         },
         {
-          "text": "Cards Sequence 3, 2, A, 10, K should return <code>-1 Hold</code>",
-          "testString": "assert((function(){ count = 0; cc(3);cc(2);cc('A');cc(10);var out = cc('K'); if(out === \"-1 Hold\") {return true;} return false; })(), 'Cards Sequence 3, 2, A, 10, K should return <code>-1 Hold</code>');"
+          "text":
+            "Cards Sequence 3, 2, A, 10, K should return <code>-1 Hold</code>",
+          "testString":
+            "assert((function(){ count = 0; cc(3);cc(2);cc('A');cc(10);var out = cc('K'); if(out === \"-1 Hold\") {return true;} return false; })(), 'Cards Sequence 3, 2, A, 10, K should return <code>-1 Hold</code>');"
         }
       ],
       "challengeType": 1,
@@ -5765,9 +6134,9 @@
         "Objects are similar to <code>arrays</code>, except that instead of using indexes to access and modify their data, you access the data in objects through what are called <code>properties</code>.",
         "Objects are useful for storing data in a structured way, and can represent real world objects, like a cat.",
         "Here's a sample cat object:",
-        "<blockquote>var cat = {<br>  \"name\": \"Whiskers\",<br>  \"legs\": 4,<br>  \"tails\": 1,<br>  \"enemies\": [\"Water\", \"Dogs\"]<br>};</blockquote>",
+        "<blockquote>var cat = {<br>&nbsp;&nbsp;\"name\": \"Whiskers\",<br>&nbsp;&nbsp;\"legs\": 4,<br>&nbsp;&nbsp;\"tails\": 1,<br>&nbsp;&nbsp;\"enemies\": [\"Water\", \"Dogs\"]<br>};</blockquote>",
         "In this example, all the properties are stored as strings, such as - <code>\"name\"</code>, <code>\"legs\"</code>, and <code>\"tails\"</code>. However, you can also use numbers as properties. You can even omit the quotes for single-word string properties, as follows:",
-        "<blockquote>var anotherObject = {<br>  make: \"Ford\",<br>  5: \"five\",<br>  \"model\": \"focus\"<br>};</blockquote>",
+        "<blockquote>var anotherObject = {<br>&nbsp;&nbsp;make: \"Ford\",<br>&nbsp;&nbsp;5: \"five\",<br>&nbsp;&nbsp;\"model\": \"focus\"<br>};</blockquote>",
         "However, if your object has any non-string properties, JavaScript will automatically typecast them as strings.",
         "<hr>",
         "Make an object that represents a dog called <code>myDog</code> which contains the properties <code>\"name\"</code> (a string), <code>\"legs\"</code>, <code>\"tails\"</code> and <code>\"friends\"</code>.",
@@ -5778,24 +6147,34 @@
       ],
       "tests": [
         {
-          "text": "<code>myDog</code> should contain the property <code>name</code> and it should be a <code>string</code>.",
-          "testString": "assert((function(z){if(z.hasOwnProperty(\"name\") && z.name !== undefined && typeof z.name === \"string\"){return true;}else{return false;}})(myDog), '<code>myDog</code> should contain the property <code>name</code> and it should be a <code>string</code>.');"
+          "text":
+            "<code>myDog</code> should contain the property <code>name</code> and it should be a <code>string</code>.",
+          "testString":
+            "assert((function(z){if(z.hasOwnProperty(\"name\") && z.name !== undefined && typeof z.name === \"string\"){return true;}else{return false;}})(myDog), '<code>myDog</code> should contain the property <code>name</code> and it should be a <code>string</code>.');"
         },
         {
-          "text": "<code>myDog</code> should contain the property <code>legs</code> and it should be a <code>number</code>.",
-          "testString": "assert((function(z){if(z.hasOwnProperty(\"legs\") && z.legs !== undefined && typeof z.legs === \"number\"){return true;}else{return false;}})(myDog), '<code>myDog</code> should contain the property <code>legs</code> and it should be a <code>number</code>.');"
+          "text":
+            "<code>myDog</code> should contain the property <code>legs</code> and it should be a <code>number</code>.",
+          "testString":
+            "assert((function(z){if(z.hasOwnProperty(\"legs\") && z.legs !== undefined && typeof z.legs === \"number\"){return true;}else{return false;}})(myDog), '<code>myDog</code> should contain the property <code>legs</code> and it should be a <code>number</code>.');"
         },
         {
-          "text": "<code>myDog</code> should contain the property <code>tails</code> and it should be a <code>number</code>.",
-          "testString": "assert((function(z){if(z.hasOwnProperty(\"tails\") && z.tails !== undefined && typeof z.tails === \"number\"){return true;}else{return false;}})(myDog), '<code>myDog</code> should contain the property <code>tails</code> and it should be a <code>number</code>.');"
+          "text":
+            "<code>myDog</code> should contain the property <code>tails</code> and it should be a <code>number</code>.",
+          "testString":
+            "assert((function(z){if(z.hasOwnProperty(\"tails\") && z.tails !== undefined && typeof z.tails === \"number\"){return true;}else{return false;}})(myDog), '<code>myDog</code> should contain the property <code>tails</code> and it should be a <code>number</code>.');"
         },
         {
-          "text": "<code>myDog</code> should contain the property <code>friends</code> and it should be an <code>array</code>.",
-          "testString": "assert((function(z){if(z.hasOwnProperty(\"friends\") && z.friends !== undefined && Array.isArray(z.friends)){return true;}else{return false;}})(myDog), '<code>myDog</code> should contain the property <code>friends</code> and it should be an <code>array</code>.');"
+          "text":
+            "<code>myDog</code> should contain the property <code>friends</code> and it should be an <code>array</code>.",
+          "testString":
+            "assert((function(z){if(z.hasOwnProperty(\"friends\") && z.friends !== undefined && Array.isArray(z.friends)){return true;}else{return false;}})(myDog), '<code>myDog</code> should contain the property <code>friends</code> and it should be an <code>array</code>.');"
         },
         {
-          "text": "<code>myDog</code> should only contain all the given properties.",
-          "testString": "assert((function(z){return Object.keys(z).length === 4;})(myDog), '<code>myDog</code> should only contain all the given properties.');"
+          "text":
+            "<code>myDog</code> should only contain all the given properties.",
+          "testString":
+            "assert((function(z){return Object.keys(z).length === 4;})(myDog), '<code>myDog</code> should only contain all the given properties.');"
         }
       ],
       "challengeType": 1,
@@ -5842,9 +6221,7 @@
             "};"
           ],
           "head": [],
-          "tail": [
-            "(function(z){return z;})(myDog);"
-          ]
+          "tail": ["(function(z){return z;})(myDog);"]
         }
       }
     },
@@ -5855,7 +6232,7 @@
         "There are two ways to access the properties of an object: dot notation (<code>.</code>) and bracket notation (<code>[]</code>), similar to an array.",
         "Dot notation is what you use when you know the name of the property you're trying to access ahead of time.",
         "Here is a sample of using dot notation (<code>.</code>) to read an object's property:",
-        "<blockquote>var myObj = {<br>  prop1: \"val1\",<br>  prop2: \"val2\"<br>};<br>var prop1val = myObj.prop1; // val1<br>var prop2val = myObj.prop2; // val2</blockquote>",
+        "<blockquote>var myObj = {<br>&nbsp;&nbsp;prop1: \"val1\",<br>&nbsp;&nbsp;prop2: \"val2\"<br>};<br>var prop1val = myObj.prop1; // val1<br>var prop2val = myObj.prop2; // val2</blockquote>",
         "<hr>",
         "Read in the property values of <code>testObj</code> using dot notation. Set the variable <code>hatValue</code> equal to the object's property <code>hat</code> and set the variable <code>shirtValue</code> equal to the object's property <code>shirt</code>."
       ],
@@ -5866,23 +6243,30 @@
       "tests": [
         {
           "text": "<code>hatValue</code> should be a string",
-          "testString": "assert(typeof hatValue === 'string' , '<code>hatValue</code> should be a string');"
+          "testString":
+            "assert(typeof hatValue === 'string' , '<code>hatValue</code> should be a string');"
         },
         {
-          "text": "The value of <code>hatValue</code> should be <code>\"ballcap\"</code>",
-          "testString": "assert(hatValue === 'ballcap' , 'The value of <code>hatValue</code> should be <code>\"ballcap\"</code>');"
+          "text":
+            "The value of <code>hatValue</code> should be <code>\"ballcap\"</code>",
+          "testString":
+            "assert(hatValue === 'ballcap' , 'The value of <code>hatValue</code> should be <code>\"ballcap\"</code>');"
         },
         {
           "text": "<code>shirtValue</code> should be a string",
-          "testString": "assert(typeof shirtValue === 'string' , '<code>shirtValue</code> should be a string');"
+          "testString":
+            "assert(typeof shirtValue === 'string' , '<code>shirtValue</code> should be a string');"
         },
         {
-          "text": "The value of <code>shirtValue</code> should be <code>\"jersey\"</code>",
-          "testString": "assert(shirtValue === 'jersey' , 'The value of <code>shirtValue</code> should be <code>\"jersey\"</code>');"
+          "text":
+            "The value of <code>shirtValue</code> should be <code>\"jersey\"</code>",
+          "testString":
+            "assert(shirtValue === 'jersey' , 'The value of <code>shirtValue</code> should be <code>\"jersey\"</code>');"
         },
         {
           "text": "You should use dot notation twice",
-          "testString": "assert(code.match(/testObj\\.\\w+/g).length > 1, 'You should use dot notation twice');"
+          "testString":
+            "assert(code.match(/testObj\\.\\w+/g).length > 1, 'You should use dot notation twice');"
         }
       ],
       "challengeType": 1,
@@ -5893,7 +6277,7 @@
             "Hay dos maneras de acceder a las propiedades de un objeto: con el operador punto (<code>.</code>) y con la notación corchete (<code>[]</code>), similar al caso de un vector.",
             "El operador punto es el que usas cuando de antemano sabes el nombre de la propiedad que estás intentando acceder.",
             "Aquí está un ejemplo del uso del operador punto (<code>.</code>) para leer una propiedad de un objeto:",
-            "<blockquote>var miObj = {<br>  prop1: \"val1\",<br>  prop2: \"val2\"<br>};<br>var prop1val = miObj.prop1; // val1<br>var prop2val = miObj.prop2; // val2</blockquote>",
+            "<blockquote>var miObj = {<br>&nbsp;&nbsp;prop1: \"val1\",<br>&nbsp;&nbsp;prop2: \"val2\"<br>};<br>var prop1val = miObj.prop1; // val1<br>var prop2val = miObj.prop2; // val2</blockquote>",
             "<h4>Instrucciones</h4>",
             "Lee los valores de propiedades de <code>testObj</code> usando notación punto. Asigna la variable <code>hatValue</code> igual a la propiedad objeto <code>hat</code> y asigna la variable <code>shirtValue</code> igual a la propiedad objeto <code>shirt</code>."
           ]
@@ -5931,7 +6315,7 @@
         "The second way to access the properties of an object is bracket notation (<code>[]</code>). If the property of the object you are trying to access has a space in its name, you will need to use bracket notation.",
         "However, you can still use bracket notation on object properties without spaces.",
         "Here is a sample of using bracket notation to read an object's property:",
-        "<blockquote>var myObj = {<br>  \"Space Name\": \"Kirk\",<br>  \"More Space\": \"Spock\",<br>  \"NoSpace\": \"USS Enterprise\"<br>};<br>myObj[\"Space Name\"]; // Kirk<br>myObj['More Space']; // Spock<br>myObj[\"NoSpace\"];    // USS Enterprise</blockquote>",
+        "<blockquote>var myObj = {<br>&nbsp;&nbsp;\"Space Name\": \"Kirk\",<br>&nbsp;&nbsp;\"More Space\": \"Spock\",<br>&nbsp;&nbsp;\"NoSpace\": \"USS Enterprise\"<br>};<br>myObj[\"Space Name\"]; // Kirk<br>myObj['More Space']; // Spock<br>myObj[\"NoSpace\"];    // USS Enterprise</blockquote>",
         "Note that property names with spaces in them must be in quotes (single or double).",
         "<hr>",
         "Read the values of the properties <code>\"an entree\"</code> and <code>\"the drink\"</code> of <code>testObj</code> using bracket notation and assign them to <code>entreeValue</code> and <code>drinkValue</code> respectively."
@@ -5943,40 +6327,49 @@
       "tests": [
         {
           "text": "<code>entreeValue</code> should be a string",
-          "testString": "assert(typeof entreeValue === 'string' , '<code>entreeValue</code> should be a string');"
+          "testString":
+            "assert(typeof entreeValue === 'string' , '<code>entreeValue</code> should be a string');"
         },
         {
-          "text": "The value of <code>entreeValue</code> should be <code>\"hamburger\"</code>",
-          "testString": "assert(entreeValue === 'hamburger' , 'The value of <code>entreeValue</code> should be <code>\"hamburger\"</code>');"
+          "text":
+            "The value of <code>entreeValue</code> should be <code>\"hamburger\"</code>",
+          "testString":
+            "assert(entreeValue === 'hamburger' , 'The value of <code>entreeValue</code> should be <code>\"hamburger\"</code>');"
         },
         {
           "text": "<code>drinkValue</code> should be a string",
-          "testString": "assert(typeof drinkValue === 'string' , '<code>drinkValue</code> should be a string');"
+          "testString":
+            "assert(typeof drinkValue === 'string' , '<code>drinkValue</code> should be a string');"
         },
         {
-          "text": "The value of <code>drinkValue</code> should be <code>\"water\"</code>",
-          "testString": "assert(drinkValue === 'water' , 'The value of <code>drinkValue</code> should be <code>\"water\"</code>');"
+          "text":
+            "The value of <code>drinkValue</code> should be <code>\"water\"</code>",
+          "testString":
+            "assert(drinkValue === 'water' , 'The value of <code>drinkValue</code> should be <code>\"water\"</code>');"
         },
         {
           "text": "You should use bracket notation twice",
-          "testString": "assert(code.match(/testObj\\s*?\\[('|\")[^'\"]+\\1\\]/g).length > 1, 'You should use bracket notation twice');"
+          "testString":
+            "assert(code.match(/testObj\\s*?\\[('|\")[^'\"]+\\1\\]/g).length > 1, 'You should use bracket notation twice');"
         }
       ],
       "challengeType": 1,
       "translations": {
         "es": {
-          "title": "Acceder a las propiedades de objetos con la notación corchete",
+          "title":
+            "Acceder a las propiedades de objetos con la notación corchete",
           "description": [
             "La segunda manera de acceder a las propiedades de un objeto es con la notación corchete (<code>[]</code>). Si el nombre de la propiedad del objeto que estás intentando acceder tiene un espacio, necesitarás usar la notación corchete.",
             "Aquí está un ejemplo del uso de la notación corchete para leer una propiedad de un objeto:",
-            "<blockquote>var miObj = {<br>  \"Nombre con espacio\": \"Kirk\",<br>  \"Mas espacio\": \"Spock\"<br>};<br>miObj[\"Nombre con espacio\"]; // Kirk<br>miObj['Mas espacio']; // Spock</blockquote>",
+            "<blockquote>var miObj = {<br>&nbsp;&nbsp;\"Nombre con espacio\": \"Kirk\",<br>&nbsp;&nbsp;\"Mas espacio\": \"Spock\"<br>};<br>miObj[\"Nombre con espacio\"]; // Kirk<br>miObj['Mas espacio']; // Spock</blockquote>",
             "Nota que los nombres de propiedades con espacios tienen que estar entre comillas (apóstrofes o comillas).",
             "<h4>Instrucciones</h4>",
             "Lee los valores de las propiedades <code>\"an entree\"</code> y <code>\"the drink\"</code> de <code>testObj</code> usando la notación corchete."
           ]
         }
       },
-      "guideUrl": "https://guide.freecodecamp.org/certificates/accessing-objects-properties-with-bracket-notation",
+      "guideUrl":
+        "https://guide.freecodecamp.org/certificates/accessing-objects-properties-with-bracket-notation",
       "files": {
         "indexjs": {
           "key": "indexjs",
@@ -6008,9 +6401,9 @@
       "description": [
         "Another use of bracket notation on objects is to access a property which is stored as the value of a variable. This can be very useful for iterating through an object's properties or when accessing a lookup table.",
         "Here is an example of using a variable to access a property:",
-        "<blockquote>var dogs = {<br>  Fido: \"Mutt\",\n  Hunter: \"Doberman\",\n  Snoopie: \"Beagle\"<br>};<br>var myDog = \"Hunter\";<br>var myBreed = dogs[myDog];<br>console.log(myBreed); // \"Doberman\"</blockquote>",
+        "<blockquote>var dogs = {<br>&nbsp;&nbsp;Fido: \"Mutt\",\n  Hunter: \"Doberman\",\n  Snoopie: \"Beagle\"<br>};<br>var myDog = \"Hunter\";<br>var myBreed = dogs[myDog];<br>console.log(myBreed); // \"Doberman\"</blockquote>",
         "Another way you can use this concept is when the property's name is collected dynamically during the program execution, as follows:",
-        "<blockquote>var someObj = {<br>  propName: \"John\"<br>};<br>function propPrefix(str) {<br>  var s = \"prop\";<br>  return s + str;<br>}<br>var someProp = propPrefix(\"Name\"); // someProp now holds the value 'propName'<br>console.log(someObj[someProp]); // \"John\"</blockquote>",
+        "<blockquote>var someObj = {<br>&nbsp;&nbsp;propName: \"John\"<br>};<br>function propPrefix(str) {<br>&nbsp;&nbsp;var s = \"prop\";<br>&nbsp;&nbsp;return s + str;<br>}<br>var someProp = propPrefix(\"Name\"); // someProp now holds the value 'propName'<br>console.log(someObj[someProp]); // \"John\"</blockquote>",
         "Note that we do <em>not</em> use quotes around the variable name when using it to access the property because we are using the <em>value</em> of the variable, not the <em>name</em>.",
         "<hr>",
         "Use the <code>playerNumber</code> variable to look up player <code>16</code> in <code>testObj</code> using bracket notation. Then assign that name to the <code>player</code> variable."
@@ -6022,27 +6415,36 @@
       "tests": [
         {
           "text": "<code>playerNumber</code> should be a number",
-          "testString": "assert(typeof playerNumber === 'number', '<code>playerNumber</code> should be a number');"
+          "testString":
+            "assert(typeof playerNumber === 'number', '<code>playerNumber</code> should be a number');"
         },
         {
           "text": "The variable <code>player</code> should be a string",
-          "testString": "assert(typeof player === 'string', 'The variable <code>player</code> should be a string');"
+          "testString":
+            "assert(typeof player === 'string', 'The variable <code>player</code> should be a string');"
         },
         {
           "text": "The value of <code>player</code> should be \"Montana\"",
-          "testString": "assert(player === 'Montana', 'The value of <code>player</code> should be \"Montana\"');"
+          "testString":
+            "assert(player === 'Montana', 'The value of <code>player</code> should be \"Montana\"');"
         },
         {
-          "text": "You should use bracket notation to access <code>testObj</code>",
-          "testString": "assert(/testObj\\s*?\\[.*?\\]/.test(code),'You should use bracket notation to access <code>testObj</code>');"
+          "text":
+            "You should use bracket notation to access <code>testObj</code>",
+          "testString":
+            "assert(/testObj\\s*?\\[.*?\\]/.test(code),'You should use bracket notation to access <code>testObj</code>');"
         },
         {
-          "text": "You should not assign the value <code>Montana</code> to the variable <code>player</code> directly.",
-          "testString": "assert(!code.match(/player\\s*=\\s*\"|\\'\\s*Montana\\s*\"|\\'\\s*;/gi),'You should not assign the value <code>Montana</code> to the variable <code>player</code> directly.');"
+          "text":
+            "You should not assign the value <code>Montana</code> to the variable <code>player</code> directly.",
+          "testString":
+            "assert(!code.match(/player\\s*=\\s*\"|\\'\\s*Montana\\s*\"|\\'\\s*;/gi),'You should not assign the value <code>Montana</code> to the variable <code>player</code> directly.');"
         },
         {
-          "text": "You should be using the variable <code>playerNumber</code> in your bracket notation",
-          "testString": "assert(/testObj\\s*?\\[\\s*playerNumber\\s*\\]/.test(code),'You should be using the variable <code>playerNumber</code> in your bracket notation');"
+          "text":
+            "You should be using the variable <code>playerNumber</code> in your bracket notation",
+          "testString":
+            "assert(/testObj\\s*?\\[\\s*playerNumber\\s*\\]/.test(code),'You should be using the variable <code>playerNumber</code> in your bracket notation');"
         }
       ],
       "challengeType": 1,
@@ -6052,16 +6454,17 @@
           "description": [
             "Otro uso de la notación corchete sobre objetos es usar una variable para acceder a una propiedad. Esto puede ser muy útil en iteraciones sobre la lista de propiedades de un objetos o para hacer operaciones de búsqueda.",
             "Aquí está un ejemplo del uso de una variable para acceder a una propiedad:",
-            "<blockquote>var algunaProp = \"propNombre\";<br>var miObj = {<br>  propNombre: \"Algún valor\"<br >}<br>miObj[algunaProp]; // \"Algún valor\"</blockquote>",
+            "<blockquote>var algunaProp = \"propNombre\";<br>var miObj = {<br>&nbsp;&nbsp;propNombre: \"Algún valor\"<br >}<br>miObj[algunaProp]; // \"Algún valor\"</blockquote>",
             "Aquí hay uno más:",
-            "<blockquote>var miPerro = \"Cazador\";<br>var perros = {<br>  Fido: \"Mutt\",\n  Cazador: \"Doberman\",\n  Snoopie: \"Beagle\"<br >}<br>var raza = perros[miPerro]; // \"Cazador\"<br>console.log(raza)// \"Doberman\"</blockquote>",
+            "<blockquote>var miPerro = \"Cazador\";<br>var perros = {<br>&nbsp;&nbsp;Fido: \"Mutt\",\n  Cazador: \"Doberman\",\n  Snoopie: \"Beagle\"<br >}<br>var raza = perros[miPerro]; // \"Cazador\"<br>console.log(raza)// \"Doberman\"</blockquote>",
             "Nota que <em>no</em> usamos comillas alrededor del nombre de la variable (<code>miPerro</code>) cuando la usamos para acceder a la propiedad (<code>perros[miPerro]</code> porque estamos usando el <em>valor</em> de la variable y no su <em>nombre</em>",
             "<h4>Instrucciones</h4>",
             "Usa la variable <code>playerNumber</code> para buscar y asignar a <code>player</code> el jugador <code>16</code> de <code>testObj</code>, usa la notación corchete."
           ]
         }
       },
-      "guideUrl": "https://guide.freecodecamp.org/certificates/accessing-objects-properties-with-variables",
+      "guideUrl":
+        "https://guide.freecodecamp.org/certificates/accessing-objects-properties-with-variables",
       "files": {
         "indexjs": {
           "key": "indexjs",
@@ -6093,7 +6496,7 @@
       "description": [
         "After you've created a JavaScript object, you can update its properties at any time just like you would update any other variable. You can use either dot or bracket notation to update.",
         "For example, let's look at <code>ourDog</code>:",
-        "<blockquote>var ourDog = {<br>  \"name\": \"Camper\",<br>  \"legs\": 4,<br>  \"tails\": 1,<br>  \"friends\": [\"everything!\"]<br>};</blockquote>",
+        "<blockquote>var ourDog = {<br>&nbsp;&nbsp;\"name\": \"Camper\",<br>&nbsp;&nbsp;\"legs\": 4,<br>&nbsp;&nbsp;\"tails\": 1,<br>&nbsp;&nbsp;\"friends\": [\"everything!\"]<br>};</blockquote>",
         "Since he's a particularly happy dog, let's change his name to \"Happy Camper\". Here's how we update his object's name property:",
         "<code>ourDog.name = \"Happy Camper\";</code> or",
         "<code>ourDog[\"name\"] = \"Happy Camper\";</code>",
@@ -6106,12 +6509,15 @@
       ],
       "tests": [
         {
-          "text": "Update <code>myDog</code>&apos;s <code>\"name\"</code> property to equal \"Happy Coder\".",
-          "testString": "assert(/happy coder/gi.test(myDog.name), 'Update <code>myDog</code>&apos;s <code>\"name\"</code> property to equal \"Happy Coder\".');"
+          "text":
+            "Update <code>myDog</code>&apos;s <code>\"name\"</code> property to equal \"Happy Coder\".",
+          "testString":
+            "assert(/happy coder/gi.test(myDog.name), 'Update <code>myDog</code>&apos;s <code>\"name\"</code> property to equal \"Happy Coder\".');"
         },
         {
           "text": "Do not edit the <code>myDog</code> definition",
-          "testString": "assert(/\"name\": \"Coder\"/.test(code), 'Do not edit the <code>myDog</code> definition');"
+          "testString":
+            "assert(/\"name\": \"Coder\"/.test(code), 'Do not edit the <code>myDog</code> definition');"
         }
       ],
       "challengeType": 1,
@@ -6164,9 +6570,7 @@
             ""
           ],
           "head": [],
-          "tail": [
-            "(function(z){return z;})(myDog);"
-          ]
+          "tail": ["(function(z){return z;})(myDog);"]
         }
       }
     },
@@ -6188,12 +6592,15 @@
       ],
       "tests": [
         {
-          "text": "Add the property <code>\"bark\"</code> to <code>myDog</code>.",
-          "testString": "assert(myDog.bark !== undefined, 'Add the property <code>\"bark\"</code> to <code>myDog</code>.');"
+          "text":
+            "Add the property <code>\"bark\"</code> to <code>myDog</code>.",
+          "testString":
+            "assert(myDog.bark !== undefined, 'Add the property <code>\"bark\"</code> to <code>myDog</code>.');"
         },
         {
           "text": "Do not add <code>\"bark\"</code> to the setup section",
-          "testString": "assert(!/bark[^\\n]:/.test(code), 'Do not add <code>\"bark\"</code> to the setup section');"
+          "testString":
+            "assert(!/bark[^\\n]:/.test(code), 'Do not add <code>\"bark\"</code> to the setup section');"
         }
       ],
       "challengeType": 1,
@@ -6238,9 +6645,7 @@
             ""
           ],
           "head": [],
-          "tail": [
-            "(function(z){return z;})(myDog);"
-          ]
+          "tail": ["(function(z){return z;})(myDog);"]
         }
       }
     },
@@ -6258,12 +6663,15 @@
       ],
       "tests": [
         {
-          "text": "Delete the property <code>\"tails\"</code> from <code>myDog</code>.",
-          "testString": "assert(typeof myDog === \"object\" && myDog.tails === undefined, 'Delete the property <code>\"tails\"</code> from <code>myDog</code>.');"
+          "text":
+            "Delete the property <code>\"tails\"</code> from <code>myDog</code>.",
+          "testString":
+            "assert(typeof myDog === \"object\" && myDog.tails === undefined, 'Delete the property <code>\"tails\"</code> from <code>myDog</code>.');"
         },
         {
           "text": "Do not modify the <code>myDog</code> setup",
-          "testString": "assert(code.match(/\"tails\": 1/g).length > 1, 'Do not modify the <code>myDog</code> setup');"
+          "testString":
+            "assert(code.match(/\"tails\": 1/g).length > 1, 'Do not modify the <code>myDog</code> setup');"
         }
       ],
       "challengeType": 1,
@@ -6309,9 +6717,7 @@
             ""
           ],
           "head": [],
-          "tail": [
-            "(function(z){return z;})(myDog);"
-          ]
+          "tail": ["(function(z){return z;})(myDog);"]
         }
       }
     },
@@ -6321,7 +6727,7 @@
       "description": [
         "Objects can be thought of as a key/value storage, like a dictionary. If you have tabular data, you can use an object to \"lookup\" values rather than a <code>switch</code> statement or an <code>if/else</code> chain. This is most useful when you know that your input data is limited to a certain range.",
         "Here is an example of a simple reverse alphabet lookup:",
-        "<blockquote>var alpha = {<br>  1:\"Z\",<br>  2:\"Y\",<br>  3:\"X\",<br>  4:\"W\",<br>  ...<br>  24:\"C\",<br>  25:\"B\",<br>  26:\"A\"<br>};<br>alpha[2]; // \"Y\"<br>alpha[24]; // \"C\"<br><br>var value = 2;<br>alpha[value]; // \"Y\"</blockquote>",
+        "<blockquote>var alpha = {<br>&nbsp;&nbsp;1:\"Z\",<br>&nbsp;&nbsp;2:\"Y\",<br>&nbsp;&nbsp;3:\"X\",<br>&nbsp;&nbsp;4:\"W\",<br>&nbsp;&nbsp;...<br>&nbsp;&nbsp;24:\"C\",<br>&nbsp;&nbsp;25:\"B\",<br>&nbsp;&nbsp;26:\"A\"<br>};<br>alpha[2]; // \"Y\"<br>alpha[24]; // \"C\"<br><br>var value = 2;<br>alpha[value]; // \"Y\"</blockquote>",
         "<hr>",
         "Convert the switch statement into an object called <code>lookup</code>. Use it to look up <code>val</code> and assign the associated string to the <code>result</code> variable."
       ],
@@ -6331,40 +6737,57 @@
       ],
       "tests": [
         {
-          "text": "<code>phoneticLookup(\"alpha\")</code> should equal <code>\"Adams\"</code>",
-          "testString": "assert(phoneticLookup(\"alpha\") === 'Adams', '<code>phoneticLookup(\"alpha\")</code> should equal <code>\"Adams\"</code>');"
+          "text":
+            "<code>phoneticLookup(\"alpha\")</code> should equal <code>\"Adams\"</code>",
+          "testString":
+            "assert(phoneticLookup(\"alpha\") === 'Adams', '<code>phoneticLookup(\"alpha\")</code> should equal <code>\"Adams\"</code>');"
         },
         {
-          "text": "<code>phoneticLookup(\"bravo\")</code> should equal <code>\"Boston\"</code>",
-          "testString": "assert(phoneticLookup(\"bravo\") === 'Boston', '<code>phoneticLookup(\"bravo\")</code> should equal <code>\"Boston\"</code>');"
+          "text":
+            "<code>phoneticLookup(\"bravo\")</code> should equal <code>\"Boston\"</code>",
+          "testString":
+            "assert(phoneticLookup(\"bravo\") === 'Boston', '<code>phoneticLookup(\"bravo\")</code> should equal <code>\"Boston\"</code>');"
         },
         {
-          "text": "<code>phoneticLookup(\"charlie\")</code> should equal <code>\"Chicago\"</code>",
-          "testString": "assert(phoneticLookup(\"charlie\") === 'Chicago', '<code>phoneticLookup(\"charlie\")</code> should equal <code>\"Chicago\"</code>');"
+          "text":
+            "<code>phoneticLookup(\"charlie\")</code> should equal <code>\"Chicago\"</code>",
+          "testString":
+            "assert(phoneticLookup(\"charlie\") === 'Chicago', '<code>phoneticLookup(\"charlie\")</code> should equal <code>\"Chicago\"</code>');"
         },
         {
-          "text": "<code>phoneticLookup(\"delta\")</code> should equal <code>\"Denver\"</code>",
-          "testString": "assert(phoneticLookup(\"delta\") === 'Denver', '<code>phoneticLookup(\"delta\")</code> should equal <code>\"Denver\"</code>');"
+          "text":
+            "<code>phoneticLookup(\"delta\")</code> should equal <code>\"Denver\"</code>",
+          "testString":
+            "assert(phoneticLookup(\"delta\") === 'Denver', '<code>phoneticLookup(\"delta\")</code> should equal <code>\"Denver\"</code>');"
         },
         {
-          "text": "<code>phoneticLookup(\"echo\")</code> should equal <code>\"Easy\"</code>",
-          "testString": "assert(phoneticLookup(\"echo\") === 'Easy', '<code>phoneticLookup(\"echo\")</code> should equal <code>\"Easy\"</code>');"
+          "text":
+            "<code>phoneticLookup(\"echo\")</code> should equal <code>\"Easy\"</code>",
+          "testString":
+            "assert(phoneticLookup(\"echo\") === 'Easy', '<code>phoneticLookup(\"echo\")</code> should equal <code>\"Easy\"</code>');"
         },
         {
-          "text": "<code>phoneticLookup(\"foxtrot\")</code> should equal <code>\"Frank\"</code>",
-          "testString": "assert(phoneticLookup(\"foxtrot\") === 'Frank', '<code>phoneticLookup(\"foxtrot\")</code> should equal <code>\"Frank\"</code>');"
+          "text":
+            "<code>phoneticLookup(\"foxtrot\")</code> should equal <code>\"Frank\"</code>",
+          "testString":
+            "assert(phoneticLookup(\"foxtrot\") === 'Frank', '<code>phoneticLookup(\"foxtrot\")</code> should equal <code>\"Frank\"</code>');"
         },
         {
-          "text": "<code>phoneticLookup(\"\")</code> should equal <code>undefined</code>",
-          "testString": "assert(typeof phoneticLookup(\"\") === 'undefined', '<code>phoneticLookup(\"\")</code> should equal <code>undefined</code>');"
+          "text":
+            "<code>phoneticLookup(\"\")</code> should equal <code>undefined</code>",
+          "testString":
+            "assert(typeof phoneticLookup(\"\") === 'undefined', '<code>phoneticLookup(\"\")</code> should equal <code>undefined</code>');"
         },
         {
           "text": "You should not modify the <code>return</code> statement",
-          "testString": "assert(code.match(/return\\sresult;/), 'You should not modify the <code>return</code> statement');"
+          "testString":
+            "assert(code.match(/return\\sresult;/), 'You should not modify the <code>return</code> statement');"
         },
         {
-          "text": "You should not use <code>case</code>, <code>switch</code>, or <code>if</code> statements",
-          "testString": "assert(!/case|switch|if/g.test(code), 'You should not use <code>case</code>, <code>switch</code>, or <code>if</code> statements'); "
+          "text":
+            "You should not use <code>case</code>, <code>switch</code>, or <code>if</code> statements",
+          "testString":
+            "assert(!/case|switch|if/g.test(code), 'You should not use <code>case</code>, <code>switch</code>, or <code>if</code> statements'); "
         }
       ],
       "challengeType": 1,
@@ -6374,7 +6797,7 @@
           "description": [
             "Los objetos pueden ser considerados como un almacenamiento llave/valor, como un diccionario. Si tienes datos tabulados, puedes almacenarlos en un objeto para después \"buscar\" valores, en lugar de emplear una sentencia <code>switch</code> o una secuencia de <code>if/else</code>. Esto es más útil cuando sabes que tus datos de entrada son limitados a un cierto rango.",
             "Aquí está un ejemplo de una simple búsqueda inversa de alfabeto:",
-            "<blockquote>var alfa = {<br>  1:\"Z\",<br>  2:\"Y\",<br>  3:\"X\",<br>  4:\"W\",<br>  ...<br>  24:\"C\",<br>  25:\"B\",<br>  26:\"A\"<br>};<br>alfa[2]; // \"Y\"<br>alfa[24]; // \"C\"<br><br>var valor = 2;<br>alfa[valor]; // \"Y\"</blockquote>",
+            "<blockquote>var alfa = {<br>&nbsp;&nbsp;1:\"Z\",<br>&nbsp;&nbsp;2:\"Y\",<br>&nbsp;&nbsp;3:\"X\",<br>&nbsp;&nbsp;4:\"W\",<br>&nbsp;&nbsp;...<br>&nbsp;&nbsp;24:\"C\",<br>&nbsp;&nbsp;25:\"B\",<br>&nbsp;&nbsp;26:\"A\"<br>};<br>alfa[2]; // \"Y\"<br>alfa[24]; // \"C\"<br><br>var valor = 2;<br>alfa[valor]; // \"Y\"</blockquote>",
             "<h4>Instrucciones</h4>",
             "Convierte la sentencia switch en una tabla de búsqueda llamada <code>lookup</code>. Usala para buscar <code>val</code> y asigna la cadena asociada a la variable <code>result</code>."
           ]
@@ -6429,7 +6852,7 @@
       "description": [
         "Sometimes it is useful to check if the property of a given object exists or not. We can use the <code>.hasOwnProperty(propname)</code> method of objects to determine if that object has the given property name. <code>.hasOwnProperty()</code> returns <code>true</code> or <code>false</code> if the property is found or not.",
         "<strong>Example</strong>",
-        "<blockquote>var myObj = {<br>  top: \"hat\",<br>  bottom: \"pants\"<br>};<br>myObj.hasOwnProperty(\"top\");    // true<br>myObj.hasOwnProperty(\"middle\"); // false</blockquote>",
+        "<blockquote>var myObj = {<br>&nbsp;&nbsp;top: \"hat\",<br>&nbsp;&nbsp;bottom: \"pants\"<br>};<br>myObj.hasOwnProperty(\"top\");    // true<br>myObj.hasOwnProperty(\"middle\"); // false</blockquote>",
         "<hr>",
         "Modify the function <code>checkObj</code> to test <code>myObj</code> for <code>checkProp</code>. If the property is found, return that property's value. If not, return <code>\"Not Found\"</code>."
       ],
@@ -6439,16 +6862,22 @@
       ],
       "tests": [
         {
-          "text": "<code>checkObj(\"gift\")</code> should return  <code>\"pony\"</code>.",
-          "testString": "assert(checkObj(\"gift\") === \"pony\", '<code>checkObj(\"gift\")</code> should return  <code>\"pony\"</code>.');"
+          "text":
+            "<code>checkObj(\"gift\")</code> should return  <code>\"pony\"</code>.",
+          "testString":
+            "assert(checkObj(\"gift\") === \"pony\", '<code>checkObj(\"gift\")</code> should return  <code>\"pony\"</code>.');"
         },
         {
-          "text": "<code>checkObj(\"pet\")</code> should return  <code>\"kitten\"</code>.",
-          "testString": "assert(checkObj(\"pet\") === \"kitten\", '<code>checkObj(\"pet\")</code> should return  <code>\"kitten\"</code>.');"
+          "text":
+            "<code>checkObj(\"pet\")</code> should return  <code>\"kitten\"</code>.",
+          "testString":
+            "assert(checkObj(\"pet\") === \"kitten\", '<code>checkObj(\"pet\")</code> should return  <code>\"kitten\"</code>.');"
         },
         {
-          "text": "<code>checkObj(\"house\")</code> should return  <code>\"Not Found\"</code>.",
-          "testString": "assert(checkObj(\"house\") === \"Not Found\", '<code>checkObj(\"house\")</code> should return  <code>\"Not Found\"</code>.');"
+          "text":
+            "<code>checkObj(\"house\")</code> should return  <code>\"Not Found\"</code>.",
+          "testString":
+            "assert(checkObj(\"house\") === \"Not Found\", '<code>checkObj(\"house\")</code> should return  <code>\"Not Found\"</code>.');"
         }
       ],
       "challengeType": 1,
@@ -6458,7 +6887,7 @@
           "description": [
             "A veces es útil revisar si cierta propiedad existe o no en un objeto dado. Podemos usar el método de objetos <code>.hasOwnProperty(nomprop)</code> para determinar si un objeto tiene la propiedad <code>nomprop</code>. <code>.hasOwnProperty()</code> retorna <code>true</code> o <code>false</code> si la propiedad es encontrada o no.",
             "<strong>Ejemplo</strong>",
-            "<blockquote>var miObj = {<br>  arriba: \"sombrero\",<br>  abajo: \"pantalones\"<br>};<br>miObj.hasOwnProperty(\"arriba\");    // true<br>miObj.hasOwnProperty(\"medio\"); // false</blockquote>",
+            "<blockquote>var miObj = {<br>&nbsp;&nbsp;arriba: \"sombrero\",<br>&nbsp;&nbsp;abajo: \"pantalones\"<br>};<br>miObj.hasOwnProperty(\"arriba\");    // true<br>miObj.hasOwnProperty(\"medio\"); // false</blockquote>",
             "<h4>Instrucciones</h4>",
             "Modifica la función <code>checkObj</code> que prueba si <code>myObj</code> tiene la propiedad <code>checkProp</code>. Si la propiedad es encontrada, retorna el valor de esa propiedad. Si no, retorna <code>\"Not Found\"</code>."
           ]
@@ -6497,11 +6926,11 @@
       "description": [
         "Sometimes you may want to store data in a flexible <dfn>Data Structure</dfn>. A JavaScript object is one way to handle flexible data. They allow for arbitrary combinations of <dfn>strings</dfn>, <dfn>numbers</dfn>, <dfn>booleans</dfn>, <dfn>arrays</dfn>, <dfn>functions</dfn>, and <dfn>objects</dfn>.",
         "Here's an example of a complex data structure:",
-        "<blockquote>var ourMusic = [<br>  {<br>    \"artist\": \"Daft Punk\",<br>    \"title\": \"Homework\",<br>    \"release_year\": 1997,<br>    \"formats\": [ <br>      \"CD\", <br>      \"Cassette\", <br>      \"LP\"<br>    ],<br>    \"gold\": true<br>  }<br>];</blockquote>",
+        "<blockquote>var ourMusic = [<br>&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;\"artist\": \"Daft Punk\",<br>&nbsp;&nbsp;&nbsp;&nbsp;\"title\": \"Homework\",<br>&nbsp;&nbsp;&nbsp;&nbsp;\"release_year\": 1997,<br>&nbsp;&nbsp;&nbsp;&nbsp;\"formats\": [ <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"CD\", <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"Cassette\", <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"LP\"<br>&nbsp;&nbsp;&nbsp;&nbsp;],<br>&nbsp;&nbsp;&nbsp;&nbsp;\"gold\": true<br>&nbsp;&nbsp;}<br>];</blockquote>",
         "This is an array which contains one object inside. The object has various pieces of <dfn>metadata</dfn> about an album. It also has a nested <code>\"formats\"</code> array. If you want to add more album records, you can do this by adding records to the top level array.",
         "Objects hold data in a property, which has a key-value format. In the example above, <code>\"artist\": \"Daft Punk\"</code> is a property that has a key of <code>\"artist\"</code> and a value of <code>\"Daft Punk\"</code>.",
         "<a href='http://www.json.org/' target=_blank>JavaScript Object Notation</a> or <code>JSON</code> is a related data interchange format used to store data.",
-        "<blockquote>{<br>  \"artist\": \"Daft Punk\",<br>  \"title\": \"Homework\",<br>  \"release_year\": 1997,<br>  \"formats\": [ <br>    \"CD\",<br>    \"Cassette\",<br>    \"LP\"<br>  ],<br>  \"gold\": true<br>}</blockquote>",
+        "<blockquote>{<br>&nbsp;&nbsp;\"artist\": \"Daft Punk\",<br>&nbsp;&nbsp;\"title\": \"Homework\",<br>&nbsp;&nbsp;\"release_year\": 1997,<br>&nbsp;&nbsp;\"formats\": [ <br>&nbsp;&nbsp;&nbsp;&nbsp;\"CD\",<br>&nbsp;&nbsp;&nbsp;&nbsp;\"Cassette\",<br>&nbsp;&nbsp;&nbsp;&nbsp;\"LP\"<br>&nbsp;&nbsp;],<br>&nbsp;&nbsp;\"gold\": true<br>}</blockquote>",
         "<strong>Note</strong><br>You will need to place a comma after every object in the array, unless it is the last object in the array.",
         "<hr>",
         "Add a new album to the <code>myMusic</code> array. Add <code>artist</code> and <code>title</code> strings, <code>release_year</code> number, and a <code>formats</code> array of strings."
@@ -6513,39 +6942,53 @@
       "tests": [
         {
           "text": "<code>myMusic</code> should be an array",
-          "testString": "assert(Array.isArray(myMusic), '<code>myMusic</code> should be an array');"
+          "testString":
+            "assert(Array.isArray(myMusic), '<code>myMusic</code> should be an array');"
         },
         {
           "text": "<code>myMusic</code> should have at least two elements",
-          "testString": "assert(myMusic.length > 1, '<code>myMusic</code> should have at least two elements');"
+          "testString":
+            "assert(myMusic.length > 1, '<code>myMusic</code> should have at least two elements');"
         },
         {
           "text": "<code>myMusic[1]</code> should be an object",
-          "testString": "assert(typeof myMusic[1] === 'object', '<code>myMusic[1]</code> should be an object');"
+          "testString":
+            "assert(typeof myMusic[1] === 'object', '<code>myMusic[1]</code> should be an object');"
         },
         {
           "text": "<code>myMusic[1]</code> should have at least 4 properties",
-          "testString": "assert(Object.keys(myMusic[1]).length > 3, '<code>myMusic[1]</code> should have at least 4 properties');"
+          "testString":
+            "assert(Object.keys(myMusic[1]).length > 3, '<code>myMusic[1]</code> should have at least 4 properties');"
         },
         {
-          "text": "<code>myMusic[1]</code> should contain an <code>artist</code> property which is a string",
-          "testString": "assert(myMusic[1].hasOwnProperty('artist') && typeof myMusic[1].artist === 'string', '<code>myMusic[1]</code> should contain an <code>artist</code> property which is a string');"
+          "text":
+            "<code>myMusic[1]</code> should contain an <code>artist</code> property which is a string",
+          "testString":
+            "assert(myMusic[1].hasOwnProperty('artist') && typeof myMusic[1].artist === 'string', '<code>myMusic[1]</code> should contain an <code>artist</code> property which is a string');"
         },
         {
-          "text": "<code>myMusic[1]</code> should  contain a <code>title</code> property which is a string",
-          "testString": "assert(myMusic[1].hasOwnProperty('title') && typeof myMusic[1].title === 'string', '<code>myMusic[1]</code> should  contain a <code>title</code> property which is a string');"
+          "text":
+            "<code>myMusic[1]</code> should  contain a <code>title</code> property which is a string",
+          "testString":
+            "assert(myMusic[1].hasOwnProperty('title') && typeof myMusic[1].title === 'string', '<code>myMusic[1]</code> should  contain a <code>title</code> property which is a string');"
         },
         {
-          "text": "<code>myMusic[1]</code> should contain a <code>release_year</code> property which is a number",
-          "testString": "assert(myMusic[1].hasOwnProperty('release_year') && typeof myMusic[1].release_year === 'number', '<code>myMusic[1]</code> should contain a <code>release_year</code> property which is a number');"
+          "text":
+            "<code>myMusic[1]</code> should contain a <code>release_year</code> property which is a number",
+          "testString":
+            "assert(myMusic[1].hasOwnProperty('release_year') && typeof myMusic[1].release_year === 'number', '<code>myMusic[1]</code> should contain a <code>release_year</code> property which is a number');"
         },
         {
-          "text": "<code>myMusic[1]</code> should contain a <code>formats</code> property which is an array",
-          "testString": "assert(myMusic[1].hasOwnProperty('formats') && Array.isArray(myMusic[1].formats), '<code>myMusic[1]</code> should contain a <code>formats</code> property which is an array');"
+          "text":
+            "<code>myMusic[1]</code> should contain a <code>formats</code> property which is an array",
+          "testString":
+            "assert(myMusic[1].hasOwnProperty('formats') && Array.isArray(myMusic[1].formats), '<code>myMusic[1]</code> should contain a <code>formats</code> property which is an array');"
         },
         {
-          "text": "<code>formats</code> should be an array of strings with at least two elements",
-          "testString": "assert(myMusic[1].formats.every(function(item) { return (typeof item === \"string\")}) && myMusic[1].formats.length > 1, '<code>formats</code> should be an array of strings with at least two elements');"
+          "text":
+            "<code>formats</code> should be an array of strings with at least two elements",
+          "testString":
+            "assert(myMusic[1].formats.every(function(item) { return (typeof item === \"string\")}) && myMusic[1].formats.length > 1, '<code>formats</code> should be an array of strings with at least two elements');"
         }
       ],
       "challengeType": 1,
@@ -6555,7 +6998,7 @@
           "description": [
             "Los objetos JavaScript son flexibles porque permiten <dfn>Estructuras de Datos</dfn> con combinaciones arbitrarias de <dfn>cadenas</dfn>, <dfn>números</dfn>, <dfn>booleanos</dfn>, <dfn>vectores</dfn>, <dfn>funciones</dfn>, y <dfn>objetos</dfn>.",
             "Aquí está un ejemplo de un objeto complicado:",
-            "<blockquote>var nuestraMusica = [<br>  {<br>    \"artista\": \"Daft Punk\",<br>    \"titulo\": \"Homework\",<br>    \"año_publicacion\": 1997,<br>    \"formatos\": [ <br>      \"CD\", <br>      \"Cassette\", <br>      \"LP\" ],<br>    \"oro\": true<br>  }<br>];</blockquote>",
+            "<blockquote>var nuestraMusica = [<br>&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;\"artista\": \"Daft Punk\",<br>&nbsp;&nbsp;&nbsp;&nbsp;\"titulo\": \"Homework\",<br>&nbsp;&nbsp;&nbsp;&nbsp;\"año_publicacion\": 1997,<br>&nbsp;&nbsp;&nbsp;&nbsp;\"formatos\": [ <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"CD\", <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"Cassette\", <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"LP\" ],<br>&nbsp;&nbsp;&nbsp;&nbsp;\"oro\": true<br>&nbsp;&nbsp;}<br>];</blockquote>",
             "Este es un vector de objetos con diversos <dfn>metadatos</dfn> acerca de un álbum musical. Además tiene anidado un vector <code>formatos</code>. En el vector de nivel superior, pueden añadirse otros registros del álbum.",
             "<strong>Nota</strong><br>En vectores que tengan más de un objeto, necesitarás separar un objeto de otro mediante comas.",
             "<h4>Instrucciones</h4>",
@@ -6598,7 +7041,7 @@
       "description": [
         "The sub-properties of objects can be accessed by chaining together the dot or bracket notation.",
         "Here is a nested object:",
-        "<blockquote>var ourStorage = {<br>  \"desk\": {<br>    \"drawer\": \"stapler\"<br>  },<br>  \"cabinet\": {<br>    \"top drawer\": { <br>      \"folder1\": \"a file\",<br>      \"folder2\": \"secrets\"<br>    },<br>    \"bottom drawer\": \"soda\"<br>  }<br>};<br>ourStorage.cabinet[\"top drawer\"].folder2;  // \"secrets\"<br>ourStorage.desk.drawer; // \"stapler\"</blockquote>",
+        "<blockquote>var ourStorage = {<br>&nbsp;&nbsp;\"desk\": {<br>&nbsp;&nbsp;&nbsp;&nbsp;\"drawer\": \"stapler\"<br>&nbsp;&nbsp;},<br>&nbsp;&nbsp;\"cabinet\": {<br>&nbsp;&nbsp;&nbsp;&nbsp;\"top drawer\": { <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"folder1\": \"a file\",<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"folder2\": \"secrets\"<br>&nbsp;&nbsp;&nbsp;&nbsp;},<br>&nbsp;&nbsp;&nbsp;&nbsp;\"bottom drawer\": \"soda\"<br>&nbsp;&nbsp;}<br>};<br>ourStorage.cabinet[\"top drawer\"].folder2;  // \"secrets\"<br>ourStorage.desk.drawer; // \"stapler\"</blockquote>",
         "<hr>",
         "Access the <code>myStorage</code> object and assign the contents of the <code>glove box</code> property to the <code>gloveBoxContents</code> variable. Use bracket notation for properties with a space in their name."
       ],
@@ -6609,11 +7052,14 @@
       "tests": [
         {
           "text": "<code>gloveBoxContents</code> should equal \"maps\"",
-          "testString": "assert(gloveBoxContents === \"maps\", '<code>gloveBoxContents</code> should equal \"maps\"');"
+          "testString":
+            "assert(gloveBoxContents === \"maps\", '<code>gloveBoxContents</code> should equal \"maps\"');"
         },
         {
-          "text": "Use dot and bracket notation to access <code>myStorage</code>",
-          "testString": "assert(/=\\s*myStorage\\.car\\.inside\\[\\s*(\"|')glove box\\1\\s*\\]/g.test(code), 'Use dot and bracket notation to access <code>myStorage</code>');"
+          "text":
+            "Use dot and bracket notation to access <code>myStorage</code>",
+          "testString":
+            "assert(/=\\s*myStorage\\.car\\.inside\\[\\s*(\"|')glove box\\1\\s*\\]/g.test(code), 'Use dot and bracket notation to access <code>myStorage</code>');"
         }
       ],
       "challengeType": 1,
@@ -6623,13 +7069,14 @@
           "description": [
             "Las sub-propiedades de los objetos pueden ser accesadas mediante encadenamiento de la notación punto o corchete.",
             "Aquí está un objeto anidado:",
-            "<blockquote>var nuestroAlmacen = {<br>  \"escritorio\": {<br>    \"cajon\": \"grapadora\"<br>  },<br>  \"armario\": {<br>    \"cajón superior\": { <br>      \"legajador1\": \"un archivo\",<br>      \"legajador2\": \"secretos\"<br>    },<br>    \"cajón inferior\": \"gaseosa\"<br>  }<br>}<br>nuestroAlmacen.armario[\"cajón superior\"].legajador2;  // \"secretos\"<br>nuestroAlmacen.escritorio.cajon; // \"grapadora\"</blockquote>",
+            "<blockquote>var nuestroAlmacen = {<br>&nbsp;&nbsp;\"escritorio\": {<br>&nbsp;&nbsp;&nbsp;&nbsp;\"cajon\": \"grapadora\"<br>&nbsp;&nbsp;},<br>&nbsp;&nbsp;\"armario\": {<br>&nbsp;&nbsp;&nbsp;&nbsp;\"cajón superior\": { <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"legajador1\": \"un archivo\",<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"legajador2\": \"secretos\"<br>&nbsp;&nbsp;&nbsp;&nbsp;},<br>&nbsp;&nbsp;&nbsp;&nbsp;\"cajón inferior\": \"gaseosa\"<br>&nbsp;&nbsp;}<br>}<br>nuestroAlmacen.armario[\"cajón superior\"].legajador2;  // \"secretos\"<br>nuestroAlmacen.escritorio.cajon; // \"grapadora\"</blockquote>",
             "<h4>Instrucciones</h4>",
             "Accede al objeto <code>myStorage</code> para recuperar el contenido de <code>glove box</code>. Usa notación corchete para las propiedades con un espacio en su nombre."
           ]
         }
       },
-      "guideUrl": "https://guide.freecodecamp.org/certificates/accessing-nested-objects-in-json",
+      "guideUrl":
+        "https://guide.freecodecamp.org/certificates/accessing-nested-objects-in-json",
       "files": {
         "indexjs": {
           "key": "indexjs",
@@ -6670,7 +7117,7 @@
       "description": [
         "As we have seen in earlier examples, objects can contain both nested objects and nested arrays. Similar to accessing nested objects, Array bracket notation can be chained to access nested arrays.",
         "Here is an example of how to access a nested array:",
-        "<blockquote>var ourPets = [<br>  {<br>    animalType: \"cat\",<br>    names: [<br>      \"Meowzer\",<br>      \"Fluffy\",<br>      \"Kit-Cat\"<br>    ]<br>  },<br>  {<br>    animalType: \"dog\",<br>    names: [<br>      \"Spot\",<br>      \"Bowser\",<br>      \"Frankie\"<br>    ]<br>  }<br>];<br>ourPets[0].names[1]; // \"Fluffy\"<br>ourPets[1].names[0]; // \"Spot\"</blockquote>",
+        "<blockquote>var ourPets = [<br>&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;animalType: \"cat\",<br>&nbsp;&nbsp;&nbsp;&nbsp;names: [<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"Meowzer\",<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"Fluffy\",<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"Kit-Cat\"<br>&nbsp;&nbsp;&nbsp;&nbsp;]<br>&nbsp;&nbsp;},<br>&nbsp;&nbsp;{<br>&nbsp;&nbsp;&nbsp;&nbsp;animalType: \"dog\",<br>&nbsp;&nbsp;&nbsp;&nbsp;names: [<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"Spot\",<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"Bowser\",<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"Frankie\"<br>&nbsp;&nbsp;&nbsp;&nbsp;]<br>&nbsp;&nbsp;}<br>];<br>ourPets[0].names[1]; // \"Fluffy\"<br>ourPets[1].names[0]; // \"Spot\"</blockquote>",
         "<hr>",
         "Retrieve the second tree from the variable <code>myPlants</code> using object dot and array bracket notation."
       ],
@@ -6681,11 +7128,14 @@
       "tests": [
         {
           "text": "<code>secondTree</code> should equal \"pine\"",
-          "testString": "assert(secondTree === \"pine\", '<code>secondTree</code> should equal \"pine\"');"
+          "testString":
+            "assert(secondTree === \"pine\", '<code>secondTree</code> should equal \"pine\"');"
         },
         {
-          "text": "Use dot and bracket notation to access <code>myPlants</code>",
-          "testString": "assert(/=\\s*myPlants\\[1\\].list\\[1\\]/.test(code), 'Use dot and bracket notation to access <code>myPlants</code>');"
+          "text":
+            "Use dot and bracket notation to access <code>myPlants</code>",
+          "testString":
+            "assert(/=\\s*myPlants\\[1\\].list\\[1\\]/.test(code), 'Use dot and bracket notation to access <code>myPlants</code>');"
         }
       ],
       "challengeType": 1,
@@ -6695,13 +7145,14 @@
           "description": [
             "Como hemos visto en ejemplos anteriores, los objetos pueden contener objetos anidados y vectores anidados. De forma similar a acceder a objetos anidados, la notación corchete en vectores puede ser encadenada para acceder a vectores anidados.",
             "Aquí está un ejemplo de como acceder a un vector anidado:",
-            "<blockquote>var nuestrasMascotas = { <br>  \"gatos\": [<br>    \"Maullador\",<br>    \"Blandito\",<br>    \"Kit-Cat\"<br>  ],<br>  \"perros\": [<br>    \"Mancha\",<br>    \"Bowser\",<br>    \"Frankie\"<br>  ]<br>};<br>nuestrasMascotas.cats[1]; // \"Blandito\"<br>nuestrasMascotas.dogs[0]; // \"Mancha\"</blockquote>",
+            "<blockquote>var nuestrasMascotas = { <br>&nbsp;&nbsp;\"gatos\": [<br>&nbsp;&nbsp;&nbsp;&nbsp;\"Maullador\",<br>&nbsp;&nbsp;&nbsp;&nbsp;\"Blandito\",<br>&nbsp;&nbsp;&nbsp;&nbsp;\"Kit-Cat\"<br>&nbsp;&nbsp;],<br>&nbsp;&nbsp;\"perros\": [<br>&nbsp;&nbsp;&nbsp;&nbsp;\"Mancha\",<br>&nbsp;&nbsp;&nbsp;&nbsp;\"Bowser\",<br>&nbsp;&nbsp;&nbsp;&nbsp;\"Frankie\"<br>&nbsp;&nbsp;]<br>};<br>nuestrasMascotas.cats[1]; // \"Blandito\"<br>nuestrasMascotas.dogs[0]; // \"Mancha\"</blockquote>",
             "<h4>Instrucciones</h4>",
             "Recupera el segundo arbol de la variable <code>myPlants</code> usando notación punto para objetos y notación corchete para vectores."
           ]
         }
       },
-      "guideUrl": "https://guide.freecodecamp.org/certificates/access-array-data-with-indexes",
+      "guideUrl":
+        "https://guide.freecodecamp.org/certificates/access-array-data-with-indexes",
       "files": {
         "indexjs": {
           "key": "indexjs",
@@ -6767,32 +7218,46 @@
       ],
       "tests": [
         {
-          "text": "After <code>updateRecords(5439, \"artist\", \"ABBA\")</code>, <code>artist</code> should be <code>\"ABBA\"</code>",
-          "testString": "collection = collectionCopy; assert(updateRecords(5439, \"artist\", \"ABBA\")[5439][\"artist\"] === \"ABBA\", 'After <code>updateRecords(5439, \"artist\", \"ABBA\")</code>, <code>artist</code> should be <code>\"ABBA\"</code>');"
+          "text":
+            "After <code>updateRecords(5439, \"artist\", \"ABBA\")</code>, <code>artist</code> should be <code>\"ABBA\"</code>",
+          "testString":
+            "collection = collectionCopy; assert(updateRecords(5439, \"artist\", \"ABBA\")[5439][\"artist\"] === \"ABBA\", 'After <code>updateRecords(5439, \"artist\", \"ABBA\")</code>, <code>artist</code> should be <code>\"ABBA\"</code>');"
         },
         {
-          "text": "After <code>updateRecords(5439, \"tracks\", \"Take a Chance on Me\")</code>, <code>tracks</code> should have <code>\"Take a Chance on Me\"</code> as the last element.",
-          "testString": "assert(updateRecords(5439, \"tracks\", \"Take a Chance on Me\")[5439][\"tracks\"].pop() === \"Take a Chance on Me\", 'After <code>updateRecords(5439, \"tracks\", \"Take a Chance on Me\")</code>, <code>tracks</code> should have <code>\"Take a Chance on Me\"</code> as the last element.');"
+          "text":
+            "After <code>updateRecords(5439, \"tracks\", \"Take a Chance on Me\")</code>, <code>tracks</code> should have <code>\"Take a Chance on Me\"</code> as the last element.",
+          "testString":
+            "assert(updateRecords(5439, \"tracks\", \"Take a Chance on Me\")[5439][\"tracks\"].pop() === \"Take a Chance on Me\", 'After <code>updateRecords(5439, \"tracks\", \"Take a Chance on Me\")</code>, <code>tracks</code> should have <code>\"Take a Chance on Me\"</code> as the last element.');"
         },
         {
-          "text": "After <code>updateRecords(2548, \"artist\", \"\")</code>, <code>artist</code> should not be set",
-          "testString": "updateRecords(2548, \"artist\", \"\"); assert(!collection[2548].hasOwnProperty(\"artist\"), 'After <code>updateRecords(2548, \"artist\", \"\")</code>, <code>artist</code> should not be set');"
+          "text":
+            "After <code>updateRecords(2548, \"artist\", \"\")</code>, <code>artist</code> should not be set",
+          "testString":
+            "updateRecords(2548, \"artist\", \"\"); assert(!collection[2548].hasOwnProperty(\"artist\"), 'After <code>updateRecords(2548, \"artist\", \"\")</code>, <code>artist</code> should not be set');"
         },
         {
-          "text": "After <code>updateRecords(1245, \"tracks\", \"Addicted to Love\")</code>, <code>tracks</code> should have <code>\"Addicted to Love\"</code> as the last element.",
-          "testString": "assert(updateRecords(1245, \"tracks\", \"Addicted to Love\")[1245][\"tracks\"].pop() === \"Addicted to Love\", 'After <code>updateRecords(1245, \"tracks\", \"Addicted to Love\")</code>, <code>tracks</code> should have <code>\"Addicted to Love\"</code> as the last element.');"
+          "text":
+            "After <code>updateRecords(1245, \"tracks\", \"Addicted to Love\")</code>, <code>tracks</code> should have <code>\"Addicted to Love\"</code> as the last element.",
+          "testString":
+            "assert(updateRecords(1245, \"tracks\", \"Addicted to Love\")[1245][\"tracks\"].pop() === \"Addicted to Love\", 'After <code>updateRecords(1245, \"tracks\", \"Addicted to Love\")</code>, <code>tracks</code> should have <code>\"Addicted to Love\"</code> as the last element.');"
         },
         {
-          "text": "After <code>updateRecords(2468, \"tracks\", \"Free\")</code>, <code>tracks</code> should have <code>\"1999\"</code> as the first element.",
-          "testString": "assert(updateRecords(2468, \"tracks\", \"Free\")[2468][\"tracks\"][0] === \"1999\", 'After <code>updateRecords(2468, \"tracks\", \"Free\")</code>, <code>tracks</code> should have <code>\"1999\"</code> as the first element.');"
+          "text":
+            "After <code>updateRecords(2468, \"tracks\", \"Free\")</code>, <code>tracks</code> should have <code>\"1999\"</code> as the first element.",
+          "testString":
+            "assert(updateRecords(2468, \"tracks\", \"Free\")[2468][\"tracks\"][0] === \"1999\", 'After <code>updateRecords(2468, \"tracks\", \"Free\")</code>, <code>tracks</code> should have <code>\"1999\"</code> as the first element.');"
         },
         {
-          "text": "After <code>updateRecords(2548, \"tracks\", \"\")</code>, <code>tracks</code> should not be set",
-          "testString": "updateRecords(2548, \"tracks\", \"\"); assert(!collection[2548].hasOwnProperty(\"tracks\"), 'After <code>updateRecords(2548, \"tracks\", \"\")</code>, <code>tracks</code> should not be set');"
+          "text":
+            "After <code>updateRecords(2548, \"tracks\", \"\")</code>, <code>tracks</code> should not be set",
+          "testString":
+            "updateRecords(2548, \"tracks\", \"\"); assert(!collection[2548].hasOwnProperty(\"tracks\"), 'After <code>updateRecords(2548, \"tracks\", \"\")</code>, <code>tracks</code> should not be set');"
         },
         {
-          "text": "After <code>updateRecords(1245, \"album\", \"Riptide\")</code>, <code>album</code> should be <code>\"Riptide\"</code>",
-          "testString": "assert(updateRecords(1245, \"album\", \"Riptide\")[1245][\"album\"] === \"Riptide\", 'After <code>updateRecords(1245, \"album\", \"Riptide\")</code>, <code>album</code> should be <code>\"Riptide\"</code>');"
+          "text":
+            "After <code>updateRecords(1245, \"album\", \"Riptide\")</code>, <code>album</code> should be <code>\"Riptide\"</code>",
+          "testString":
+            "assert(updateRecords(1245, \"album\", \"Riptide\")[1245][\"album\"] === \"Riptide\", 'After <code>updateRecords(1245, \"album\", \"Riptide\")</code>, <code>album</code> should be <code>\"Riptide\"</code>');"
         }
       ],
       "challengeType": 1,
@@ -6870,7 +7335,7 @@
       "description": [
         "You can run the same code multiple times by using a loop.",
         "The first type of loop we will learn is called a \"<code>while</code>\" loop because it runs \"while\" a specified condition is true and stops once that condition is no longer true.",
-        "<blockquote>var ourArray = [];<br>var i = 0;<br>while(i &#60; 5) {<br>  ourArray.push(i);<br>  i++;<br>}</blockquote>",
+        "<blockquote>var ourArray = [];<br>var i = 0;<br>while(i &#60; 5) {<br>&nbsp;&nbsp;ourArray.push(i);<br>&nbsp;&nbsp;i++;<br>}</blockquote>",
         "Let's try getting a while loop to work by pushing values to an array.",
         "<hr>",
         "Push the numbers 0 through 4 to <code>myArray</code> using a <code>while</code> loop."
@@ -6881,11 +7346,13 @@
       "tests": [
         {
           "text": "You should be using a <code>while</code> loop for this.",
-          "testString": "assert(code.match(/while/g), 'You should be using a <code>while</code> loop for this.');"
+          "testString":
+            "assert(code.match(/while/g), 'You should be using a <code>while</code> loop for this.');"
         },
         {
           "text": "<code>myArray</code> should equal <code>[0,1,2,3,4]</code>.",
-          "testString": "assert.deepEqual(myArray, [0,1,2,3,4], '<code>myArray</code> should equal <code>[0,1,2,3,4]</code>.');"
+          "testString":
+            "assert.deepEqual(myArray, [0,1,2,3,4], '<code>myArray</code> should equal <code>[0,1,2,3,4]</code>.');"
         }
       ],
       "challengeType": 1,
@@ -6939,7 +7406,7 @@
         "The <code>condition</code> statement is evaluated at the beginning of every loop iteration and will continue as long as it evaluates to <code>true</code>. When <code>condition</code> is <code>false</code> at the start of the iteration, the loop will stop executing. This means if <code>condition</code> starts as <code>false</code>, your loop will never execute.",
         "The <code>final-expression</code> is executed at the end of each loop iteration, prior to the next <code>condition</code> check and is usually used to increment or decrement your loop counter.",
         "In the following example we initialize with <code>i = 0</code> and iterate while our condition <code>i &#60; 5</code> is true. We'll increment <code>i</code> by <code>1</code> in each loop iteration with <code>i++</code> as our <code>final-expression</code>.",
-        "<blockquote>var ourArray = [];<br>for (var i = 0; i &#60; 5; i++) {<br>  ourArray.push(i);<br>}</blockquote>",
+        "<blockquote>var ourArray = [];<br>for (var i = 0; i &#60; 5; i++) {<br>&nbsp;&nbsp;ourArray.push(i);<br>}</blockquote>",
         "<code>ourArray</code> will now contain <code>[0,1,2,3,4]</code>.",
         "<hr>",
         "Use a <code>for</code> loop to work to push the values 1 through 5 onto <code>myArray</code>."
@@ -6950,11 +7417,13 @@
       "tests": [
         {
           "text": "You should be using a <code>for</code> loop for this.",
-          "testString": "assert(code.match(/for\\s*\\(/g).length > 1, 'You should be using a <code>for</code> loop for this.');"
+          "testString":
+            "assert(code.match(/for\\s*\\(/g).length > 1, 'You should be using a <code>for</code> loop for this.');"
         },
         {
           "text": "<code>myArray</code> should equal <code>[1,2,3,4,5]</code>.",
-          "testString": "assert.deepEqual(myArray, [1,2,3,4,5], '<code>myArray</code> should equal <code>[1,2,3,4,5]</code>.');"
+          "testString":
+            "assert.deepEqual(myArray, [1,2,3,4,5], '<code>myArray</code> should equal <code>[1,2,3,4,5]</code>.');"
         }
       ],
       "challengeType": 1,
@@ -7013,7 +7482,7 @@
       "description": [
         "For loops don't have to iterate one at a time. By changing our <code>final-expression</code>, we can count by even numbers.",
         "We'll start at <code>i = 0</code> and loop while <code>i &#60; 10</code>. We'll increment <code>i</code> by 2 each loop with <code>i += 2</code>.",
-        "<blockquote>var ourArray = [];<br>for (var i = 0; i &#60; 10; i += 2) {<br>  ourArray.push(i);<br>}</blockquote>",
+        "<blockquote>var ourArray = [];<br>for (var i = 0; i &#60; 10; i += 2) {<br>&nbsp;&nbsp;ourArray.push(i);<br>}</blockquote>",
         "<code>ourArray</code> will now contain <code>[0,2,4,6,8]</code>.",
         "Let's change our <code>initialization</code> so we can count by odd numbers.",
         "<hr>",
@@ -7025,11 +7494,13 @@
       "tests": [
         {
           "text": "You should be using a <code>for</code> loop for this.",
-          "testString": "assert(code.match(/for\\s*\\(/g).length > 1, 'You should be using a <code>for</code> loop for this.');"
+          "testString":
+            "assert(code.match(/for\\s*\\(/g).length > 1, 'You should be using a <code>for</code> loop for this.');"
         },
         {
           "text": "<code>myArray</code> should equal <code>[1,3,5,7,9]</code>.",
-          "testString": "assert.deepEqual(myArray, [1,3,5,7,9], '<code>myArray</code> should equal <code>[1,3,5,7,9]</code>.');"
+          "testString":
+            "assert.deepEqual(myArray, [1,3,5,7,9], '<code>myArray</code> should equal <code>[1,3,5,7,9]</code>.');"
         }
       ],
       "challengeType": 1,
@@ -7084,7 +7555,7 @@
         "A for loop can also count backwards, so long as we can define the right conditions.",
         "In order to count backwards by twos, we'll need to change our <code>initialization</code>, <code>condition</code>, and <code>final-expression</code>.",
         "We'll start at <code>i = 10</code> and loop while <code>i &#62; 0</code>. We'll decrement <code>i</code> by 2 each loop with <code>i -= 2</code>.",
-        "<blockquote>var ourArray = [];<br>for (var i=10; i &#62; 0; i-=2) {<br>  ourArray.push(i);<br>}</blockquote>",
+        "<blockquote>var ourArray = [];<br>for (var i=10; i &#62; 0; i-=2) {<br>&nbsp;&nbsp;ourArray.push(i);<br>}</blockquote>",
         "<code>ourArray</code> will now contain <code>[10,8,6,4,2]</code>.",
         "Let's change our <code>initialization</code> and <code>final-expression</code> so we can count backward by twos by odd numbers.",
         "<hr>",
@@ -7096,15 +7567,18 @@
       "tests": [
         {
           "text": "You should be using a <code>for</code> loop for this.",
-          "testString": "assert(code.match(/for\\s*\\(/g).length > 1, 'You should be using a <code>for</code> loop for this.');"
+          "testString":
+            "assert(code.match(/for\\s*\\(/g).length > 1, 'You should be using a <code>for</code> loop for this.');"
         },
         {
           "text": "You should be using the array method <code>push</code>.",
-          "testString": "assert(code.match(/myArray.push/), 'You should be using the array method <code>push</code>.');"
+          "testString":
+            "assert(code.match(/myArray.push/), 'You should be using the array method <code>push</code>.');"
         },
         {
           "text": "<code>myArray</code> should equal <code>[9,7,5,3,1]</code>.",
-          "testString": "assert.deepEqual(myArray, [9,7,5,3,1], '<code>myArray</code> should equal <code>[9,7,5,3,1]</code>.');"
+          "testString":
+            "assert.deepEqual(myArray, [9,7,5,3,1], '<code>myArray</code> should equal <code>[9,7,5,3,1]</code>.');"
         }
       ],
       "challengeType": 1,
@@ -7158,7 +7632,7 @@
       "title": "Iterate Through an Array with a For Loop",
       "description": [
         "A common task in JavaScript is to iterate through the contents of an array. One way to do that is with a <code>for</code> loop. This code will output each element of the array <code>arr</code> to the console:",
-        "<blockquote>var arr = [10,9,8,7,6];<br>for (var i = 0; i < arr.length; i++) {<br>   console.log(arr[i]);<br>}</blockquote>",
+        "<blockquote>var arr = [10,9,8,7,6];<br>for (var i = 0; i < arr.length; i++) {<br>&nbsp;&nbsp; console.log(arr[i]);<br>}</blockquote>",
         "Remember that Arrays have zero-based numbering, which means the last index of the array is length - 1. Our <dfn>condition</dfn> for this loop is <code>i < arr.length</code>, which stops when <code>i</code> is at length - 1.",
         "<hr>",
         "Declare and initialize a variable <code>total</code> to <code>0</code>. Use a <code>for</code> loop to add the value of each element of the <code>myArr</code> array to <code>total</code>."
@@ -7170,19 +7644,24 @@
       "tests": [
         {
           "text": "<code>total</code> should be declared and initialized to 0",
-          "testString": "assert(code.match(/var.*?total\\s*=\\s*0.*?;/), '<code>total</code> should be declared and initialized to 0');"
+          "testString":
+            "assert(code.match(/var.*?total\\s*=\\s*0.*?;/), '<code>total</code> should be declared and initialized to 0');"
         },
         {
           "text": "<code>total</code> should equal 20",
-          "testString": "assert(total === 20, '<code>total</code> should equal 20');"
+          "testString":
+            "assert(total === 20, '<code>total</code> should equal 20');"
         },
         {
-          "text": "You should use a <code>for</code> loop to iterate through <code>myArr</code>",
-          "testString": "assert(code.match(/for\\s*\\(/g).length > 1 && code.match(/myArr\\s*\\[/), 'You should use a <code>for</code> loop to iterate through <code>myArr</code>');"
+          "text":
+            "You should use a <code>for</code> loop to iterate through <code>myArr</code>",
+          "testString":
+            "assert(code.match(/for\\s*\\(/g).length > 1 && code.match(/myArr\\s*\\[/), 'You should use a <code>for</code> loop to iterate through <code>myArr</code>');"
         },
         {
           "text": "Do not set <code>total</code> to 20 directly",
-          "testString": "assert(!code.match(/total[\\s\\+\\-]*=\\s*(\\d(?!\\s*[;,])|[1-9])/g), 'Do not set <code>total</code> to 20 directly');"
+          "testString":
+            "assert(!code.match(/total[\\s\\+\\-]*=\\s*(\\d(?!\\s*[;,])|[1-9])/g), 'Do not set <code>total</code> to 20 directly');"
         }
       ],
       "challengeType": 1,
@@ -7191,7 +7670,7 @@
           "title": "Iterar a través de un vector con un ciclo for",
           "description": [
             "Una tarea común en JavaScript es iterar a traves del contenido de un vector. Una manera de hacerlo es con un ciclo <code>for</code>. Este código imprimirá cada elemento del vector <code>arr</code> en la consola:",
-            "<blockquote>var arr = [10,9,8,7,6];<br>for (var i=0; i < arr.length; i++) {<br>   console.log(arr[i]);<br>}</blockquote>",
+            "<blockquote>var arr = [10,9,8,7,6];<br>for (var i=0; i < arr.length; i++) {<br>&nbsp;&nbsp; console.log(arr[i]);<br>}</blockquote>",
             "Recuerda que los vectores tienen numeración que comienza en cero, la cual significa que el último índice del vector es su longitud - 1. Nuestra <dfn>condición</dfn> para este ciclo es <code>i < arr.length</code>, que lo detendrá cuando <code>i</code> sea la longitud - 1.",
             "<h4>Instrucciones</h4>",
             "Declara e inicializa una variable <code>total</code> en <code>0</code>. Usa un ciclo <code>for</code> para añadir el valor de cada elemento del vector <code>myArr</code> a <code>total</code>."
@@ -7231,7 +7710,7 @@
       "title": "Nesting For Loops",
       "description": [
         "If you have a multi-dimensional array, you can use the same logic as the prior waypoint to loop through both the array and any sub-arrays. Here is an example:",
-        "<blockquote>var arr = [<br>  [1,2], [3,4], [5,6]<br>];<br>for (var i=0; i &lt; arr.length; i++) {<br>  for (var j=0; j &lt; arr[i].length; j++) {<br>    console.log(arr[i][j]);<br>  }<br>}</blockquote>",
+        "<blockquote>var arr = [<br>&nbsp;&nbsp;[1,2], [3,4], [5,6]<br>];<br>for (var i=0; i &lt; arr.length; i++) {<br>&nbsp;&nbsp;for (var j=0; j &lt; arr[i].length; j++) {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(arr[i][j]);<br>&nbsp;&nbsp;}<br>}</blockquote>",
         "This outputs each sub-element in <code>arr</code> one at a time. Note that for the inner loop, we are checking the <code>.length</code> of <code>arr[i]</code>, since <code>arr[i]</code> is itself an array.",
         "<hr>",
         "Modify function <code>multiplyAll</code> so that it multiplies the <code>product</code> variable by each number in the sub-arrays of <code>arr</code>"
@@ -7242,16 +7721,22 @@
       ],
       "tests": [
         {
-          "text": "<code>multiplyAll([[1],[2],[3]])</code> should return <code>6</code>",
-          "testString": "assert(multiplyAll([[1],[2],[3]]) === 6, '<code>multiplyAll([[1],[2],[3]])</code> should return <code>6</code>');"
+          "text":
+            "<code>multiplyAll([[1],[2],[3]])</code> should return <code>6</code>",
+          "testString":
+            "assert(multiplyAll([[1],[2],[3]]) === 6, '<code>multiplyAll([[1],[2],[3]])</code> should return <code>6</code>');"
         },
         {
-          "text": "<code>multiplyAll([[1,2],[3,4],[5,6,7]])</code> should return <code>5040</code>",
-          "testString": "assert(multiplyAll([[1,2],[3,4],[5,6,7]]) === 5040, '<code>multiplyAll([[1,2],[3,4],[5,6,7]])</code> should return <code>5040</code>');"
+          "text":
+            "<code>multiplyAll([[1,2],[3,4],[5,6,7]])</code> should return <code>5040</code>",
+          "testString":
+            "assert(multiplyAll([[1,2],[3,4],[5,6,7]]) === 5040, '<code>multiplyAll([[1,2],[3,4],[5,6,7]])</code> should return <code>5040</code>');"
         },
         {
-          "text": "<code>multiplyAll([[5,1],[0.2, 4, 0.5],[3, 9]])</code> should return <code>54</code>",
-          "testString": "assert(multiplyAll([[5,1],[0.2, 4, 0.5],[3, 9]]) === 54, '<code>multiplyAll([[5,1],[0.2, 4, 0.5],[3, 9]])</code> should return <code>54</code>');"
+          "text":
+            "<code>multiplyAll([[5,1],[0.2, 4, 0.5],[3, 9]])</code> should return <code>54</code>",
+          "testString":
+            "assert(multiplyAll([[5,1],[0.2, 4, 0.5],[3, 9]]) === 54, '<code>multiplyAll([[5,1],[0.2, 4, 0.5],[3, 9]])</code> should return <code>54</code>');"
         }
       ],
       "challengeType": 1,
@@ -7260,7 +7745,7 @@
           "title": "Anidar ciclos for",
           "description": [
             "Si tienes una matriz multi-dimensional, puedes usar la misma lógica del punto anterior para iterar a través de un vector y cualquier sub-vector. Aquí está un ejemplo:",
-            "<blockquote>var arr = [<br>  [1,2], [3,4], [5,6]<br>];<br>for (var i=0; i &lt; arr.length; i++) {<br>  for (var j=0; j &lt; arr[i].length; j++) {<br>    console.log(arr[i][j]);<br>  }<br>}</blockquote>",
+            "<blockquote>var arr = [<br>&nbsp;&nbsp;[1,2], [3,4], [5,6]<br>];<br>for (var i=0; i &lt; arr.length; i++) {<br>&nbsp;&nbsp;for (var j=0; j &lt; arr[i].length; j++) {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(arr[i][j]);<br>&nbsp;&nbsp;}<br>}</blockquote>",
             "Esto imprime cada sub-elemento en <code>arr</code> uno a la vez. Nota que en el ciclo interior, estamos comprobando la longitud <code>.length</code> de <code>arr[i]</code>, ya que <code>arr[i]</code> es por si mismo un vector.",
             "<h4>Instrucciones</h4>",
             "Modifica la función <code>multiplyAll</code> de manera que esta multiplique la variable <code>product</code> por cada número en los sub-vectores de <code>arr</code>"
@@ -7296,13 +7781,13 @@
       "description": [
         "You can run the same code multiple times by using a loop.",
         "The next type of loop you will learn is called a \"<code>do...while</code>\" loop because it first will \"<code>do</code>\" one pass of the code inside the loop no matter what, and then it runs \"<code>while</code>\" a specified condition is true and stops once that condition is no longer true. Let's look at an example.",
-        "<blockquote>var ourArray = [];<br>var i = 0;<br>do {<br>  ourArray.push(i);<br>  i++;<br>} while (i < 5);</blockquote>",
+        "<blockquote>var ourArray = [];<br>var i = 0;<br>do {<br>&nbsp;&nbsp;ourArray.push(i);<br>&nbsp;&nbsp;i++;<br>} while (i < 5);</blockquote>",
         "This behaves just as you would expect with any other type of loop, and the resulting array will look like <code>[0, 1, 2, 3, 4]</code>. However, what makes the <code>do...while</code> different from other loops is how it behaves when the condition fails on the first check. Let's see this in action.",
         "Here is a regular while loop that will run the code in the loop as long as <code>i < 5</code>.",
-        "<blockquote>var ourArray = []; <br>var i = 5;<br>while (i < 5) {<br>  ourArray.push(i);<br>  i++;<br>}</blockquote>",
+        "<blockquote>var ourArray = []; <br>var i = 5;<br>while (i < 5) {<br>&nbsp;&nbsp;ourArray.push(i);<br>&nbsp;&nbsp;i++;<br>}</blockquote>",
         "Notice that we initialize the value of <code>i</code> to be 5. When we execute the next line, we notice that <code>i</code> is not less than 5. So we do not execute the code inside the loop. The result is that <code>ourArray</code> will end up with nothing added to it, so it will still look like this <code>[]</code> when all the code in the example above finishes running.",
         "Now, take a look at a <code>do...while</code> loop.",
-        "<blockquote>var ourArray = []; <br>var i = 5;<br>do {<br>  ourArray.push(i);<br>  i++;<br>} while (i < 5);</blockquote>",
+        "<blockquote>var ourArray = []; <br>var i = 5;<br>do {<br>&nbsp;&nbsp;ourArray.push(i);<br>&nbsp;&nbsp;i++;<br>} while (i < 5);</blockquote>",
         "In this case, we initialize the value of <code>i</code> as 5, just like we did with the while loop. When we get to the next line, there is no check for the value of <code>i</code>, so we go to the code inside the curly braces and execute it. We will add one element to the array and increment <code>i</code> before we get to the condition check. Then, when we get to checking if <code>i < 5</code> see that <code>i</code> is now 6, which fails the conditional check. So we exit the loop and are done. At the end of the above example, the value of <code>ourArray</code> is <code>[5]</code>.",
         "Essentially, a <code>do...while</code> loop ensures that the code inside the loop will run at least once.",
         "Let's try getting a <code>do...while</code> loop to work by pushing values to an array.",
@@ -7314,16 +7799,20 @@
       ],
       "tests": [
         {
-          "text": "You should be using a <code>do...while</code> loop for this.",
-          "testString": "assert(code.match(/do/g), 'You should be using a <code>do...while</code> loop for this.');"
+          "text":
+            "You should be using a <code>do...while</code> loop for this.",
+          "testString":
+            "assert(code.match(/do/g), 'You should be using a <code>do...while</code> loop for this.');"
         },
         {
           "text": "<code>myArray</code> should equal <code>[10]</code>.",
-          "testString": "assert.deepEqual(myArray, [10], '<code>myArray</code> should equal <code>[10]</code>.');"
+          "testString":
+            "assert.deepEqual(myArray, [10], '<code>myArray</code> should equal <code>[10]</code>.');"
         },
         {
           "text": "<code>i</code> should equal <code>11</code>",
-          "testString": "assert.deepEqual(i, 11, '<code>i</code> should equal <code>11</code>');"
+          "testString":
+            "assert.deepEqual(i, 11, '<code>i</code> should equal <code>11</code>');"
         }
       ],
       "challengeType": 1,
@@ -7370,28 +7859,39 @@
       ],
       "tests": [
         {
-          "text": "<code>\"Kristian\", \"lastName\"</code> should return <code>\"Vos\"</code>",
-          "testString": "assert(lookUpProfile('Kristian','lastName') === \"Vos\", '<code>\"Kristian\", \"lastName\"</code> should return <code>\"Vos\"</code>');"
+          "text":
+            "<code>\"Kristian\", \"lastName\"</code> should return <code>\"Vos\"</code>",
+          "testString":
+            "assert(lookUpProfile('Kristian','lastName') === \"Vos\", '<code>\"Kristian\", \"lastName\"</code> should return <code>\"Vos\"</code>');"
         },
         {
-          "text": "<code>\"Sherlock\", \"likes\"</code> should return <code>[\"Intriguing Cases\", \"Violin\"]</code>",
-          "testString": "assert.deepEqual(lookUpProfile(\"Sherlock\", \"likes\"), [\"Intriguing Cases\", \"Violin\"], '<code>\"Sherlock\", \"likes\"</code> should return <code>[\"Intriguing Cases\", \"Violin\"]</code>');"
+          "text":
+            "<code>\"Sherlock\", \"likes\"</code> should return <code>[\"Intriguing Cases\", \"Violin\"]</code>",
+          "testString":
+            "assert.deepEqual(lookUpProfile(\"Sherlock\", \"likes\"), [\"Intriguing Cases\", \"Violin\"], '<code>\"Sherlock\", \"likes\"</code> should return <code>[\"Intriguing Cases\", \"Violin\"]</code>');"
         },
         {
           "text": "<code>\"Harry\",\"likes\"</code> should return an array",
-          "testString": "assert(typeof lookUpProfile(\"Harry\", \"likes\") === \"object\", '<code>\"Harry\",\"likes\"</code> should return an array');"
+          "testString":
+            "assert(typeof lookUpProfile(\"Harry\", \"likes\") === \"object\", '<code>\"Harry\",\"likes\"</code> should return an array');"
         },
         {
-          "text": "<code>\"Bob\", \"number\"</code> should return \"No such contact\"",
-          "testString": "assert(lookUpProfile(\"Bob\", \"number\") === \"No such contact\", '<code>\"Bob\", \"number\"</code> should return \"No such contact\"');"
+          "text":
+            "<code>\"Bob\", \"number\"</code> should return \"No such contact\"",
+          "testString":
+            "assert(lookUpProfile(\"Bob\", \"number\") === \"No such contact\", '<code>\"Bob\", \"number\"</code> should return \"No such contact\"');"
         },
         {
-          "text": "<code>\"Bob\", \"potato\"</code> should return \"No such contact\"",
-          "testString": "assert(lookUpProfile(\"Bob\", \"potato\") === \"No such contact\", '<code>\"Bob\", \"potato\"</code> should return \"No such contact\"');"
+          "text":
+            "<code>\"Bob\", \"potato\"</code> should return \"No such contact\"",
+          "testString":
+            "assert(lookUpProfile(\"Bob\", \"potato\") === \"No such contact\", '<code>\"Bob\", \"potato\"</code> should return \"No such contact\"');"
         },
         {
-          "text": "<code>\"Akira\", \"address\"</code> should return \"No such property\"",
-          "testString": "assert(lookUpProfile(\"Akira\", \"address\") === \"No such property\", '<code>\"Akira\", \"address\"</code> should return \"No such property\"');"
+          "text":
+            "<code>\"Akira\", \"address\"</code> should return \"No such property\"",
+          "testString":
+            "assert(lookUpProfile(\"Akira\", \"address\") === \"No such property\", '<code>\"Akira\", \"address\"</code> should return \"No such property\"');"
         }
       ],
       "challengeType": 1,
@@ -7468,21 +7968,24 @@
         "<hr>",
         "Change <code>randomFraction</code> to return a random number instead of returning <code>0</code>."
       ],
-      "solutions": [
-        "function randomFraction() {\n  return Math.random();\n}"
-      ],
+      "solutions": ["function randomFraction() {\n  return Math.random();\n}"],
       "tests": [
         {
           "text": "<code>randomFraction</code> should return a random number.",
-          "testString": "assert(typeof randomFraction() === \"number\", '<code>randomFraction</code> should return a random number.');"
+          "testString":
+            "assert(typeof randomFraction() === \"number\", '<code>randomFraction</code> should return a random number.');"
         },
         {
-          "text": "The number returned by <code>randomFraction</code> should be a decimal.",
-          "testString": "assert((randomFraction()+''). match(/\\./g), 'The number returned by <code>randomFraction</code> should be a decimal.');"
+          "text":
+            "The number returned by <code>randomFraction</code> should be a decimal.",
+          "testString":
+            "assert((randomFraction()+''). match(/\\./g), 'The number returned by <code>randomFraction</code> should be a decimal.');"
         },
         {
-          "text": "You should be using <code>Math.random</code> to generate the random decimal number.",
-          "testString": "assert(code.match(/Math\\.random/g).length >= 0, 'You should be using <code>Math.random</code> to generate the random decimal number.');"
+          "text":
+            "You should be using <code>Math.random</code> to generate the random decimal number.",
+          "testString":
+            "assert(code.match(/Math\\.random/g).length >= 0, 'You should be using <code>Math.random</code> to generate the random decimal number.');"
         }
       ],
       "challengeType": 1,
@@ -7514,9 +8017,7 @@
             "}"
           ],
           "head": [],
-          "tail": [
-            "(function(){return randomFraction();})();"
-          ]
+          "tail": ["(function(){return randomFraction();})();"]
         }
       }
     },
@@ -7538,20 +8039,28 @@
       ],
       "tests": [
         {
-          "text": "The result of <code>randomWholeNum</code> should be a whole number.",
-          "testString": "assert(typeof randomWholeNum() === \"number\" && (function(){var r = randomWholeNum();return Math.floor(r) === r;})(), 'The result of <code>randomWholeNum</code> should be a whole number.');"
+          "text":
+            "The result of <code>randomWholeNum</code> should be a whole number.",
+          "testString":
+            "assert(typeof randomWholeNum() === \"number\" && (function(){var r = randomWholeNum();return Math.floor(r) === r;})(), 'The result of <code>randomWholeNum</code> should be a whole number.');"
         },
         {
-          "text": "You should be using <code>Math.random</code> to generate a random number.",
-          "testString": "assert(code.match(/Math.random/g).length > 1, 'You should be using <code>Math.random</code> to generate a random number.');"
+          "text":
+            "You should be using <code>Math.random</code> to generate a random number.",
+          "testString":
+            "assert(code.match(/Math.random/g).length > 1, 'You should be using <code>Math.random</code> to generate a random number.');"
         },
         {
-          "text": "You should have multiplied the result of <code>Math.random</code> by 10 to make it a number that is between zero and nine.",
-          "testString": "assert(code.match(/\\s*?Math.random\\s*?\\(\\s*?\\)\\s*?\\*\\s*?10[\\D]\\s*?/g) || code.match(/\\s*?10\\s*?\\*\\s*?Math.random\\s*?\\(\\s*?\\)\\s*?/g), 'You should have multiplied the result of <code>Math.random</code> by 10 to make it a number that is between zero and nine.');"
+          "text":
+            "You should have multiplied the result of <code>Math.random</code> by 10 to make it a number that is between zero and nine.",
+          "testString":
+            "assert(code.match(/\\s*?Math.random\\s*?\\(\\s*?\\)\\s*?\\*\\s*?10[\\D]\\s*?/g) || code.match(/\\s*?10\\s*?\\*\\s*?Math.random\\s*?\\(\\s*?\\)\\s*?/g), 'You should have multiplied the result of <code>Math.random</code> by 10 to make it a number that is between zero and nine.');"
         },
         {
-          "text": "You should use <code>Math.floor</code> to remove the decimal part of the number.",
-          "testString": "assert(code.match(/Math.floor/g).length > 1, 'You should use <code>Math.floor</code> to remove the decimal part of the number.');"
+          "text":
+            "You should use <code>Math.floor</code> to remove the decimal part of the number.",
+          "testString":
+            "assert(code.match(/Math.floor/g).length > 1, 'You should use <code>Math.floor</code> to remove the decimal part of the number.');"
         }
       ],
       "challengeType": 1,
@@ -7589,9 +8098,7 @@
             "}"
           ],
           "head": [],
-          "tail": [
-            "(function(){return randomWholeNum();})();"
-          ]
+          "tail": ["(function(){return randomWholeNum();})();"]
         }
       }
     },
@@ -7611,20 +8118,28 @@
       ],
       "tests": [
         {
-          "text": "The lowest random number that can be generated by <code>randomRange</code> should be equal to your minimum number, <code>myMin</code>.",
-          "testString": "assert(calcMin === 5, 'The lowest random number that can be generated by <code>randomRange</code> should be equal to your minimum number, <code>myMin</code>.');"
+          "text":
+            "The lowest random number that can be generated by <code>randomRange</code> should be equal to your minimum number, <code>myMin</code>.",
+          "testString":
+            "assert(calcMin === 5, 'The lowest random number that can be generated by <code>randomRange</code> should be equal to your minimum number, <code>myMin</code>.');"
         },
         {
-          "text": "The highest random number that can be generated by <code>randomRange</code> should be equal to your maximum number, <code>myMax</code>.",
-          "testString": "assert(calcMax === 15, 'The highest random number that can be generated by <code>randomRange</code> should be equal to your maximum number, <code>myMax</code>.');"
+          "text":
+            "The highest random number that can be generated by <code>randomRange</code> should be equal to your maximum number, <code>myMax</code>.",
+          "testString":
+            "assert(calcMax === 15, 'The highest random number that can be generated by <code>randomRange</code> should be equal to your maximum number, <code>myMax</code>.');"
         },
         {
-          "text": "The random number generated by <code>randomRange</code> should be an integer, not a decimal.",
-          "testString": "assert(randomRange(0,1) % 1 === 0 , 'The random number generated by <code>randomRange</code> should be an integer, not a decimal.');"
+          "text":
+            "The random number generated by <code>randomRange</code> should be an integer, not a decimal.",
+          "testString":
+            "assert(randomRange(0,1) % 1 === 0 , 'The random number generated by <code>randomRange</code> should be an integer, not a decimal.');"
         },
         {
-          "text": "<code>randomRange</code> should use both <code>myMax</code> and <code>myMin</code>, and return a random number in your range.",
-          "testString": "assert((function(){if(code.match(/myMax/g).length > 1 && code.match(/myMin/g).length > 2 && code.match(/Math.floor/g) && code.match(/Math.random/g)){return true;}else{return false;}})(), '<code>randomRange</code> should use both <code>myMax</code> and <code>myMin</code>, and return a random number in your range.');"
+          "text":
+            "<code>randomRange</code> should use both <code>myMax</code> and <code>myMin</code>, and return a random number in your range.",
+          "testString":
+            "assert((function(){if(code.match(/myMax/g).length > 1 && code.match(/myMin/g).length > 2 && code.match(/Math.floor/g) && code.match(/Math.random/g)){return true;}else{return false;}})(), '<code>randomRange</code> should use both <code>myMax</code> and <code>myMin</code>, and return a random number in your range.');"
         }
       ],
       "challengeType": 1,
@@ -7700,24 +8215,32 @@
       "solutions": [],
       "tests": [
         {
-          "text": "<code>convertToInteger</code> should use the <code>parseInt()</code> function",
-          "testString": "assert(/parseInt/g.test(code), '<code>convertToInteger</code> should use the <code>parseInt()</code> function');"
+          "text":
+            "<code>convertToInteger</code> should use the <code>parseInt()</code> function",
+          "testString":
+            "assert(/parseInt/g.test(code), '<code>convertToInteger</code> should use the <code>parseInt()</code> function');"
         },
         {
-          "text": "<code>convertToInteger(\"56\")</code> should return a number",
-          "testString": "assert(typeof(convertToInteger(\"56\")) === \"number\", '<code>convertToInteger(\"56\")</code> should return a number');"
+          "text":
+            "<code>convertToInteger(\"56\")</code> should return a number",
+          "testString":
+            "assert(typeof(convertToInteger(\"56\")) === \"number\", '<code>convertToInteger(\"56\")</code> should return a number');"
         },
         {
           "text": "<code>convertToInteger(\"56\")</code> should return 56",
-          "testString": "assert(convertToInteger(\"56\") === 56, '<code>convertToInteger(\"56\")</code> should return 56');"
+          "testString":
+            "assert(convertToInteger(\"56\") === 56, '<code>convertToInteger(\"56\")</code> should return 56');"
         },
         {
           "text": "<code>convertToInteger(\"77\")</code> should return 77",
-          "testString": "assert(convertToInteger(\"77\") === 77, '<code>convertToInteger(\"77\")</code> should return 77');"
+          "testString":
+            "assert(convertToInteger(\"77\") === 77, '<code>convertToInteger(\"77\")</code> should return 77');"
         },
         {
-          "text": "<code>convertToInteger(\"JamesBond\")</code> should return NaN",
-          "testString": "assert.isNaN(convertToInteger(\"JamesBond\"), '<code>convertToInteger(\"JamesBond\")</code> should return NaN');"
+          "text":
+            "<code>convertToInteger(\"JamesBond\")</code> should return NaN",
+          "testString":
+            "assert.isNaN(convertToInteger(\"JamesBond\"), '<code>convertToInteger(\"JamesBond\")</code> should return NaN');"
         }
       ],
       "challengeType": 1,
@@ -7756,24 +8279,32 @@
       "solutions": [],
       "tests": [
         {
-          "text": "<code>convertToInteger</code> should use the <code>parseInt()</code> function",
-          "testString": "assert(/parseInt/g.test(code), '<code>convertToInteger</code> should use the <code>parseInt()</code> function');"
+          "text":
+            "<code>convertToInteger</code> should use the <code>parseInt()</code> function",
+          "testString":
+            "assert(/parseInt/g.test(code), '<code>convertToInteger</code> should use the <code>parseInt()</code> function');"
         },
         {
-          "text": "<code>convertToInteger(\"10011\")</code> should return a number",
-          "testString": "assert(typeof(convertToInteger(\"10011\")) === \"number\", '<code>convertToInteger(\"10011\")</code> should return a number');"
+          "text":
+            "<code>convertToInteger(\"10011\")</code> should return a number",
+          "testString":
+            "assert(typeof(convertToInteger(\"10011\")) === \"number\", '<code>convertToInteger(\"10011\")</code> should return a number');"
         },
         {
           "text": "<code>convertToInteger(\"10011\")</code> should return 19",
-          "testString": "assert(convertToInteger(\"10011\") === 19, '<code>convertToInteger(\"10011\")</code> should return 19');"
+          "testString":
+            "assert(convertToInteger(\"10011\") === 19, '<code>convertToInteger(\"10011\")</code> should return 19');"
         },
         {
           "text": "<code>convertToInteger(\"111001\")</code> should return 57",
-          "testString": "assert(convertToInteger(\"111001\") === 57, '<code>convertToInteger(\"111001\")</code> should return 57');"
+          "testString":
+            "assert(convertToInteger(\"111001\") === 57, '<code>convertToInteger(\"111001\")</code> should return 57');"
         },
         {
-          "text": "<code>convertToInteger(\"JamesBond\")</code> should return NaN",
-          "testString": "assert.isNaN(convertToInteger(\"JamesBond\"), '<code>convertToInteger(\"JamesBond\")</code> should return NaN');"
+          "text":
+            "<code>convertToInteger(\"JamesBond\")</code> should return NaN",
+          "testString":
+            "assert.isNaN(convertToInteger(\"JamesBond\"), '<code>convertToInteger(\"JamesBond\")</code> should return NaN');"
         }
       ],
       "challengeType": 1,
@@ -7804,29 +8335,34 @@
         "The syntax is:",
         "<code>condition ? statement-if-true : statement-if-false;</code>",
         "The following function uses an if-else statement to check a condition:",
-        "<blockquote>function findGreater(a, b) {<br>  if(a > b) {<br>    return \"a is greater\";<br>  }<br>  else {<br>    return \"b is greater\";<br>  }<br>}</blockquote>",
+        "<blockquote>function findGreater(a, b) {<br>&nbsp;&nbsp;if(a > b) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return \"a is greater\";<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;else {<br>&nbsp;&nbsp;&nbsp;&nbsp;return \"b is greater\";<br>&nbsp;&nbsp;}<br>}</blockquote>",
         "This can be re-written using the <code>conditional operator</code>:",
-        "<blockquote>function findGreater(a, b) {<br>  return a > b ? \"a is greater\" : \"b is greater\";<br>}</blockquote>",
+        "<blockquote>function findGreater(a, b) {<br>&nbsp;&nbsp;return a > b ? \"a is greater\" : \"b is greater\";<br>}</blockquote>",
         "<hr>",
         "Use the <code>conditional operator</code> in the <code>checkEqual</code> function to check if two numbers are equal or not. The function should return either true or false."
       ],
       "solutions": [],
       "tests": [
         {
-          "text": "<code>checkEqual</code> should use the <code>conditional operator</code>",
-          "testString": "assert(/.+?\\s*?\\?\\s*?.+?\\s*?:\\s*?.+?/gi.test(code), '<code>checkEqual</code> should use the <code>conditional operator</code>');"
+          "text":
+            "<code>checkEqual</code> should use the <code>conditional operator</code>",
+          "testString":
+            "assert(/.+?\\s*?\\?\\s*?.+?\\s*?:\\s*?.+?/gi.test(code), '<code>checkEqual</code> should use the <code>conditional operator</code>');"
         },
         {
           "text": "<code>checkEqual(1, 2)</code> should return false",
-          "testString": "assert(checkEqual(1, 2) === false, '<code>checkEqual(1, 2)</code> should return false');"
+          "testString":
+            "assert(checkEqual(1, 2) === false, '<code>checkEqual(1, 2)</code> should return false');"
         },
         {
           "text": "<code>checkEqual(1, 1)</code> should return true",
-          "testString": "assert(checkEqual(1, 1) === true, '<code>checkEqual(1, 1)</code> should return true');"
+          "testString":
+            "assert(checkEqual(1, 1) === true, '<code>checkEqual(1, 1)</code> should return true');"
         },
         {
           "text": "<code>checkEqual(1, -1)</code> should return false",
-          "testString": "assert(checkEqual(1, -1) === false, '<code>checkEqual(1, -1)</code> should return false');"
+          "testString":
+            "assert(checkEqual(1, -1) === false, '<code>checkEqual(1, -1)</code> should return false');"
         }
       ],
       "challengeType": 1,
@@ -7855,29 +8391,37 @@
       "description": [
         "In the previous challenge, you used a single <code>conditional operator</code>. You can also chain them together to check for multiple conditions.",
         "The following function uses if, else if, and else statements to check multiple conditions:",
-        "<blockquote>function findGreaterOrEqual(a, b) {<br>  if(a === b) {<br>    return \"a and b are equal\";<br>  }<br>  else if(a > b) {<br>    return \"a is greater\";<br>  }<br>  else {<br>    return \"b is greater\";<br>  }<br>}</blockquote>",
+        "<blockquote>function findGreaterOrEqual(a, b) {<br>&nbsp;&nbsp;if(a === b) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return \"a and b are equal\";<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;else if(a > b) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return \"a is greater\";<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;else {<br>&nbsp;&nbsp;&nbsp;&nbsp;return \"b is greater\";<br>&nbsp;&nbsp;}<br>}</blockquote>",
         "The above function can be re-written using multiple <code>conditional operators</code>:",
-        "<blockquote>function findGreaterOrEqual(a, b) {<br>  return (a === b) ? \"a and b are equal\" : (a > b) ? \"a is greater\" : \"b is greater\";<br>}</blockquote>",
+        "<blockquote>function findGreaterOrEqual(a, b) {<br>&nbsp;&nbsp;return (a === b) ? \"a and b are equal\" : (a > b) ? \"a is greater\" : \"b is greater\";<br>}</blockquote>",
         "<hr>",
         "Use multiple <code>conditional operators</code> in the <code>checkSign</code> function to check if a number is positive, negative or zero."
       ],
       "solutions": [],
       "tests": [
         {
-          "text": "<code>checkSign</code> should use multiple <code>conditional operators</code>",
-          "testString": "assert(/.+?\\s*?\\?\\s*?.+?\\s*?:\\s*?.+?\\s*?\\?\\s*?.+?\\s*?:\\s*?.+?/gi.test(code), '<code>checkSign</code> should use multiple <code>conditional operators</code>');"
+          "text":
+            "<code>checkSign</code> should use multiple <code>conditional operators</code>",
+          "testString":
+            "assert(/.+?\\s*?\\?\\s*?.+?\\s*?:\\s*?.+?\\s*?\\?\\s*?.+?\\s*?:\\s*?.+?/gi.test(code), '<code>checkSign</code> should use multiple <code>conditional operators</code>');"
         },
         {
-          "text": "<code>checkSign(10)</code> should return \"positive\". Note that capitalization matters",
-          "testString": "assert(checkSign(10) === 'positive', '<code>checkSign(10)</code> should return \"positive\". Note that capitalization matters');"
+          "text":
+            "<code>checkSign(10)</code> should return \"positive\". Note that capitalization matters",
+          "testString":
+            "assert(checkSign(10) === 'positive', '<code>checkSign(10)</code> should return \"positive\". Note that capitalization matters');"
         },
         {
-          "text": "<code>checkSign(-12)</code> should return \"negative\". Note that capitalization matters",
-          "testString": "assert(checkSign(-12) === 'negative', '<code>checkSign(-12)</code> should return \"negative\". Note that capitalization matters');"
+          "text":
+            "<code>checkSign(-12)</code> should return \"negative\". Note that capitalization matters",
+          "testString":
+            "assert(checkSign(-12) === 'negative', '<code>checkSign(-12)</code> should return \"negative\". Note that capitalization matters');"
         },
         {
-          "text": "<code>checkSign(0)</code> should return \"zero\". Note that capitalization matters",
-          "testString": "assert(checkSign(0) === 'zero', '<code>checkSign(0)</code> should return \"zero\". Note that capitalization matters');"
+          "text":
+            "<code>checkSign(0)</code> should return \"zero\". Note that capitalization matters",
+          "testString":
+            "assert(checkSign(0) === 'zero', '<code>checkSign(0)</code> should return \"zero\". Note that capitalization matters');"
         }
       ],
       "challengeType": 1,
diff --git a/challenges/02-javascript-algorithms-and-data-structures/es6.json b/challenges/02-javascript-algorithms-and-data-structures/es6.json
index 41707c022..ed0764dff 100644
--- a/challenges/02-javascript-algorithms-and-data-structures/es6.json
+++ b/challenges/02-javascript-algorithms-and-data-structures/es6.json
@@ -26,15 +26,19 @@
       "tests": [
         {
           "text": "<code>var</code> does not exist in code.",
-          "testString": "getUserInput => assert(!getUserInput('index').match(/var/g),'<code>var</code> does not exist in code.');"
+          "testString":
+            "getUserInput => assert(!getUserInput('index').match(/var/g),'<code>var</code> does not exist in code.');"
         },
         {
           "text": "<code>catName</code> should be <code>Oliver</code>.",
-          "testString": "assert(catName === \"Oliver\", '<code>catName</code> should be <code>Oliver</code>.');"
+          "testString":
+            "assert(catName === \"Oliver\", '<code>catName</code> should be <code>Oliver</code>.');"
         },
         {
-          "text": "<code>quote</code> should be <code>\"Oliver says Meow!\"</code>",
-          "testString": "assert(quote === \"Oliver says Meow!\", '<code>quote</code> should be <code>\"Oliver says Meow!\"</code>');"
+          "text":
+            "<code>quote</code> should be <code>\"Oliver says Meow!\"</code>",
+          "testString":
+            "assert(quote === \"Oliver says Meow!\", '<code>quote</code> should be <code>\"Oliver says Meow!\"</code>');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -69,13 +73,13 @@
         "When you declare a variable with the <code>var</code> keyword, it is declared globally, or locally if declared inside a function.",
         "The <code>let</code> keyword behaves similarly, but with some extra features. When you declare a variable with the <code>let</code> keyword inside a block, statement, or expression, its scope is limited to that block, statement, or expression.",
         "For example:",
-        "<blockquote>var numArray = [];<br>for (var i = 0; i < 3; i++) {<br>  numArray.push(i);<br>}<br>console.log(numArray);<br>// returns [0, 1, 2]<br>console.log(i);<br>// returns 3</blockquote>",
+        "<blockquote>var numArray = [];<br>for (var i = 0; i < 3; i++) {<br>&nbsp;&nbsp;numArray.push(i);<br>}<br>console.log(numArray);<br>// returns [0, 1, 2]<br>console.log(i);<br>// returns 3</blockquote>",
         "With the <code>var</code> keyword, <code>i</code> is declared globally. So when <code>i++</code> is executed, it updates the global variable. This code is similar to the following:",
-        "<blockquote>var numArray = [];<br>var i;<br>for (i = 0; i < 3; i++) {<br>  numArray.push(i);<br>}<br>console.log(numArray);<br>// returns [0, 1, 2]<br>console.log(i);<br>// returns 3</blockquote>",
+        "<blockquote>var numArray = [];<br>var i;<br>for (i = 0; i < 3; i++) {<br>&nbsp;&nbsp;numArray.push(i);<br>}<br>console.log(numArray);<br>// returns [0, 1, 2]<br>console.log(i);<br>// returns 3</blockquote>",
         "This behavior will cause problems if you were to create a function and store it for later use inside a for loop that uses the <code>i</code> variable. This is because the stored function will always refer to the value of the updated global <code>i</code> variable.",
-        "<blockquote>var printNumTwo;<br>for (var i = 0; i < 3; i++) {<br>  if(i === 2){<br>    printNumTwo = function() {<br>      return i;<br>    };<br>  }<br>}<br>console.log(printNumTwo());<br>// returns 3</blockquote>",
+        "<blockquote>var printNumTwo;<br>for (var i = 0; i < 3; i++) {<br>&nbsp;&nbsp;if(i === 2){<br>&nbsp;&nbsp;&nbsp;&nbsp;printNumTwo = function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return i;<br>&nbsp;&nbsp;&nbsp;&nbsp;};<br>&nbsp;&nbsp;}<br>}<br>console.log(printNumTwo());<br>// returns 3</blockquote>",
         "As you can see, <code>printNumTwo()</code> prints 3 and not 2. This is because the value assigned to <code>i</code> was updated and the <code>printNumTwo()</code> returns the global <code>i</code> and not the value <code>i</code> had when the function was created in the for loop. The <code>let</code> keyword does not follow this behavior:",
-        "<blockquote>'use strict';<br>let printNumTwo;<br>for (let i = 0; i < 3; i++) {<br>  if (i === 2) {<br>    printNumTwo = function() {<br>      return i;<br>    };<br>  }<br>}<br>console.log(printNumTwo());<br>// returns 2<br>console.log(i);<br>// returns \"i is not defined\"</blockquote>",
+        "<blockquote>'use strict';<br>let printNumTwo;<br>for (let i = 0; i < 3; i++) {<br>&nbsp;&nbsp;if (i === 2) {<br>&nbsp;&nbsp;&nbsp;&nbsp;printNumTwo = function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return i;<br>&nbsp;&nbsp;&nbsp;&nbsp;};<br>&nbsp;&nbsp;}<br>}<br>console.log(printNumTwo());<br>// returns 2<br>console.log(i);<br>// returns \"i is not defined\"</blockquote>",
         "<code>i</code> is not defined because it was not declared in the global scope. It is only declared within the for loop statement. <code>printNumTwo()</code> returned the correct value because three different <code>i</code> variables with unique values (0, 1, and 2) were created by the <code>let</code> keyword within the loop statement.",
         "<hr>",
         "Fix the code so that <code>i</code> declared in the if statement is a separate variable than <code>i</code> declared in the first line of the function. Be certain not to use the <code>var</code> keyword anywhere in your code.",
@@ -84,15 +88,19 @@
       "tests": [
         {
           "text": "<code>var</code> does not exist in code.",
-          "testString": "getUserInput => assert(!getUserInput('index').match(/var/g),'<code>var</code> does not exist in code.');"
+          "testString":
+            "getUserInput => assert(!getUserInput('index').match(/var/g),'<code>var</code> does not exist in code.');"
         },
         {
-          "text": "The variable <code>i</code> declared in the if statement should equal \"block scope\".",
-          "testString": "getUserInput => assert(getUserInput('index').match(/(i\\s*=\\s*).*\\s*.*\\s*.*\\1('|\")block\\s*scope\\2/g), 'The variable <code>i</code> declared in the if statement should equal \"block scope\".');"
+          "text":
+            "The variable <code>i</code> declared in the if statement should equal \"block scope\".",
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/(i\\s*=\\s*).*\\s*.*\\s*.*\\1('|\")block\\s*scope\\2/g), 'The variable <code>i</code> declared in the if statement should equal \"block scope\".');"
         },
         {
           "text": "<code>checkScope()</code> should return \"function scope\"",
-          "testString": "assert(checkScope() === \"function scope\", '<code>checkScope()</code> should return \"function scope\"');"
+          "testString":
+            "assert(checkScope() === \"function scope\", '<code>checkScope()</code> should return \"function scope\"');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -134,19 +142,25 @@
       "tests": [
         {
           "text": "<code>var</code> does not exist in your code.",
-          "testString": "getUserInput => assert(!getUserInput('index').match(/var/g),'<code>var</code> does not exist in your code.');"
+          "testString":
+            "getUserInput => assert(!getUserInput('index').match(/var/g),'<code>var</code> does not exist in your code.');"
         },
         {
-          "text": "<code>SENTENCE</code> should be a constant variable declared with <code>const</code>.",
-          "testString": "getUserInput => assert(getUserInput('index').match(/(const SENTENCE)/g), '<code>SENTENCE</code> should be a constant variable declared with <code>const</code>.');"
+          "text":
+            "<code>SENTENCE</code> should be a constant variable declared with <code>const</code>.",
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/(const SENTENCE)/g), '<code>SENTENCE</code> should be a constant variable declared with <code>const</code>.');"
         },
         {
           "text": "<code>i</code> should be declared with <code>let</code>.",
-          "testString": "getUserInput => assert(getUserInput('index').match(/(let i)/g), '<code>i</code> should be declared with <code>let</code>.');"
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/(let i)/g), '<code>i</code> should be declared with <code>let</code>.');"
         },
         {
-          "text": "<code>console.log</code> should be changed to print the <code>SENTENCE</code> variable.",
-          "testString": "getUserInput => assert(getUserInput('index').match(/console.log/(/s*?SENTENCE/s*?/)/s*?;/g), '<code>console.log</code> should be adjusted to print the variable <code>SENTENCE</code>.');"
+          "text":
+            "<code>console.log</code> should be changed to print the <code>SENTENCE</code> variable.",
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/console.log/(/s*?SENTENCE/s*?/)/s*?;/g), '<code>console.log</code> should be adjusted to print the variable <code>SENTENCE</code>.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -193,19 +207,24 @@
       "tests": [
         {
           "text": "Do not replace <code>const</code> keyword.",
-          "testString": "getUserInput => assert(getUserInput('index').match(/const/g), 'Do not replace <code>const</code> keyword.');"
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/const/g), 'Do not replace <code>const</code> keyword.');"
         },
         {
-          "text": "<code>s</code> should be a constant variable (by using <code>const</code>).",
-          "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+s/g), '<code>s</code> should be a constant variable (by using <code>const</code>).');"
+          "text":
+            "<code>s</code> should be a constant variable (by using <code>const</code>).",
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/const\\s+s/g), '<code>s</code> should be a constant variable (by using <code>const</code>).');"
         },
         {
           "text": "Do not change the original array declaration.",
-          "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+s\\s*=\\s*\\[\\s*5\\s*,\\s*7\\s*,\\s*2\\s*\\]\\s*;?/g), 'Do not change the original array declaration.');"
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/const\\s+s\\s*=\\s*\\[\\s*5\\s*,\\s*7\\s*,\\s*2\\s*\\]\\s*;?/g), 'Do not change the original array declaration.');"
         },
         {
           "text": "<code>s</code> should be equal to <code>[2, 5, 7]</code>.",
-          "testString": "assert.deepEqual(s, [2, 5, 7], '<code>s</code> should be equal to <code>[2, 5, 7]</code>.');"
+          "testString":
+            "assert.deepEqual(s, [2, 5, 7], '<code>s</code> should be equal to <code>[2, 5, 7]</code>.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -239,26 +258,31 @@
       "description": [
         "As seen in the previous challenge, <code>const</code> declaration alone doesn't really protect your data from mutation. To ensure your data doesn't change, JavaScript provides a function <code>Object.freeze</code> to prevent data mutation.",
         "Once the object is frozen, you can no longer add, update, or delete properties from it. Any attempt at changing the object will be rejected without an error.",
-        "<blockquote><br>let obj = {<br>  name:\"FreeCodeCamp\"<br>  review:\"Awesome\"<br>};<br>Object.freeze(obj);<br>obj.review = \"bad\"; //will be ignored. Mutation not allowed<br>obj.newProp = \"Test\"; // will be ignored. Mutation not allowed<br>console.log(obj); <br>// { name: \"FreeCodeCamp\", review:\"Awesome\"}<br></blockquote>",
+        "<blockquote><br>let obj = {<br>&nbsp;&nbsp;name:\"FreeCodeCamp\"<br>&nbsp;&nbsp;review:\"Awesome\"<br>};<br>Object.freeze(obj);<br>obj.review = \"bad\"; //will be ignored. Mutation not allowed<br>obj.newProp = \"Test\"; // will be ignored. Mutation not allowed<br>console.log(obj); <br>// { name: \"FreeCodeCamp\", review:\"Awesome\"}<br></blockquote>",
         "<hr>",
         "In this challenge you are going to use <code>Object.freeze</code> to prevent mathematical constants from changing. You need to freeze the <code>MATH_CONSTANTS</code> object so that no one is able alter the value of <code>PI</code>, add, or delete properties ."
       ],
       "tests": [
         {
           "text": "Do not replace <code>const</code> keyword.",
-          "testString": "getUserInput => assert(getUserInput('index').match(/const/g), 'Do not replace <code>const</code> keyword.');"
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/const/g), 'Do not replace <code>const</code> keyword.');"
         },
         {
-          "text": "<code>MATH_CONSTANTS</code> should be a constant variable (by using <code>const</code>).",
-          "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+MATH_CONSTANTS/g), '<code>MATH_CONSTANTS</code> should be a constant variable (by using <code>const</code>).');"
+          "text":
+            "<code>MATH_CONSTANTS</code> should be a constant variable (by using <code>const</code>).",
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/const\\s+MATH_CONSTANTS/g), '<code>MATH_CONSTANTS</code> should be a constant variable (by using <code>const</code>).');"
         },
         {
           "text": "Do not change original <code>MATH_CONSTANTS</code>.",
-          "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+MATH_CONSTANTS\\s+=\\s+{\\s+PI:\\s+3.14\\s+};/g), 'Do not change original <code>MATH_CONSTANTS</code>.');"
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/const\\s+MATH_CONSTANTS\\s+=\\s+{\\s+PI:\\s+3.14\\s+};/g), 'Do not change original <code>MATH_CONSTANTS</code>.');"
         },
         {
           "text": "<code>PI</code> equals <code>3.14</code>.",
-          "testString": "assert(PI === 3.14, '<code>PI</code> equals <code>3.14</code>.');"
+          "testString":
+            "assert(PI === 3.14, '<code>PI</code> equals <code>3.14</code>.');"
         }
       ],
       "releasedOn": "Aug 12, 2017",
@@ -299,9 +323,9 @@
       "description": [
         "In JavaScript, we often don't need to name our functions, especially when passing a function as an argument to another function. Instead, we create inline functions. We don't need to name these functions because we do not reuse them anywhere else.",
         "To achieve this, we often use the following syntax:",
-        "<blockquote>const myFunc = function() {<br>  const myVar = \"value\";<br>  return myVar;<br>}</blockquote>",
+        "<blockquote>const myFunc = function() {<br>&nbsp;&nbsp;const myVar = \"value\";<br>&nbsp;&nbsp;return myVar;<br>}</blockquote>",
         "ES6 provides us with the syntactic sugar to not have to write anonymous functions this way. Instead, you can use <strong>arrow function syntax</strong>:",
-        "<blockquote>const myFunc = () => {<br>  const myVar = \"value\";<br>  return myVar;<br>}</blockquote>",
+        "<blockquote>const myFunc = () => {<br>&nbsp;&nbsp;const myVar = \"value\";<br>&nbsp;&nbsp;return myVar;<br>}</blockquote>",
         "When there is no function body, and only a return value, arrow function syntax allows you to omit the keyword <code>return</code> as well as the brackets surrounding the code. This helps simplify smaller functions into one-line statements:",
         "<blockquote>const myFunc= () => \"value\"</blockquote>",
         "This code will still return <code>value</code> by default.",
@@ -311,23 +335,29 @@
       "tests": [
         {
           "text": "User did replace <code>var</code> keyword.",
-          "testString": "getUserInput => assert(!getUserInput('index').match(/var/g), 'User did replace <code>var</code> keyword.');"
+          "testString":
+            "getUserInput => assert(!getUserInput('index').match(/var/g), 'User did replace <code>var</code> keyword.');"
         },
         {
-          "text": "<code>magic</code> should be a constant variable (by using <code>const</code>).",
-          "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+magic/g), '<code>magic</code> should be a constant variable (by using <code>const</code>).');"
+          "text":
+            "<code>magic</code> should be a constant variable (by using <code>const</code>).",
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/const\\s+magic/g), '<code>magic</code> should be a constant variable (by using <code>const</code>).');"
         },
         {
           "text": "<code>magic</code> is a <code>function</code>.",
-          "testString": "assert(typeof magic === 'function', '<code>magic</code> is a <code>function</code>.');"
+          "testString":
+            "assert(typeof magic === 'function', '<code>magic</code> is a <code>function</code>.');"
         },
         {
           "text": "<code>magic()</code> returns correct date.",
-          "testString": "assert(magic().getDate() == new Date().getDate(), '<code>magic()</code> returns correct date.');"
+          "testString":
+            "assert(magic().getDate() == new Date().getDate(), '<code>magic()</code> returns correct date.');"
         },
         {
           "text": "<code>function</code> keyword was not used.",
-          "testString": "getUserInput => assert(!getUserInput('index').match(/function/g), '<code>function</code> keyword was not used.');"
+          "testString":
+            "getUserInput => assert(!getUserInput('index').match(/function/g), '<code>function</code> keyword was not used.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -362,23 +392,30 @@
       "tests": [
         {
           "text": "User did replace <code>var</code> keyword.",
-          "testString": "getUserInput => assert(!getUserInput('index').match(/var/g), 'User did replace <code>var</code> keyword.');"
+          "testString":
+            "getUserInput => assert(!getUserInput('index').match(/var/g), 'User did replace <code>var</code> keyword.');"
         },
         {
-          "text": "<code>myConcat</code> should be a constant variable (by using <code>const</code>).",
-          "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+myConcat/g), '<code>myConcat</code> should be a constant variable (by using <code>const</code>).');"
+          "text":
+            "<code>myConcat</code> should be a constant variable (by using <code>const</code>).",
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/const\\s+myConcat/g), '<code>myConcat</code> should be a constant variable (by using <code>const</code>).');"
         },
         {
           "text": "<code>myConcat</code> should be a function",
-          "testString": "assert(typeof myConcat === 'function', '<code>myConcat</code> should be a function');"
+          "testString":
+            "assert(typeof myConcat === 'function', '<code>myConcat</code> should be a function');"
         },
         {
-          "text": "<code>myConcat()</code> returns the correct <code>array</code>",
-          "testString": "assert(() => { const a = myConcat([1], [2]); return a[0] == 1 && a[1] == 2; }, '<code>myConcat()</code> returns the correct <code>array</code>');"
+          "text":
+            "<code>myConcat()</code> returns the correct <code>array</code>",
+          "testString":
+            "assert(() => { const a = myConcat([1], [2]); return a[0] == 1 && a[1] == 2; }, '<code>myConcat()</code> returns the correct <code>array</code>');"
         },
         {
           "text": "<code>function</code> keyword was not used.",
-          "testString": "getUserInput => assert(!getUserInput('index').match(/function/g), '<code>function</code> keyword was not used.');"
+          "testString":
+            "getUserInput => assert(!getUserInput('index').match(/function/g), '<code>function</code> keyword was not used.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -409,7 +446,7 @@
         "It's time we see how powerful arrow functions are when processing data.",
         "Arrow functions work really well with higher order functions, such as <code>map()</code>, <code>filter()</code>, and <code>reduce()</code>, that take other functions as arguments for processing collections of data.",
         "Read the following code:",
-        "<blockquote>FBPosts.filter(function(post) {<br>  return post.thumbnail !== null && post.shares > 100 && post.likes > 500;<br>})</blockquote>",
+        "<blockquote>FBPosts.filter(function(post) {<br>&nbsp;&nbsp;return post.thumbnail !== null && post.shares > 100 && post.likes > 500;<br>})</blockquote>",
         "We have written this with <code>filter()</code> to at least make it somewhat readable. Now compare it to the following code which uses arrow function syntax instead:",
         "<blockquote>FBPosts.filter((post) => post.thumbnail !== null && post.shares > 100 && post.likes > 500)</blockquote>",
         "This code is more succinct and accomplishes the same task with fewer lines of code.",
@@ -419,31 +456,42 @@
       "tests": [
         {
           "text": "User did replace <code>var</code> keyword.",
-          "testString": "getUserInput => assert(!getUserInput('index').match(/var/g), 'User did replace <code>var</code> keyword.');"
+          "testString":
+            "getUserInput => assert(!getUserInput('index').match(/var/g), 'User did replace <code>var</code> keyword.');"
         },
         {
-          "text": "<code>squaredIntegers</code> should be a constant variable (by using <code>const</code>).",
-          "testString": "getUserInput => assert(getUserInput('index').match(/const\\s+squaredIntegers/g), '<code>squaredIntegers</code> should be a constant variable (by using <code>const</code>).');"
+          "text":
+            "<code>squaredIntegers</code> should be a constant variable (by using <code>const</code>).",
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/const\\s+squaredIntegers/g), '<code>squaredIntegers</code> should be a constant variable (by using <code>const</code>).');"
         },
         {
-          "text": "<code>squaredIntegers</code> should be an <code>array</code>",
-          "testString": "assert(Array.isArray(squaredIntegers), '<code>squaredIntegers</code> should be an <code>array</code>');"
+          "text":
+            "<code>squaredIntegers</code> should be an <code>array</code>",
+          "testString":
+            "assert(Array.isArray(squaredIntegers), '<code>squaredIntegers</code> should be an <code>array</code>');"
         },
         {
-          "text": "<code>squaredIntegers</code> should be <code>[16, 1764, 36]</code>",
-          "testString": "assert(squaredIntegers[0] === 16 && squaredIntegers[1] === 1764 && squaredIntegers[2] === 36, '<code>squaredIntegers</code> should be <code>[16, 1764, 36]</code>');"
+          "text":
+            "<code>squaredIntegers</code> should be <code>[16, 1764, 36]</code>",
+          "testString":
+            "assert(squaredIntegers[0] === 16 && squaredIntegers[1] === 1764 && squaredIntegers[2] === 36, '<code>squaredIntegers</code> should be <code>[16, 1764, 36]</code>');"
         },
         {
           "text": "<code>function</code> keyword was not used.",
-          "testString": "getUserInput => assert(!getUserInput('index').match(/function/g), '<code>function</code> keyword was not used.');"
+          "testString":
+            "getUserInput => assert(!getUserInput('index').match(/function/g), '<code>function</code> keyword was not used.');"
         },
         {
           "text": "loop should not be used",
-          "testString": "getUserInput => assert(!getUserInput('index').match(/(for)|(while)/g), 'loop should not be used');"
+          "testString":
+            "getUserInput => assert(!getUserInput('index').match(/(for)|(while)/g), 'loop should not be used');"
         },
         {
-          "text": "<code>map</code>, <code>filter</code>, or <code>reduce</code> should be used",
-          "testString": "getUserInput => assert(getUserInput('index').match(/map|filter|reduce/g), '<code>map</code>, <code>filter</code>, or <code>reduce</code> should be used');"
+          "text":
+            "<code>map</code>, <code>filter</code>, or <code>reduce</code> should be used",
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/map|filter|reduce/g), '<code>map</code>, <code>filter</code>, or <code>reduce</code> should be used');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -478,23 +526,29 @@
       "description": [
         "In order to help us create more flexible functions, ES6 introduces <dfn>default parameters</dfn> for functions.",
         "Check out this code:",
-        "<blockquote>function greeting(name = \"Anonymous\") {<br>  return \"Hello \" + name;<br>}<br>console.log(greeting(\"John\")); // Hello John<br>console.log(greeting()); // Hello Anonymous</blockquote>",
+        "<blockquote>function greeting(name = \"Anonymous\") {<br>&nbsp;&nbsp;return \"Hello \" + name;<br>}<br>console.log(greeting(\"John\")); // Hello John<br>console.log(greeting()); // Hello Anonymous</blockquote>",
         "The default parameter kicks in when the argument is not specified (it is undefined). As you can see in the example above, the parameter <code>name</code> will receive its default value <code>\"Anonymous\"</code> when you do not provide a value for the parameter. You can add default values for as many parameters as you want.",
         "<hr>",
         "Modify the function <code>increment</code> by adding default parameters so that it will add 1 to <code>number</code> if <code>value</code> is not specified."
       ],
       "tests": [
         {
-          "text": "The result of <code>increment(5, 2)</code> should be <code>7</code>.",
-          "testString": "assert(increment(5, 2) === 7, 'The result of <code>increment(5, 2)</code> should be <code>7</code>.');"
+          "text":
+            "The result of <code>increment(5, 2)</code> should be <code>7</code>.",
+          "testString":
+            "assert(increment(5, 2) === 7, 'The result of <code>increment(5, 2)</code> should be <code>7</code>.');"
         },
         {
-          "text": "The result of <code>increment(5)</code> should be <code>6</code>.",
-          "testString": "assert(increment(5) === 6, 'The result of <code>increment(5)</code> should be <code>6</code>.');"
+          "text":
+            "The result of <code>increment(5)</code> should be <code>6</code>.",
+          "testString":
+            "assert(increment(5) === 6, 'The result of <code>increment(5)</code> should be <code>6</code>.');"
         },
         {
-          "text": "default parameter <code>1</code> was used for <code>value</code>.",
-          "testString": "getUserInput => assert(getUserInput('index').match(/value\\s*=\\s*1/g), 'default parameter <code>1</code> was used for <code>value</code>.');"
+          "text":
+            "default parameter <code>1</code> was used for <code>value</code>.",
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/value\\s*=\\s*1/g), 'default parameter <code>1</code> was used for <code>value</code>.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -526,7 +580,7 @@
       "description": [
         "In order to help us create more flexible functions, ES6 introduces the <dfn>rest operator</dfn> for function parameters. With the rest operator, you can create functions that take a variable number of arguments. These arguments are stored in an array that can be accessed later from inside the function.",
         "Check out this code:",
-        "<blockquote>function howMany(...args) {<br>  return \"You have passed \" + args.length + \" arguments.\";<br>}<br>console.log(howMany(0, 1, 2)); // You have passed 3 arguments<br>console.log(howMany(\"string\", null, [1, 2, 3], { })); // You have passed 4 arguments.</blockquote>",
+        "<blockquote>function howMany(...args) {<br>&nbsp;&nbsp;return \"You have passed \" + args.length + \" arguments.\";<br>}<br>console.log(howMany(0, 1, 2)); // You have passed 3 arguments<br>console.log(howMany(\"string\", null, [1, 2, 3], { })); // You have passed 4 arguments.</blockquote>",
         "The rest operator eliminates the need to check the <code>args</code> array and allows us to apply <code>map()</code>, <code>filter()</code> and <code>reduce()</code> on the parameters array.",
         "<hr>",
         "Modify the function <code>sum</code> so that it uses the rest operator and it works in the same way with any number of parameters."
@@ -534,23 +588,29 @@
       "tests": [
         {
           "text": "The result of <code>sum(0,1,2)</code> should be 3",
-          "testString": "assert(sum(0,1,2) === 3, 'The result of <code>sum(0,1,2)</code> should be 3');"
+          "testString":
+            "assert(sum(0,1,2) === 3, 'The result of <code>sum(0,1,2)</code> should be 3');"
         },
         {
           "text": "The result of <code>sum(1,2,3,4)</code> should be 10",
-          "testString": "assert(sum(1,2,3,4) === 10, 'The result of <code>sum(1,2,3,4)</code> should be 10');"
+          "testString":
+            "assert(sum(1,2,3,4) === 10, 'The result of <code>sum(1,2,3,4)</code> should be 10');"
         },
         {
           "text": "The result of <code>sum(5)</code> should be 5",
-          "testString": "assert(sum(5) === 5, 'The result of <code>sum(5)</code> should be 5');"
+          "testString":
+            "assert(sum(5) === 5, 'The result of <code>sum(5)</code> should be 5');"
         },
         {
           "text": "The result of <code>sum()</code> should be 0",
-          "testString": "assert(sum() === 0, 'The result of <code>sum()</code> should be 0');"
+          "testString":
+            "assert(sum() === 0, 'The result of <code>sum()</code> should be 0');"
         },
         {
-          "text": "The <code>sum</code> function uses the <code>...</code> spread operator on the <code>args</code> parameter.",
-          "testString": "getUserInput => assert(getUserInput('index').match(/function\\s+sum\\s*\\(\\s*...args\\s*\\)\\s*{/g), 'The <code>sum</code> function uses the <code>...</code> spread operator on the <code>args</code> parameter.');"
+          "text":
+            "The <code>sum</code> function uses the <code>...</code> spread operator on the <code>args</code> parameter.",
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/function\\s+sum\\s*\\(\\s*...args\\s*\\)\\s*{/g), 'The <code>sum</code> function uses the <code>...</code> spread operator on the <code>args</code> parameter.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -595,15 +655,20 @@
       "tests": [
         {
           "text": "<code>arr2</code> is correct copy of <code>arr1</code>.",
-          "testString": "assert(arr2.every((v, i) => v === arr1[i]), '<code>arr2</code> is correct copy of <code>arr1</code>.');"
+          "testString":
+            "assert(arr2.every((v, i) => v === arr1[i]), '<code>arr2</code> is correct copy of <code>arr1</code>.');"
         },
         {
-          "text": "<code>...</code> spread operator was used to duplicate <code>arr1</code>.",
-          "testString": "getUserInput => assert(getUserInput('index').match(/\\[\\s*...arr1\\s*\\]/g),'<code>...</code> spread operator was used to duplicate <code>arr1</code>.');"
+          "text":
+            "<code>...</code> spread operator was used to duplicate <code>arr1</code>.",
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/\\[\\s*...arr1\\s*\\]/g),'<code>...</code> spread operator was used to duplicate <code>arr1</code>.');"
         },
         {
-          "text": "<code>arr2</code> remains unchanged when <code>arr1</code> is changed.",
-          "testString": "assert((arr1, arr2) => {arr1.push('JUN'); return arr2.length < arr1.length},'<code>arr2</code> remains unchanged when <code>arr1</code> is changed.');"
+          "text":
+            "<code>arr2</code> remains unchanged when <code>arr1</code> is changed.",
+          "testString":
+            "assert((arr1, arr2) => {arr1.push('JUN'); return arr2.length < arr1.length},'<code>arr2</code> remains unchanged when <code>arr1</code> is changed.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -647,15 +712,19 @@
       "tests": [
         {
           "text": "the function <code>getLength()</code> returns a number.",
-          "testString": "assert(typeof getLength('') === 'number', 'the function <code>getLength()</code> returns a number.');"
+          "testString":
+            "assert(typeof getLength('') === 'number', 'the function <code>getLength()</code> returns a number.');"
         },
         {
-          "text": "<code>getLength(\"FreeCodeCamp\")</code> should be <code>12</code>",
-          "testString": "assert(getLength(\"FreeCodeCamp\") === 12, '<code>getLength(\"FreeCodeCamp\")</code> should be <code>12</code>');"
+          "text":
+            "<code>getLength(\"FreeCodeCamp\")</code> should be <code>12</code>",
+          "testString":
+            "assert(getLength(\"FreeCodeCamp\") === 12, '<code>getLength(\"FreeCodeCamp\")</code> should be <code>12</code>');"
         },
         {
           "text": "destructuring with reassignment was used",
-          "testString": "getUserInput => assert(getUserInput('index').match(/\\{\\s*length\\s*:\\s*len\\s*}\\s*=\\s*str/g),'destructuring with reassignment was used');"
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/\\{\\s*length\\s*:\\s*len\\s*}\\s*=\\s*str/g),'destructuring with reassignment was used');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -687,11 +756,12 @@
     },
     {
       "id": "587d7b89367417b2b2512b4a",
-      "title": "Use Destructuring Assignment to Assign Variables from Nested Objects",
+      "title":
+        "Use Destructuring Assignment to Assign Variables from Nested Objects",
       "description": [
         "We can similarly destructure <em>nested</em> objects into variables.",
         "Consider the following code:",
-        "<blockquote>const a = {<br>  start: { x: 5, y: 6},<br>  end: { x: 6, y: -9 }<br>};<br>const { start : { x: startX, y: startY }} = a;<br>console.log(startX, startY); // 5, 6</blockquote>",
+        "<blockquote>const a = {<br>&nbsp;&nbsp;start: { x: 5, y: 6},<br>&nbsp;&nbsp;end: { x: 6, y: -9 }<br>};<br>const { start : { x: startX, y: startY }} = a;<br>console.log(startX, startY); // 5, 6</blockquote>",
         "In the example above, the variable <code>start</code> is assigned the value of <code>a.start</code>, which is also an object.",
         "<hr>",
         "Use destructuring assignment to obtain <code>max</code> of <code>forecast.tomorrow</code> and assign it to <code>maxOfTomorrow</code>."
@@ -699,11 +769,13 @@
       "tests": [
         {
           "text": "<code>maxOfTomorrow</code> equals <code>84.6</code>",
-          "testString": "assert(getMaxOfTmrw(LOCAL_FORECAST) === 84.6, '<code>maxOfTomorrow</code> equals <code>84.6</code>');"
+          "testString":
+            "assert(getMaxOfTmrw(LOCAL_FORECAST) === 84.6, '<code>maxOfTomorrow</code> equals <code>84.6</code>');"
         },
         {
           "text": "nested destructuring was used",
-          "testString": "getUserInput => assert(getUserInput('index').match(/\\{\\s*tomorrow\\s*:\\s*\\{\\s*max\\s*:\\s*maxOfTomorrow\\s*\\}\\s*\\}\\s*=\\s*forecast/g),'nested destructuring was used');"
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/\\{\\s*tomorrow\\s*:\\s*\\{\\s*max\\s*:\\s*maxOfTomorrow\\s*\\}\\s*\\}\\s*=\\s*forecast/g),'nested destructuring was used');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -752,15 +824,18 @@
       "tests": [
         {
           "text": "Value of <code>a</code> should be 6, after swapping.",
-          "testString": "assert(a === 6, 'Value of <code>a</code> should be 6, after swapping.');"
+          "testString":
+            "assert(a === 6, 'Value of <code>a</code> should be 6, after swapping.');"
         },
         {
           "text": "Value of <code>b</code> should be 8, after swapping.",
-          "testString": "assert(b === 8, 'Value of <code>b</code> should be 8, after swapping.');"
+          "testString":
+            "assert(b === 8, 'Value of <code>b</code> should be 8, after swapping.');"
         },
         {
           "text": "Use array destructuring to swap a and b.",
-          "testString": "// assert(/\\[\\s*(\\w)\\s*,\\s*(\\w)\\s*\\]\\s*=\\s*\\[\\s*\\2\\s*,\\s*\\1\\s*\\]/g.test(code), 'Use array destructuring to swap a and b.');"
+          "testString":
+            "// assert(/\\[\\s*(\\w)\\s*,\\s*(\\w)\\s*\\]\\s*=\\s*\\[\\s*\\2\\s*,\\s*\\1\\s*\\]/g.test(code), 'Use array destructuring to swap a and b.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -789,7 +864,8 @@
     },
     {
       "id": "587d7b8a367417b2b2512b4c",
-      "title": "Use Destructuring Assignment with the Rest Operator to Reassign Array Elements",
+      "title":
+        "Use Destructuring Assignment with the Rest Operator to Reassign Array Elements",
       "description": [
         "In some situations involving array destructuring, we might want to collect the rest of the elements into a separate array.",
         "The result is similar to <code>Array.prototype.slice()</code>, as shown below:",
@@ -802,15 +878,18 @@
       "tests": [
         {
           "text": "<code>arr</code> should be <code>[3,4,5,6,7,8,9,10]</code>",
-          "testString": "assert(arr.every((v, i) => v === i + 3),'<code>arr</code> should be <code>[3,4,5,6,7,8,9,10]</code>');"
+          "testString":
+            "assert(arr.every((v, i) => v === i + 3),'<code>arr</code> should be <code>[3,4,5,6,7,8,9,10]</code>');"
         },
         {
           "text": "destructuring was used.",
-          "testString": "getUserInput => assert(getUserInput('index').match(/\\[\\s*\\w*\\s*,\\s*\\w*\\s*,\\s*...arr\\s*\\]/g),'destructuring was used.');"
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/\\[\\s*\\w*\\s*,\\s*\\w*\\s*,\\s*...arr\\s*\\]/g),'destructuring was used.');"
         },
         {
           "text": "<code>Array.slice()</code> was not used.",
-          "testString": "getUserInput => assert(!getUserInput('index').match(/Array.slice/g), '<code>Array.slice()</code> was not used.');"
+          "testString":
+            "getUserInput => assert(!getUserInput('index').match(/Array.slice/g), '<code>Array.slice()</code> was not used.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -841,13 +920,14 @@
     },
     {
       "id": "587d7b8a367417b2b2512b4d",
-      "title": "Use Destructuring Assignment to Pass an Object as a Function's Parameters",
+      "title":
+        "Use Destructuring Assignment to Pass an Object as a Function's Parameters",
       "description": [
         "In some cases, you can destructure the object in a function argument itself.",
         "Consider the code below:",
-        "<blockquote>const profileUpdate = (profileData) => {<br>  const { name, age, nationality, location } = profileData;<br>  // do something with these variables<br>}</blockquote>",
+        "<blockquote>const profileUpdate = (profileData) => {<br>&nbsp;&nbsp;const { name, age, nationality, location } = profileData;<br>&nbsp;&nbsp;// do something with these variables<br>}</blockquote>",
         "This effectively destructures the object sent into the function. This can also be done in-place:",
-        "<blockquote>const profileUpdate = ({ name, age, nationality, location }) => {<br>  /* do something with these fields */<br>}</blockquote>",
+        "<blockquote>const profileUpdate = ({ name, age, nationality, location }) => {<br>&nbsp;&nbsp;/* do something with these fields */<br>}</blockquote>",
         "This removes some extra lines and makes our code look neat.",
         "This has the added benefit of not having to manipulate an entire object in a function; only the fields that are needed are copied inside the function.",
         "<hr>",
@@ -856,15 +936,18 @@
       "tests": [
         {
           "text": "<code>stats</code> should be an <code>object</code>.",
-          "testString": "assert(typeof stats === 'object', '<code>stats</code> should be an <code>object</code>.');"
+          "testString":
+            "assert(typeof stats === 'object', '<code>stats</code> should be an <code>object</code>.');"
         },
         {
           "text": "<code>half(stats)</code> should be <code>28.015</code>",
-          "testString": "assert(half(stats) === 28.015, '<code>half(stats)</code> should be <code>28.015</code>');"
+          "testString":
+            "assert(half(stats) === 28.015, '<code>half(stats)</code> should be <code>28.015</code>');"
         },
         {
           "text": "Destructuring was used.",
-          "testString": "getUserInput => assert(getUserInput('index').match(/\\(\\s*\\{\\s*\\w+\\s*,\\s*\\w+\\s*\\}\\s*\\)/g), 'Destructuring was used.');"
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/\\(\\s*\\{\\s*\\w+\\s*,\\s*\\w+\\s*\\}\\s*\\)/g), 'Destructuring was used.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -909,7 +992,7 @@
       "description": [
         "A new feature of ES6 is the <dfn>template literal</dfn>. This is a special type of string that allows you to use string interpolation features to create strings.",
         "Consider the code below:",
-        "<blockquote>const person = {<br>  name: \"Zodiac Hasbro\",<br>  age: 56<br>};<br><br>// string interpolation<br>const greeting = `Hello, my name is ${person.name}!<br>I am ${person.age} years old.`;<br><br>console.log(greeting); // prints<br>// Hello, my name is Zodiac Hasbro!<br>// I am 56 years old.<br></blockquote>",
+        "<blockquote>const person = {<br>&nbsp;&nbsp;name: \"Zodiac Hasbro\",<br>&nbsp;&nbsp;age: 56<br>};<br><br>// string interpolation<br>const greeting = `Hello, my name is ${person.name}!<br>I am ${person.age} years old.`;<br><br>console.log(greeting); // prints<br>// Hello, my name is Zodiac Hasbro!<br>// I am 56 years old.<br></blockquote>",
         "A lot of things happened there.",
         "Firstly, the <code>${variable}</code> syntax used above is a place holder. Basically, you won't have to use concatenation with the <code>+</code> operator anymore. To add variables to strings, you just drop the variable in a template string and wrap it with <code>${</code> and <code>}</code>.",
         "Secondly, the example uses backticks (<code>`</code>), not quotes (<code>'</code> or <code>\"</code>), to wrap the string. Notice that the string is multi-line.",
@@ -919,16 +1002,20 @@
       ],
       "tests": [
         {
-          "text": "<code>resultDisplayArray</code> is a list containing <code>result failure</code> messages.",
-          "testString": "assert(typeof makeList(result.failure) === 'object' && resultDisplayArray.length === 3, '<code>resultDisplayArray</code> is a list containing <code>result failure</code> messages.');"
+          "text":
+            "<code>resultDisplayArray</code> is a list containing <code>result failure</code> messages.",
+          "testString":
+            "assert(typeof makeList(result.failure) === 'object' && resultDisplayArray.length === 3, '<code>resultDisplayArray</code> is a list containing <code>result failure</code> messages.');"
         },
         {
           "text": "<code>resultDisplayArray</code> is the desired output.",
-          "testString": "assert(makeList(result.failure).every((v, i) => v === `<li class=\"text-warning\">${result.failure[i]}</li>`), '<code>resultDisplayArray</code> is the desired output.');"
+          "testString":
+            "assert(makeList(result.failure).every((v, i) => v === `<li class=\"text-warning\">${result.failure[i]}</li>`), '<code>resultDisplayArray</code> is the desired output.');"
         },
         {
           "text": "Template strings were used",
-          "testString": "getUserInput => assert(getUserInput('index').match(/\\`<li class=\"text-warning\">\\$\\{\\w+\\}<\\/li>\\`/g), 'Template strings were used');"
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/\\`<li class=\"text-warning\">\\$\\{\\w+\\}<\\/li>\\`/g), 'Template strings were used');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -973,7 +1060,7 @@
       "description": [
         "ES6 adds some nice support for easily defining object literals.",
         "Consider the following code:",
-        "<blockquote>const getMousePosition = (x, y) => ({<br>  x: x,<br>  y: y<br>});</blockquote>",
+        "<blockquote>const getMousePosition = (x, y) => ({<br>&nbsp;&nbsp;x: x,<br>&nbsp;&nbsp;y: y<br>});</blockquote>",
         "<code>getMousePosition</code> is a simple function that returns an object containing two fields.",
         "ES6 provides the syntactic sugar to eliminate the redundancy of having to write <code>x: x</code>. You can simply write <code>x</code> once, and it will be converted to<code>x: x</code> (or something equivalent) under the hood.",
         "Here is the same function from above rewritten to use this new syntax:",
@@ -983,12 +1070,15 @@
       ],
       "tests": [
         {
-          "text": "the output is <code>{name: \"Zodiac Hasbro\", age: 56, gender: \"male\"}</code>.",
-          "testString": "assert(() => {const res={name:\"Zodiac Hasbro\",age:56,gender:\"male\"}; const person=createPerson(\"Zodiac Hasbro\", 56, \"male\"); return Object.keys(person).every(k => person[k] === res[k]);}, 'the output is <code>{name: \"Zodiac Hasbro\", age: 56, gender: \"male\"}</code>.');"
+          "text":
+            "the output is <code>{name: \"Zodiac Hasbro\", age: 56, gender: \"male\"}</code>.",
+          "testString":
+            "assert(() => {const res={name:\"Zodiac Hasbro\",age:56,gender:\"male\"}; const person=createPerson(\"Zodiac Hasbro\", 56, \"male\"); return Object.keys(person).every(k => person[k] === res[k]);}, 'the output is <code>{name: \"Zodiac Hasbro\", age: 56, gender: \"male\"}</code>.');"
         },
         {
           "text": "No <code>:</code> were used.",
-          "testString": "getUserInput => assert(!getUserInput('index').match(/:/g), 'No <code>:</code> were used.');"
+          "testString":
+            "getUserInput => assert(!getUserInput('index').match(/:/g), 'No <code>:</code> were used.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -1022,20 +1112,23 @@
       "title": "Write Concise Declarative Functions with ES6",
       "description": [
         "When defining functions within objects in ES5, we have to use the keyword <code>function</code> as follows:",
-        "<blockquote>const person = {<br>  name: \"Taylor\",<br>  sayHello: function() {<br>    return `Hello! My name is ${this.name}.`;<br>  }<br>};</blockquote>",
+        "<blockquote>const person = {<br>&nbsp;&nbsp;name: \"Taylor\",<br>&nbsp;&nbsp;sayHello: function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;return `Hello! My name is ${this.name}.`;<br>&nbsp;&nbsp;}<br>};</blockquote>",
         "With ES6, You can remove the <code>function</code> keyword and colon altogether when defining functions in objects. Here's an example of this syntax:",
-        "<blockquote>const person = {<br>  name: \"Taylor\",<br>  sayHello() {<br>    return `Hello! My name is ${this.name}.`;<br>  }<br>};</blockquote>",
+        "<blockquote>const person = {<br>&nbsp;&nbsp;name: \"Taylor\",<br>&nbsp;&nbsp;sayHello() {<br>&nbsp;&nbsp;&nbsp;&nbsp;return `Hello! My name is ${this.name}.`;<br>&nbsp;&nbsp;}<br>};</blockquote>",
         "<hr>",
         "Refactor the function <code>setGear</code> inside the object <code>bicycle</code> to use the shorthand syntax described above."
       ],
       "tests": [
         {
-          "text": "<code>setGear</code> is a function and changes the <code>gear</code> variable.",
-          "testString": "assert(() => { bicycle.setGear(48); return bicycle.gear === 48 }, '<code>setGear</code> is a function and changes the <code>gear</code> variable.');"
+          "text":
+            "<code>setGear</code> is a function and changes the <code>gear</code> variable.",
+          "testString":
+            "assert(() => { bicycle.setGear(48); return bicycle.gear === 48 }, '<code>setGear</code> is a function and changes the <code>gear</code> variable.');"
         },
         {
           "text": "Declarative function was used.",
-          "testString": "getUserInput => assert(!getUserInput('index').match(/:\\s*function\\s*\\(\\)/g), 'Declarative function was used.');"
+          "testString":
+            "getUserInput => assert(!getUserInput('index').match(/:\\s*function\\s*\\(\\)/g), 'Declarative function was used.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -1071,9 +1164,9 @@
         "ES6 provides a new syntax to help create objects, using the keyword <dfn>class</dfn>.",
         "This is to be noted, that the <code>class</code> syntax is just a syntax, and not a full-fledged class based implementation of object oriented paradigm, unlike in languages like Java, or Python, or Ruby etc.",
         "In ES5, we usually define a constructor function, and use the <code>new</code> keyword to instantiate an object.",
-        "<blockquote>var SpaceShuttle = function(targetPlanet){<br>  this.targetPlanet = targetPlanet;<br>}<br>var zeus = new spaceShuttle('Jupiter');</blockquote>",
+        "<blockquote>var SpaceShuttle = function(targetPlanet){<br>&nbsp;&nbsp;this.targetPlanet = targetPlanet;<br>}<br>var zeus = new SpaceShuttle('Jupiter');</blockquote>",
         "The class syntax simply replaces the constructor function creation:",
-        "<blockquote>class SpaceShuttle {<br>  constructor(targetPlanet){<br>    this.targetPlanet = targetPlanet;<br>  }<br>}<br>const zeus = new spaceShuttle('Jupiter');</blockquote>",
+        "<blockquote>class SpaceShuttle {<br>&nbsp;&nbsp;constructor(targetPlanet){<br>&nbsp;&nbsp;&nbsp;&nbsp;this.targetPlanet = targetPlanet;<br>&nbsp;&nbsp;}<br>}<br>const zeus = new SpaceShuttle('Jupiter');</blockquote>",
         "Notice that the <code>class</code> keyword declares a new function, and a constructor was added, which would be invoked when <code>new</code> is called - to create a new object.",
         "<hr>",
         "Use <code>class</code> keyword and write a proper constructor to create the <code>Vegetable</code> class.",
@@ -1081,16 +1174,20 @@
       ],
       "tests": [
         {
-          "text": "<code>Vegetable</code> should be a <code>class</code> with a defined <code>constructor</code> method.",
-          "testString": "assert(typeof Vegetable === 'function' && typeof Vegetable.constructor === 'function', '<code>Vegetable</code> should be a <code>class</code> with a defined <code>constructor</code> method.');"
+          "text":
+            "<code>Vegetable</code> should be a <code>class</code> with a defined <code>constructor</code> method.",
+          "testString":
+            "assert(typeof Vegetable === 'function' && typeof Vegetable.constructor === 'function', '<code>Vegetable</code> should be a <code>class</code> with a defined <code>constructor</code> method.');"
         },
         {
           "text": "<code>class</code> keyword was used.",
-          "testString": "getUserInput => assert(getUserInput('index').match(/class/g),'<code>class</code> keyword was used.');"
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/class/g),'<code>class</code> keyword was used.');"
         },
         {
           "text": "<code>Vegetable</code> can be instantiated.",
-          "testString": "assert(() => {const a = new Vegetable(\"apple\"); return typeof a === 'object';},'<code>Vegetable</code> can be instantiated.');"
+          "testString":
+            "assert(() => {const a = new Vegetable(\"apple\"); return typeof a === 'object';},'<code>Vegetable</code> can be instantiated.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -1126,7 +1223,7 @@
         "These are classically called <dfn>getters</dfn> and <dfn>setters</dfn>.",
         "Getter functions are meant to simply return (get) the value of an object's private variable to the user without the user directly accessing the private variable.",
         "Setter functions are meant to modify (set) the value of an object's private variable based on the value passed into the setter function. This change could involve calculations, or even overwriting the previous value completely.",
-        "<blockquote>class Book {<br>  constructor(author) {<br>    this._author = author;<br>  }<br>  // getter<br>  get writer(){<br>    return this._author;<br>  }<br>  // setter<br>  set writer(updatedAuthor){<br>    this._author = updatedAuthor;<br>  }<br>}<br>const lol = new Book('anonymous');<br>console.log(lol.writer);<br>lol.writer = 'wut';<br>console.log(lol.writer);</blockquote>",
+        "<blockquote>class Book {<br>&nbsp;&nbsp;constructor(author) {<br>&nbsp;&nbsp;&nbsp;&nbsp;this._author = author;<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;// getter<br>&nbsp;&nbsp;get writer(){<br>&nbsp;&nbsp;&nbsp;&nbsp;return this._author;<br>&nbsp;&nbsp;}<br>&nbsp;&nbsp;// setter<br>&nbsp;&nbsp;set writer(updatedAuthor){<br>&nbsp;&nbsp;&nbsp;&nbsp;this._author = updatedAuthor;<br>&nbsp;&nbsp;}<br>}<br>const lol = new Book('anonymous');<br>console.log(lol.writer);<br>lol.writer = 'wut';<br>console.log(lol.writer);</blockquote>",
         "Notice the syntax we are using to invoke the getter and setter - as if they are not even functions.",
         "Getters and setters are important, because they hide internal implementation details.",
         "<hr>",
@@ -1140,16 +1237,20 @@
       ],
       "tests": [
         {
-          "text": "<code>Thermostat</code> should be a <code>class</code> with a defined <code>constructor</code> method.",
-          "testString": "assert(typeof Thermostat === 'function' && typeof Thermostat.constructor === 'function','<code>Thermostat</code> should be a <code>class</code> with a defined <code>constructor</code> method.');"
+          "text":
+            "<code>Thermostat</code> should be a <code>class</code> with a defined <code>constructor</code> method.",
+          "testString":
+            "assert(typeof Thermostat === 'function' && typeof Thermostat.constructor === 'function','<code>Thermostat</code> should be a <code>class</code> with a defined <code>constructor</code> method.');"
         },
         {
           "text": "<code>class</code> keyword was used.",
-          "testString": "getUserInput => assert(getUserInput('index').match(/class/g),'<code>class</code> keyword was used.');"
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/class/g),'<code>class</code> keyword was used.');"
         },
         {
           "text": "<code>Thermostat</code> can be instantiated.",
-          "testString": "assert(() => {const t = new Thermostat(32); return typeof t === 'object' && t.temperature === 0;}, '<code>Thermostat</code> can be instantiated.');"
+          "testString":
+            "assert(() => {const t = new Thermostat(32); return typeof t === 'object' && t.temperature === 0;}, '<code>Thermostat</code> can be instantiated.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -1199,7 +1300,8 @@
       "tests": [
         {
           "text": "valid <code>import</code> statement",
-          "testString": "getUserInput => assert(getUserInput('index').match(/import\\s+\\{\\s?capitalizeString\\s?\\}\\s+from\\s+\"string_functions\"/g), 'valid <code>import</code> statement');"
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/import\\s+\\{\\s?capitalizeString\\s?\\}\\s+from\\s+\"string_functions\"/g), 'valid <code>import</code> statement');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -1210,10 +1312,7 @@
           "key": "indexjs",
           "ext": "js",
           "name": "index",
-          "contents": [
-            "\"use strict\";",
-            "capitalizeString(\"hello!\");"
-          ],
+          "contents": ["\"use strict\";", "capitalizeString(\"hello!\");"],
           "head": [
             "window.require = function (str) {",
             "if (str === 'string_functions') {",
@@ -1231,9 +1330,9 @@
       "description": [
         "In the previous challenge, you learned about <code>import</code> and how it can be leveraged to import small amounts of code from large files. In order for this to work, though, we must utilize one of the statements that goes with <code>import</code>, known as <dfn>export</dfn>. When we want some code - a function, or a variable - to be usable in another file, we must export it in order to import it into another file. Like <code>import</code>, <code>export</code> is a non-browser feature.",
         "The following is what we refer to as a <dfn>named export</dfn>. With this, we can import any code we export into another file with the <code>import</code> syntax you learned in the last lesson. Here's an example:",
-        "<blockquote>const capitalizeString = (string) => {<br>  return string.charAt(0).toUpperCase() + string.slice(1);<br>}<br>export { capitalizeString } //How to export functions.<br>export const foo = \"bar\"; //How to export variables.</blockquote>",
+        "<blockquote>const capitalizeString = (string) => {<br>&nbsp;&nbsp;return string.charAt(0).toUpperCase() + string.slice(1);<br>}<br>export { capitalizeString } //How to export functions.<br>export const foo = \"bar\"; //How to export variables.</blockquote>",
         "Alternatively, if you would like to compact all your <code>export</code> statements into one line, you can take this approach:",
-        "<blockquote>const capitalizeString = (string) => {<br>  return string.charAt(0).toUpperCase() + string.slice(1);<br>}<br>const foo = \"bar\";<br>export { capitalizeString, foo }</blockquote>",
+        "<blockquote>const capitalizeString = (string) => {<br>&nbsp;&nbsp;return string.charAt(0).toUpperCase() + string.slice(1);<br>}<br>const foo = \"bar\";<br>export { capitalizeString, foo }</blockquote>",
         "Either approach is perfectly acceptable.",
         "<hr>",
         "Below are two variables that I want to make available for other files to use. Utilizing the first way I demonstrated <code>export</code>, export the two variables."
@@ -1241,11 +1340,13 @@
       "tests": [
         {
           "text": "<code>foo</code> is exported.",
-          "testString": "getUserInput => assert(getUserInput('index').match(/export\\s+const\\s+foo\\s+=+\\s\"bar\"/g), '<code>foo</code> is exported.');"
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/export\\s+const\\s+foo\\s+=+\\s\"bar\"/g), '<code>foo</code> is exported.');"
         },
         {
           "text": "<code>bar</code> is exported.",
-          "testString": "getUserInput => assert(getUserInput('index').match(/export\\s+const\\s+bar\\s+=+\\s\"foo\"/g), '<code>bar</code> is exported.');"
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/export\\s+const\\s+bar\\s+=+\\s\"foo\"/g), '<code>bar</code> is exported.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -1261,9 +1362,7 @@
             "const foo = \"bar\";",
             "const bar= \"foo\";"
           ],
-          "head": [
-            "window.exports = function(){};"
-          ],
+          "head": ["window.exports = function(){};"],
           "tail": []
         }
       }
@@ -1284,7 +1383,8 @@
       "tests": [
         {
           "text": "Properly uses <code>import * as</code> syntax.",
-          "testString": "assert(code.match(/import\\s+\\*\\s+as\\s+[a-zA-Z0-9_$]+\\s+from\\s*\"\\s*capitalize_strings\\s*\"\\s*;/gi), 'Properly uses <code>import * as</code> syntax.');"
+          "testString":
+            "assert(code.match(/import\\s+\\*\\s+as\\s+[a-zA-Z0-9_$]+\\s+from\\s*\"\\s*capitalize_strings\\s*\"\\s*;/gi), 'Properly uses <code>import * as</code> syntax.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -1295,9 +1395,7 @@
           "key": "indexjs",
           "ext": "js",
           "name": "index",
-          "contents": [
-            "\"use strict\";"
-          ],
+          "contents": ["\"use strict\";"],
           "head": [
             "window.require = function(str) {",
             "if (str === 'capitalize_strings') {",
@@ -1317,7 +1415,7 @@
         "In the <code>export</code> lesson, you learned about the syntax referred to as a <dfn>named export</dfn>. This allowed you to make multiple functions and variables available for use in other files.",
         "There is another <code>export</code> syntax you need to know, known as <dfn>export default</dfn>. Usually you will use this syntax if only one value is being exported from a file. It is also used to create a fallback value for a file or module.",
         "Here is a quick example of <code>export default</code>:",
-        "<blockquote>export default function add(x,y) {<br>  return x + y;<br>}</blockquote>",
+        "<blockquote>export default function add(x,y) {<br>&nbsp;&nbsp;return x + y;<br>}</blockquote>",
         "Note: Since <code>export default</code> is used to declare a fallback value for a module or file, you can only have one value be a default export in each module or file. Additionally, you cannot use <code>export default</code> with <code>var</code>, <code>let</code>, or <code>const</code>",
         "<hr>",
         "The following function should be the fallback value for the module. Please add the necessary code to do so."
@@ -1325,7 +1423,8 @@
       "tests": [
         {
           "text": "Proper used of <code>export</code> fallback.",
-          "testString": "getUserInput => assert(getUserInput('index').match(/export\\s+default\\s+function\\s+subtract\\(x,y\\)\\s+{return\\s+x\\s-\\s+y;}/g), 'Proper used of <code>export</code> fallback.');"
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/export\\s+default\\s+function\\s+subtract\\(x,y\\)\\s+{return\\s+x\\s-\\s+y;}/g), 'Proper used of <code>export</code> fallback.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -1340,9 +1439,7 @@
             "\"use strict\";",
             "function subtract(x,y) {return x - y;}"
           ],
-          "head": [
-            "window.exports = function(){};"
-          ],
+          "head": ["window.exports = function(){};"],
           "tail": []
         }
       }
@@ -1361,7 +1458,8 @@
       "tests": [
         {
           "text": "Properly imports <code>export default</code> method.",
-          "testString": "getUserInput => assert(getUserInput('index').match(/import\\s+subtract\\s+from\\s+\"math_functions\"/g), 'Properly imports <code>export default</code> method.');"
+          "testString":
+            "getUserInput => assert(getUserInput('index').match(/import\\s+subtract\\s+from\\s+\"math_functions\"/g), 'Properly imports <code>export default</code> method.');"
         }
       ],
       "releasedOn": "Feb 17, 2017",
@@ -1372,10 +1470,7 @@
           "key": "indexjs",
           "ext": "js",
           "name": "index",
-          "contents": [
-            "\"use strict\";",
-            "subtract(7,4);"
-          ],
+          "contents": ["\"use strict\";", "subtract(7,4);"],
           "head": [
             "window.require = function(str) {",
             "if (str === 'math_functions') {",
@@ -1388,4 +1483,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/challenges/03-front-end-libraries/react-and-redux.json b/challenges/03-front-end-libraries/react-and-redux.json
index 55e0465c9..7fce2db09 100644
--- a/challenges/03-front-end-libraries/react-and-redux.json
+++ b/challenges/03-front-end-libraries/react-and-redux.json
@@ -5,16 +5,18 @@
   "helpRoom": "Help",
   "required": [
     {
-      "src":"https://unpkg.com/react@16.4.0/umd/react.production.min.js"
+      "src": "https://unpkg.com/react@16.4.0/umd/react.production.min.js"
     },
     {
-      "src":"https://unpkg.com/react-dom@16.4.0/umd/react-dom.production.min.js"
+      "src":
+        "https://unpkg.com/react-dom@16.4.0/umd/react-dom.production.min.js"
     },
     {
       "src": "https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.min.js"
     },
     {
-      "src": "https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.7/react-redux.min.js"
+      "src":
+        "https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.7/react-redux.min.js"
     }
   ],
   "template": "<body><div id='root'></div>${ source || '' }</body>",
@@ -53,16 +55,22 @@
       },
       "tests": [
         {
-          "text": "The <code>DisplayMessages</code> component should render an empty <code>div</code> element.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); return mockedComponent.find('div').text() === '' })(), 'The <code>DisplayMessages</code> component should render an empty <code>div</code> element.');"
+          "text":
+            "The <code>DisplayMessages</code> component should render an empty <code>div</code> element.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); return mockedComponent.find('div').text() === '' })(), 'The <code>DisplayMessages</code> component should render an empty <code>div</code> element.');"
         },
         {
-          "text": "The <code>DisplayMessages</code> constructor should be called properly with <code>super</code>, passing in <code>props</code>.",
-          "testString": "getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').replace(/\\s/g,''); return noWhiteSpace.includes('constructor(props)') && noWhiteSpace.includes('super(props'); })(), 'The <code>DisplayMessages</code> constructor should be called properly with <code>super</code>, passing in <code>props</code>.');"
+          "text":
+            "The <code>DisplayMessages</code> constructor should be called properly with <code>super</code>, passing in <code>props</code>.",
+          "testString":
+            "getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').replace(/\\s/g,''); return noWhiteSpace.includes('constructor(props)') && noWhiteSpace.includes('super(props'); })(), 'The <code>DisplayMessages</code> constructor should be called properly with <code>super</code>, passing in <code>props</code>.');"
         },
         {
-          "text": "The <code>DisplayMessages</code> component should have an initial state equal to <code>{input: \"\", messages: []}</code>.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const initialState = mockedComponent.state(); return typeof initialState === 'object' && initialState.input === '' && Array.isArray(initialState.messages) && initialState.messages.length === 0; })(), 'The <code>DisplayMessages</code> component should have an initial state equal to <code>{input: \"\", messages: []}</code>.');"
+          "text":
+            "The <code>DisplayMessages</code> component should have an initial state equal to <code>{input: \"\", messages: []}</code>.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const initialState = mockedComponent.state(); return typeof initialState === 'object' && initialState.input === '' && Array.isArray(initialState.messages) && initialState.messages.length === 0; })(), 'The <code>DisplayMessages</code> component should have an initial state equal to <code>{input: \"\", messages: []}</code>.');"
         }
       ],
       "solutions": [
@@ -120,28 +128,40 @@
       },
       "tests": [
         {
-          "text": "The <code>DisplayMessages</code> component should initialize with a state equal to <code>{ input: \"\", messages: [] }</code>.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const initialState = mockedComponent.state(); return ( typeof initialState === 'object' && initialState.input === '' && initialState.messages.length === 0); })(), 'The <code>DisplayMessages</code> component should initialize with a state equal to <code>{ input: \"\", messages: [] }</code>.');"
+          "text":
+            "The <code>DisplayMessages</code> component should initialize with a state equal to <code>{ input: \"\", messages: [] }</code>.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const initialState = mockedComponent.state(); return ( typeof initialState === 'object' && initialState.input === '' && initialState.messages.length === 0); })(), 'The <code>DisplayMessages</code> component should initialize with a state equal to <code>{ input: \"\", messages: [] }</code>.');"
         },
         {
-          "text": "The <code>DisplayMessages</code> component should render a <code>div</code> containing an <code>h2</code> element, a <code>button</code> element, a <code>ul</code> element, and <code>li</code> elements as children.",
-          "testString": "async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const state = () => { mockedComponent.setState({messages: ['__TEST__MESSAGE']}); return waitForIt(() => mockedComponent )}; const updated = await state(); assert(updated.find('div').length === 1 && updated.find('h2').length === 1 && updated.find('button').length === 1 && updated.find('ul').length === 1, 'The <code>DisplayMessages</code> component should render a <code>div</code> containing an <code>h2</code> element, a <code>button</code> element, a <code>ul</code> element, and <code>li</code> elements as children.'); }; "
+          "text":
+            "The <code>DisplayMessages</code> component should render a <code>div</code> containing an <code>h2</code> element, a <code>button</code> element, a <code>ul</code> element, and <code>li</code> elements as children.",
+          "testString":
+            "async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const state = () => { mockedComponent.setState({messages: ['__TEST__MESSAGE']}); return waitForIt(() => mockedComponent )}; const updated = await state(); assert(updated.find('div').length === 1 && updated.find('h2').length === 1 && updated.find('button').length === 1 && updated.find('ul').length === 1, 'The <code>DisplayMessages</code> component should render a <code>div</code> containing an <code>h2</code> element, a <code>button</code> element, a <code>ul</code> element, and <code>li</code> elements as children.'); }; "
         },
         {
-          "text": "The <code>input</code> element should render the value of <code>input</code> in local state.",
-          "testString": "async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find('input').simulate('change', { target: { value: v }}); const testValue = '__TEST__EVENT__INPUT'; const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const updated = await changed(); assert(updated.find('input').props().value === testValue, 'The <code>input</code> element should render the value of <code>input</code> in local state.'); }; "
+          "text":
+            "The <code>input</code> element should render the value of <code>input</code> in local state.",
+          "testString":
+            "async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find('input').simulate('change', { target: { value: v }}); const testValue = '__TEST__EVENT__INPUT'; const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const updated = await changed(); assert(updated.find('input').props().value === testValue, 'The <code>input</code> element should render the value of <code>input</code> in local state.'); }; "
         },
         {
-          "text": "Calling the method <code>handleChange</code> should update the <code>input</code> value in state to the current input.",
-          "testString": "async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find('input').simulate('change', { target: { value: v }}); const initialState = mockedComponent.state(); const testMessage = '__TEST__EVENT__MESSAGE__'; const changed = () => { causeChange(mockedComponent, testMessage); return waitForIt(() => mockedComponent )}; const afterInput = await changed(); assert(initialState.input === '' && afterInput.state().input === '__TEST__EVENT__MESSAGE__', 'Calling the method <code>handleChange</code> should update the <code>input</code> value in state to the current input.');  }; "
+          "text":
+            "Calling the method <code>handleChange</code> should update the <code>input</code> value in state to the current input.",
+          "testString":
+            "async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find('input').simulate('change', { target: { value: v }}); const initialState = mockedComponent.state(); const testMessage = '__TEST__EVENT__MESSAGE__'; const changed = () => { causeChange(mockedComponent, testMessage); return waitForIt(() => mockedComponent )}; const afterInput = await changed(); assert(initialState.input === '' && afterInput.state().input === '__TEST__EVENT__MESSAGE__', 'Calling the method <code>handleChange</code> should update the <code>input</code> value in state to the current input.');  }; "
         },
         {
-          "text": "Clicking the <code>Add message</code> button should call the method <code>submitMessage</code> which should add the current <code>input</code> to the <code>messages</code> array in state.",
-          "testString": "async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find('input').simulate('change', { target: { value: v }}); const initialState = mockedComponent.state(); const testMessage_1 = '__FIRST__MESSAGE__'; const firstChange = () => { causeChange(mockedComponent, testMessage_1); return waitForIt(() => mockedComponent )}; const firstResult = await firstChange(); const firstSubmit = () => { mockedComponent.find('button').simulate('click'); return waitForIt(() => mockedComponent )}; const afterSubmit_1 = await firstSubmit(); const submitState_1 = afterSubmit_1.state(); const testMessage_2 = '__SECOND__MESSAGE__'; const secondChange = () => { causeChange(mockedComponent, testMessage_2); return waitForIt(() => mockedComponent )}; const secondResult = await secondChange(); const secondSubmit = () => { mockedComponent.find('button').simulate('click'); return waitForIt(() => mockedComponent )}; const afterSubmit_2 = await secondSubmit(); const submitState_2 = afterSubmit_2.state(); assert(initialState.messages.length === 0 && submitState_1.messages.length === 1 && submitState_2.messages.length === 2 && submitState_2.messages[1] === testMessage_2, 'Clicking the <code>Add message</code> button should call the method <code>submitMessage</code> which should add the current <code>input</code> to the <code>messages</code> array in state.'); }; "
+          "text":
+            "Clicking the <code>Add message</code> button should call the method <code>submitMessage</code> which should add the current <code>input</code> to the <code>messages</code> array in state.",
+          "testString":
+            "async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find('input').simulate('change', { target: { value: v }}); const initialState = mockedComponent.state(); const testMessage_1 = '__FIRST__MESSAGE__'; const firstChange = () => { causeChange(mockedComponent, testMessage_1); return waitForIt(() => mockedComponent )}; const firstResult = await firstChange(); const firstSubmit = () => { mockedComponent.find('button').simulate('click'); return waitForIt(() => mockedComponent )}; const afterSubmit_1 = await firstSubmit(); const submitState_1 = afterSubmit_1.state(); const testMessage_2 = '__SECOND__MESSAGE__'; const secondChange = () => { causeChange(mockedComponent, testMessage_2); return waitForIt(() => mockedComponent )}; const secondResult = await secondChange(); const secondSubmit = () => { mockedComponent.find('button').simulate('click'); return waitForIt(() => mockedComponent )}; const afterSubmit_2 = await secondSubmit(); const submitState_2 = afterSubmit_2.state(); assert(initialState.messages.length === 0 && submitState_1.messages.length === 1 && submitState_2.messages.length === 2 && submitState_2.messages[1] === testMessage_2, 'Clicking the <code>Add message</code> button should call the method <code>submitMessage</code> which should add the current <code>input</code> to the <code>messages</code> array in state.'); }; "
         },
         {
-          "text": "The <code>submitMessage</code> method should clear the current input.",
-          "testString": "async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find('input').simulate('change', { target: { value: v }}); const initialState = mockedComponent.state(); const testMessage = '__FIRST__MESSAGE__'; const firstChange = () => { causeChange(mockedComponent, testMessage); return waitForIt(() => mockedComponent )}; const firstResult = await firstChange(); const firstState = firstResult.state(); const firstSubmit = () => { mockedComponent.find('button').simulate('click'); return waitForIt(() => mockedComponent )}; const afterSubmit = await firstSubmit(); const submitState = afterSubmit.state(); assert(firstState.input === testMessage && submitState.input === '', 'The <code>submitMessage</code> method should clear the current input.'); }; "
+          "text":
+            "The <code>submitMessage</code> method should clear the current input.",
+          "testString":
+            "async () => { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find('input').simulate('change', { target: { value: v }}); const initialState = mockedComponent.state(); const testMessage = '__FIRST__MESSAGE__'; const firstChange = () => { causeChange(mockedComponent, testMessage); return waitForIt(() => mockedComponent )}; const firstResult = await firstChange(); const firstState = firstResult.state(); const firstSubmit = () => { mockedComponent.find('button').simulate('click'); return waitForIt(() => mockedComponent )}; const afterSubmit = await firstSubmit(); const submitState = afterSubmit.state(); assert(firstState.input === testMessage && submitState.input === '', 'The <code>submitMessage</code> method should clear the current input.'); }; "
         }
       ],
       "solutions": [
@@ -177,28 +197,39 @@
       },
       "tests": [
         {
-          "text": "The const <code>ADD</code> should exist and hold a value equal to the string <code>ADD</code>",
-          "testString": "assert(ADD === 'ADD', 'The const <code>ADD</code> should exist and hold a value equal to the string <code>ADD</code>');"
+          "text":
+            "The const <code>ADD</code> should exist and hold a value equal to the string <code>ADD</code>",
+          "testString":
+            "assert(ADD === 'ADD', 'The const <code>ADD</code> should exist and hold a value equal to the string <code>ADD</code>');"
         },
         {
-          "text": "The action creator <code>addMessage</code> should return an object with <code>type</code> equal to <code>ADD</code> and message equal to the message that is passed in.",
-          "testString": "assert((function() { const addAction = addMessage('__TEST__MESSAGE__'); return addAction.type === ADD && addAction.message === '__TEST__MESSAGE__'; })(), 'The action creator <code>addMessage</code> should return an object with <code>type</code> equal to <code>ADD</code> and message equal to the message that is passed in.');"
+          "text":
+            "The action creator <code>addMessage</code> should return an object with <code>type</code> equal to <code>ADD</code> and message equal to the message that is passed in.",
+          "testString":
+            "assert((function() { const addAction = addMessage('__TEST__MESSAGE__'); return addAction.type === ADD && addAction.message === '__TEST__MESSAGE__'; })(), 'The action creator <code>addMessage</code> should return an object with <code>type</code> equal to <code>ADD</code> and message equal to the message that is passed in.');"
         },
         {
           "text": "<code>messageReducer</code> should be a function.",
-          "testString": "assert(typeof messageReducer === 'function', '<code>messageReducer</code> should be a function.');"
+          "testString":
+            "assert(typeof messageReducer === 'function', '<code>messageReducer</code> should be a function.');"
         },
         {
-          "text": "The store should exist and have an initial state set to an empty array.",
-          "testString": "assert((function() { const initialState = store.getState(); return typeof store === 'object' && initialState.length === 0; })(), 'The store should exist and have an initial state set to an empty array.');"
+          "text":
+            "The store should exist and have an initial state set to an empty array.",
+          "testString":
+            "assert((function() { const initialState = store.getState(); return typeof store === 'object' && initialState.length === 0; })(), 'The store should exist and have an initial state set to an empty array.');"
         },
         {
-          "text": "Dispatching <code>addMessage</code> against the store should immutably add a new message to the array of messages held in state.",
-          "testString": "assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch(addMessage('__A__TEST__MESSAGE')); const addState = store.getState(); return (isFrozen && addState[0] === '__A__TEST__MESSAGE'); })(), 'Dispatching <code>addMessage</code> against the store should immutably add a new message to the array of messages held in state.');"
+          "text":
+            "Dispatching <code>addMessage</code> against the store should immutably add a new message to the array of messages held in state.",
+          "testString":
+            "assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch(addMessage('__A__TEST__MESSAGE')); const addState = store.getState(); return (isFrozen && addState[0] === '__A__TEST__MESSAGE'); })(), 'Dispatching <code>addMessage</code> against the store should immutably add a new message to the array of messages held in state.');"
         },
         {
-          "text": "The <code>messageReducer</code> should return the current state if called with any other actions.",
-          "testString": "assert((function() { const addState = store.getState(); store.dispatch({type: 'FAKE_ACTION'}); const testState = store.getState(); return (addState === testState); })(), 'The <code>messageReducer</code> should return the current state if called with any other actions.');"
+          "text":
+            "The <code>messageReducer</code> should return the current state if called with any other actions.",
+          "testString":
+            "assert((function() { const addState = store.getState(); store.dispatch({type: 'FAKE_ACTION'}); const testState = store.getState(); return (addState === testState); })(), 'The <code>messageReducer</code> should return the current state if called with any other actions.');"
         }
       ],
       "solutions": [
@@ -216,7 +247,7 @@
       "description": [
         "In the last challenge, you created a Redux store to handle the messages array and created an action for adding new messages. The next step is to provide React access to the Redux store and the actions it needs to dispatch updates. React Redux provides its <code>react-redux</code> package to help accomplish these tasks.",
         "React Redux provides a small API with two key features: <code>Provider</code> and <code>connect</code>. Another challenge covers <code>connect</code>. The <code>Provider</code> is a wrapper component from React Redux that wraps your React app. This wrapper then allows you to access the Redux <code>store</code> and <code>dispatch</code> functions throughout your component tree. <code>Provider</code> takes two props, the Redux store and the child components of your app. Defining the <code>Provider</code> for an App component might look like this:",
-        "<blockquote>&lt;Provider store={store}&gt;<br>  &lt;App/&gt;<br>&lt;/Provider&gt;</blockquote>",
+        "<blockquote>&lt;Provider store={store}&gt;<br>&nbsp;&nbsp;&lt;App/&gt;<br>&lt;/Provider&gt;</blockquote>",
         "<hr>",
         "The code editor now shows all your Redux and React code from the past several challenges. It includes the Redux store, actions, and the <code>DisplayMessages</code> component. The only new piece is the <code>AppWrapper</code> component at the bottom. Use this top level component to render the <code>Provider</code> from <code>ReactRedux</code>, and pass the Redux store as a prop. Then render the <code>DisplayMessages</code> component as a child. Once you are finished, you should see your React component rendered to the page.",
         "<strong>Note:</strong>&nbsp;React Redux is available as a global variable here, so you can access the Provider with dot notation. The code in the editor takes advantage of this and sets it to a constant <code>Provider</code> for you to use in the <code>AppWrapper</code> render method."
@@ -315,19 +346,26 @@
       "tests": [
         {
           "text": "The <code>AppWrapper</code> should render.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('AppWrapper').length === 1; })(), 'The <code>AppWrapper</code> should render.');"
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('AppWrapper').length === 1; })(), 'The <code>AppWrapper</code> should render.');"
         },
         {
-          "text": "The <code>Provider</code> wrapper component should have a prop of <code>store</code> passed to it, equal to the Redux store.",
-          "testString": "getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return getUserInput('index').replace(/\\s/g,'').includes('<Providerstore={store}>'); })(), 'The <code>Provider</code> wrapper component should have a prop of <code>store</code> passed to it, equal to the Redux store.');"
+          "text":
+            "The <code>Provider</code> wrapper component should have a prop of <code>store</code> passed to it, equal to the Redux store.",
+          "testString":
+            "getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return getUserInput('index').replace(/\\s/g,'').includes('<Providerstore={store}>'); })(), 'The <code>Provider</code> wrapper component should have a prop of <code>store</code> passed to it, equal to the Redux store.');"
         },
         {
-          "text": "<code>DisplayMessages</code> should render as a child of <code>AppWrapper</code>.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('AppWrapper').find('DisplayMessages').length === 1; })(), '<code>DisplayMessages</code> should render as a child of <code>AppWrapper</code>.');"
+          "text":
+            "<code>DisplayMessages</code> should render as a child of <code>AppWrapper</code>.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('AppWrapper').find('DisplayMessages').length === 1; })(), '<code>DisplayMessages</code> should render as a child of <code>AppWrapper</code>.');"
         },
         {
-          "text": "The <code>DisplayMessages</code> component should render an h2, input, button, and <code>ul</code> element.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('div').length === 1 && mockedComponent.find('h2').length === 1 && mockedComponent.find('button').length === 1 && mockedComponent.find('ul').length === 1; })(), 'The <code>DisplayMessages</code> component should render an h2, input, button, and <code>ul</code> element.');"
+          "text":
+            "The <code>DisplayMessages</code> component should render an h2, input, button, and <code>ul</code> element.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('div').length === 1 && mockedComponent.find('h2').length === 1 && mockedComponent.find('button').length === 1 && mockedComponent.find('ul').length === 1; })(), 'The <code>DisplayMessages</code> component should render an h2, input, button, and <code>ul</code> element.');"
         }
       ],
       "solutions": [
@@ -367,19 +405,24 @@
       "tests": [
         {
           "text": "The const <code>state</code> should be an empty array.",
-          "testString": "assert(Array.isArray(state) && state.length === 0, 'The const <code>state</code> should be an empty array.');"
+          "testString":
+            "assert(Array.isArray(state) && state.length === 0, 'The const <code>state</code> should be an empty array.');"
         },
         {
           "text": "<code>mapStateToProps</code> should be a function.",
-          "testString": "assert(typeof mapStateToProps === 'function', '<code>mapStateToProps</code> should be a function.');"
+          "testString":
+            "assert(typeof mapStateToProps === 'function', '<code>mapStateToProps</code> should be a function.');"
         },
         {
           "text": "<code>mapStateToProps</code> should return an object.",
-          "testString": "assert(typeof mapStateToProps() === 'object', '<code>mapStateToProps</code> should return an object.');"
+          "testString":
+            "assert(typeof mapStateToProps() === 'object', '<code>mapStateToProps</code> should return an object.');"
         },
         {
-          "text": "Passing an array as state to <code>mapStateToProps</code> should return this array assigned to a key of <code>messages</code>.",
-          "testString": "assert(mapStateToProps(['messages']).messages.pop() === 'messages', 'Passing an array as state to <code>mapStateToProps</code> should return this array assigned to a key of <code>messages</code>.');"
+          "text":
+            "Passing an array as state to <code>mapStateToProps</code> should return this array assigned to a key of <code>messages</code>.",
+          "testString":
+            "assert(mapStateToProps(['messages']).messages.pop() === 'messages', 'Passing an array as state to <code>mapStateToProps</code> should return this array assigned to a key of <code>messages</code>.');"
         }
       ],
       "solutions": [
@@ -397,7 +440,7 @@
       "description": [
         "The <code>mapDispatchToProps()</code> function is used to provide specific action creators to your React components so they can dispatch actions against the Redux store. It's similar in structure to the <code>mapStateToProps()</code> function you wrote in the last challenge. It returns an object that maps dispatch actions to property names, which become component <code>props</code>. However, instead of returning a piece of <code>state</code>, each property returns a function that calls <code>dispatch</code> with an action creator and any relevant action data. You have access to this <code>dispatch</code> because it's passed in to <code>mapDispatchToProps()</code> as a parameter when you define the function, just like you passed <code>state</code> to <code>mapStateToProps()</code>. Behind the scenes, React Redux is using Redux's <code>store.dispatch()</code> to conduct these dispatches with <code>mapDispatchToProps()</code>. This is similar to how it uses <code>store.subscribe()</code> for components that are mapped to <code>state</code>.",
         "For example, you have a <code>loginUser()</code> action creator that takes a <code>username</code> as an action payload. The object returned from <code>mapDispatchToProps()</code> for this action creator would look something like:",
-        "<blockquote>{<br> submitLoginUser: function(username) {<br>   dispatch(loginUser(username));<br> }<br>}</blockquote>",
+        "<blockquote>{<br>&nbsp;&nbsp;submitLoginUser: function(username) {<br>&nbsp;&nbsp;&nbsp;&nbsp;dispatch(loginUser(username));<br>&nbsp;&nbsp;}<br>}</blockquote>",
         "<hr>",
         "The code editor provides an action creator called <code>addMessage()</code>. Write the function <code>mapDispatchToProps()</code> that takes <code>dispatch</code> as an argument, then returns an object. The object should have a property <code>submitNewMessage</code> set to the dispatch function, which takes a parameter for the new message to add when it dispatches <code>addMessage()</code>."
       ],
@@ -423,20 +466,26 @@
       },
       "tests": [
         {
-          "text": "<code>addMessage</code> should return an object with keys <code>type</code> and <code>message</code>.",
-          "testString": "assert((function() { const addMessageTest = addMessage(); return ( addMessageTest.hasOwnProperty('type') && addMessageTest.hasOwnProperty('message')); })(), '<code>addMessage</code> should return an object with keys <code>type</code> and <code>message</code>.');"
+          "text":
+            "<code>addMessage</code> should return an object with keys <code>type</code> and <code>message</code>.",
+          "testString":
+            "assert((function() { const addMessageTest = addMessage(); return ( addMessageTest.hasOwnProperty('type') && addMessageTest.hasOwnProperty('message')); })(), '<code>addMessage</code> should return an object with keys <code>type</code> and <code>message</code>.');"
         },
         {
           "text": "<code>mapDispatchToProps</code> should be a function.",
-          "testString": "assert(typeof mapDispatchToProps === 'function', '<code>mapDispatchToProps</code> should be a function.');"
+          "testString":
+            "assert(typeof mapDispatchToProps === 'function', '<code>mapDispatchToProps</code> should be a function.');"
         },
         {
           "text": "<code>mapDispatchToProps</code> should return an object.",
-          "testString": "assert(typeof mapDispatchToProps() === 'object', '<code>mapDispatchToProps</code> should return an object.');"
+          "testString":
+            "assert(typeof mapDispatchToProps() === 'object', '<code>mapDispatchToProps</code> should return an object.');"
         },
         {
-          "text": "Dispatching <code>addMessage</code> with <code>submitNewMessage</code> from <code>mapDispatchToProps</code> should return a message to the dispatch function.",
-          "testString": "assert((function() { let testAction; const dispatch = (fn) => { testAction = fn; }; let dispatchFn = mapDispatchToProps(dispatch); dispatchFn.submitNewMessage('__TEST__MESSAGE__'); return (testAction.type === 'ADD' && testAction.message === '__TEST__MESSAGE__'); })(), 'Dispatching <code>addMessage</code> with <code>submitNewMessage</code> from <code>mapDispatchToProps</code> should return a message to the dispatch function.');"
+          "text":
+            "Dispatching <code>addMessage</code> with <code>submitNewMessage</code> from <code>mapDispatchToProps</code> should return a message to the dispatch function.",
+          "testString":
+            "assert((function() { let testAction; const dispatch = (fn) => { testAction = fn; }; let dispatchFn = mapDispatchToProps(dispatch); dispatchFn.submitNewMessage('__TEST__MESSAGE__'); return (testAction.type === 'ADD' && testAction.message === '__TEST__MESSAGE__'); })(), 'Dispatching <code>addMessage</code> with <code>submitNewMessage</code> from <code>mapDispatchToProps</code> should return a message to the dispatch function.');"
         }
       ],
       "solutions": [
@@ -521,15 +570,20 @@
       "tests": [
         {
           "text": "The <code>Presentational</code> component should render.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('Presentational').length === 1; })(), 'The <code>Presentational</code> component should render.');"
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('Presentational').length === 1; })(), 'The <code>Presentational</code> component should render.');"
         },
         {
-          "text": "The <code>Presentational</code> component should receive a prop <code>messages</code> via <code>connect</code>.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find('Presentational').props(); return props.messages === '__INITIAL__STATE__'; })(), 'The <code>Presentational</code> component should receive a prop <code>messages</code> via <code>connect</code>.');"
+          "text":
+            "The <code>Presentational</code> component should receive a prop <code>messages</code> via <code>connect</code>.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find('Presentational').props(); return props.messages === '__INITIAL__STATE__'; })(), 'The <code>Presentational</code> component should receive a prop <code>messages</code> via <code>connect</code>.');"
         },
         {
-          "text": "The <code>Presentational</code> component should receive a prop <code>submitNewMessage</code> via <code>connect</code>.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find('Presentational').props(); return typeof props.submitNewMessage === 'function'; })(), 'The <code>Presentational</code> component should receive a prop <code>submitNewMessage</code> via <code>connect</code>.');"
+          "text":
+            "The <code>Presentational</code> component should receive a prop <code>submitNewMessage</code> via <code>connect</code>.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find('Presentational').props(); return typeof props.submitNewMessage === 'function'; })(), 'The <code>Presentational</code> component should receive a prop <code>submitNewMessage</code> via <code>connect</code>.');"
         }
       ],
       "solutions": [
@@ -662,23 +716,32 @@
       "tests": [
         {
           "text": "The <code>AppWrapper</code> should render to the page.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('AppWrapper').length === 1; })(), 'The <code>AppWrapper</code> should render to the page.');"
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('AppWrapper').length === 1; })(), 'The <code>AppWrapper</code> should render to the page.');"
         },
         {
-          "text": "The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('Presentational').length === 1; })(), 'The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.');"
+          "text":
+            "The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('Presentational').length === 1; })(), 'The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.');"
         },
         {
-          "text": "The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find('Presentational'); return ( PresentationalComponent.find('div').length === 1 && PresentationalComponent.find('h2').length === 1 && PresentationalComponent.find('button').length === 1 && PresentationalComponent.find('ul').length === 1 ); })(), 'The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.');"
+          "text":
+            "The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find('Presentational'); return ( PresentationalComponent.find('div').length === 1 && PresentationalComponent.find('h2').length === 1 && PresentationalComponent.find('button').length === 1 && PresentationalComponent.find('ul').length === 1 ); })(), 'The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.');"
         },
         {
-          "text": "The <code>Presentational</code> component should receive <code>messages</code> from the Redux store as a prop.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find('Presentational'); const props = PresentationalComponent.props(); return Array.isArray(props.messages); })(), 'The <code>Presentational</code> component should receive <code>messages</code> from the Redux store as a prop.');"
+          "text":
+            "The <code>Presentational</code> component should receive <code>messages</code> from the Redux store as a prop.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find('Presentational'); const props = PresentationalComponent.props(); return Array.isArray(props.messages); })(), 'The <code>Presentational</code> component should receive <code>messages</code> from the Redux store as a prop.');"
         },
         {
-          "text": "The <code>Presentational</code> component should receive the <code>submitMessage</code> action creator as a prop.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find('Presentational'); const props = PresentationalComponent.props(); return typeof props.submitNewMessage === 'function'; })(), 'The <code>Presentational</code> component should receive the <code>submitMessage</code> action creator as a prop.');"
+          "text":
+            "The <code>Presentational</code> component should receive the <code>submitMessage</code> action creator as a prop.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find('Presentational'); const props = PresentationalComponent.props(); return typeof props.submitNewMessage === 'function'; })(), 'The <code>Presentational</code> component should receive the <code>submitMessage</code> action creator as a prop.');"
         }
       ],
       "solutions": [
@@ -810,39 +873,56 @@
       "tests": [
         {
           "text": "The <code>AppWrapper</code> should render to the page.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('AppWrapper').length === 1; })(), 'The <code>AppWrapper</code> should render to the page.');"
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('AppWrapper').length === 1; })(), 'The <code>AppWrapper</code> should render to the page.');"
         },
         {
-          "text": "The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('Presentational').length === 1; })(), 'The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.');"
+          "text":
+            "The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('Presentational').length === 1; })(), 'The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.');"
         },
         {
-          "text": "The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find('Presentational'); return ( PresentationalComponent.find('div').length === 1 && PresentationalComponent.find('h2').length === 1 && PresentationalComponent.find('button').length === 1 && PresentationalComponent.find('ul').length === 1 ); })(), 'The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.');"
+          "text":
+            "The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find('Presentational'); return ( PresentationalComponent.find('div').length === 1 && PresentationalComponent.find('h2').length === 1 && PresentationalComponent.find('button').length === 1 && PresentationalComponent.find('ul').length === 1 ); })(), 'The <code>Presentational</code> component should render an <code>h2</code>, <code>input</code>, <code>button</code>, and <code>ul</code> elements.');"
         },
         {
-          "text": "The <code>Presentational</code> component should receive <code>messages</code> from the Redux store as a prop.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find('Presentational'); const props = PresentationalComponent.props(); return Array.isArray(props.messages); })(), 'The <code>Presentational</code> component should receive <code>messages</code> from the Redux store as a prop.');"
+          "text":
+            "The <code>Presentational</code> component should receive <code>messages</code> from the Redux store as a prop.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find('Presentational'); const props = PresentationalComponent.props(); return Array.isArray(props.messages); })(), 'The <code>Presentational</code> component should receive <code>messages</code> from the Redux store as a prop.');"
         },
         {
-          "text": "The <code>Presentational</code> component should receive the <code>submitMessage</code> action creator as a prop.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find('Presentational'); const props = PresentationalComponent.props(); return typeof props.submitNewMessage === 'function'; })(), 'The <code>Presentational</code> component should receive the <code>submitMessage</code> action creator as a prop.');"
+          "text":
+            "The <code>Presentational</code> component should receive the <code>submitMessage</code> action creator as a prop.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find('Presentational'); const props = PresentationalComponent.props(); return typeof props.submitNewMessage === 'function'; })(), 'The <code>Presentational</code> component should receive the <code>submitMessage</code> action creator as a prop.');"
         },
         {
-          "text": "The state of the <code>Presentational</code> component should contain one property, <code>input</code>, which is initialized to an empty string.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalState = mockedComponent.find('Presentational').instance().state; return typeof PresentationalState.input === 'string' && Object.keys(PresentationalState).length === 1; })(), 'The state of the <code>Presentational</code> component should contain one property, <code>input</code>, which is initialized to an empty string.');"
+          "text":
+            "The state of the <code>Presentational</code> component should contain one property, <code>input</code>, which is initialized to an empty string.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalState = mockedComponent.find('Presentational').instance().state; return typeof PresentationalState.input === 'string' && Object.keys(PresentationalState).length === 1; })(), 'The state of the <code>Presentational</code> component should contain one property, <code>input</code>, which is initialized to an empty string.');"
         },
         {
-          "text": "Typing in the <code>input</code> element should update the state of the <code>Presentational</code> component.",
-          "testString": "async () => { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const testValue = '__MOCK__INPUT__'; const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find('input').simulate('change', { target: { value: v }}); let initialInput = mockedComponent.find('Presentational').find('input'); const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const updated = await changed(); const updatedInput = updated.find('Presentational').find('input'); assert(initialInput.props().value === '' && updatedInput.props().value === '__MOCK__INPUT__', 'Typing in the <code>input</code> element should update the state of the <code>Presentational</code> component.'); }; "
+          "text":
+            "Typing in the <code>input</code> element should update the state of the <code>Presentational</code> component.",
+          "testString":
+            "async () => { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const testValue = '__MOCK__INPUT__'; const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const causeChange = (c, v) => c.find('input').simulate('change', { target: { value: v }}); let initialInput = mockedComponent.find('Presentational').find('input'); const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const updated = await changed(); const updatedInput = updated.find('Presentational').find('input'); assert(initialInput.props().value === '' && updatedInput.props().value === '__MOCK__INPUT__', 'Typing in the <code>input</code> element should update the state of the <code>Presentational</code> component.'); }; "
         },
         {
-          "text": "Dispatching the <code>submitMessage</code> on the <code>Presentational</code> component should update Redux store and clear the input in local state.",
-          "testString": "async () => { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); let beforeProps = mockedComponent.find('Presentational').props(); const testValue = '__TEST__EVENT__INPUT__'; const causeChange = (c, v) => c.find('input').simulate('change', { target: { value: v }}); const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const clickButton = () => { mockedComponent.find('button').simulate('click'); return waitForIt(() => mockedComponent )}; const afterChange = await changed(); const afterChangeInput = afterChange.find('input').props().value; const afterClick = await clickButton(); const afterProps = mockedComponent.find('Presentational').props(); assert(beforeProps.messages.length === 0 && afterChangeInput === testValue && afterProps.messages.pop() === testValue && afterClick.find('input').props().value === '', 'Dispatching the <code>submitMessage</code> on the <code>Presentational</code> component should update Redux store and clear the input in local state.'); }; "
+          "text":
+            "Dispatching the <code>submitMessage</code> on the <code>Presentational</code> component should update Redux store and clear the input in local state.",
+          "testString":
+            "async () => { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); let beforeProps = mockedComponent.find('Presentational').props(); const testValue = '__TEST__EVENT__INPUT__'; const causeChange = (c, v) => c.find('input').simulate('change', { target: { value: v }}); const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const clickButton = () => { mockedComponent.find('button').simulate('click'); return waitForIt(() => mockedComponent )}; const afterChange = await changed(); const afterChangeInput = afterChange.find('input').props().value; const afterClick = await clickButton(); const afterProps = mockedComponent.find('Presentational').props(); assert(beforeProps.messages.length === 0 && afterChangeInput === testValue && afterProps.messages.pop() === testValue && afterClick.find('input').props().value === '', 'Dispatching the <code>submitMessage</code> on the <code>Presentational</code> component should update Redux store and clear the input in local state.'); }; "
         },
         {
-          "text": "The <code>Presentational</code> component should render the <code>messages</code> from the Redux store.",
-          "testString": "async () => { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); let beforeProps = mockedComponent.find('Presentational').props(); const testValue = '__TEST__EVENT__INPUT__'; const causeChange = (c, v) => c.find('input').simulate('change', { target: { value: v }}); const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const clickButton = () => { mockedComponent.find('button').simulate('click'); return waitForIt(() => mockedComponent )}; const afterChange = await changed(); const afterChangeInput = afterChange.find('input').props().value; const afterClick = await clickButton(); const afterProps = mockedComponent.find('Presentational').props(); assert(beforeProps.messages.length === 0 && afterChangeInput === testValue && afterProps.messages.pop() === testValue && afterClick.find('input').props().value === '' && afterClick.find('ul').childAt(0).text() === testValue, 'The <code>Presentational</code> component should render the <code>messages</code> from the Redux store.'); }; "
+          "text":
+            "The <code>Presentational</code> component should render the <code>messages</code> from the Redux store.",
+          "testString":
+            "async () => { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); let beforeProps = mockedComponent.find('Presentational').props(); const testValue = '__TEST__EVENT__INPUT__'; const causeChange = (c, v) => c.find('input').simulate('change', { target: { value: v }}); const changed = () => { causeChange(mockedComponent, testValue); return waitForIt(() => mockedComponent )}; const clickButton = () => { mockedComponent.find('button').simulate('click'); return waitForIt(() => mockedComponent )}; const afterChange = await changed(); const afterChangeInput = afterChange.find('input').props().value; const afterClick = await clickButton(); const afterProps = mockedComponent.find('Presentational').props(); assert(beforeProps.messages.length === 0 && afterChangeInput === testValue && afterProps.messages.pop() === testValue && afterClick.find('input').props().value === '' && afterClick.find('ul').childAt(0).text() === testValue, 'The <code>Presentational</code> component should render the <code>messages</code> from the Redux store.'); }; "
         }
       ],
       "solutions": [
@@ -901,17 +981,17 @@
       },
       "tests": [
         {
-          "text": "The message <code>Now I know React and Redux!</code> should be logged to the console.",
-          "testString": "assert(editor.getValue().includes('console.log(\"Now I know React and Redux!\")') || editor.getValue().includes('console.log(\\'Now I know React and Redux!\\')'), 'The message <code>Now I know React and Redux!</code> should be logged to the console.');"
+          "text":
+            "The message <code>Now I know React and Redux!</code> should be logged to the console.",
+          "testString":
+            "assert(editor.getValue().includes('console.log(\"Now I know React and Redux!\")') || editor.getValue().includes('console.log(\\'Now I know React and Redux!\\')'), 'The message <code>Now I know React and Redux!</code> should be logged to the console.');"
         }
       ],
-      "solutions": [
-        "console.log('Now I know React and Redux!');"
-      ],
+      "solutions": ["console.log('Now I know React and Redux!');"],
       "challengeType": 6,
       "isRequired": false,
       "translations": {},
       "reactRedux": true
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/challenges/03-front-end-libraries/react.json b/challenges/03-front-end-libraries/react.json
index 998106189..32cbf5560 100644
--- a/challenges/03-front-end-libraries/react.json
+++ b/challenges/03-front-end-libraries/react.json
@@ -5,13 +5,15 @@
   "helpRoom": "Help",
   "required": [
     {
-      "src":"https://unpkg.com/react@16.4.0/umd/react.production.min.js"
+      "src": "https://unpkg.com/react@16.4.0/umd/react.production.min.js"
     },
     {
-      "src":"https://unpkg.com/react-dom@16.4.0/umd/react-dom.production.min.js"
+      "src":
+        "https://unpkg.com/react-dom@16.4.0/umd/react-dom.production.min.js"
     }
   ],
-  "template": "<body><div id='root'></div><div id='challenge-node'></div>${ source || '' }</body>",
+  "template":
+    "<body><div id='root'></div><div id='challenge-node'></div>${ source || '' }</body>",
   "challenges": [
     {
       "id": "587d7dbc367417b2b2512bb1",
@@ -31,30 +33,26 @@
           "key": "indexjsx",
           "ext": "jsx",
           "name": "index",
-          "contents": [
-            "",
-            "const JSX = <div></div>;",
-            ""
-          ],
-          "tail": [
-            "ReactDOM.render(JSX, document.getElementById('root'))"
-          ],
+          "contents": ["", "const JSX = <div></div>;", ""],
+          "tail": ["ReactDOM.render(JSX, document.getElementById('root'))"],
           "head": []
         }
       },
       "tests": [
         {
-          "text": "The constant <code>JSX</code> should return an <code>h1</code> element.",
-          "testString": "assert(JSX.type === 'h1', 'The constant <code>JSX</code> should return an <code>h1</code> element.');"
+          "text":
+            "The constant <code>JSX</code> should return an <code>h1</code> element.",
+          "testString":
+            "assert(JSX.type === 'h1', 'The constant <code>JSX</code> should return an <code>h1</code> element.');"
         },
         {
-          "text": "The <code>h1</code> tag should include the text <code>Hello JSX!</code>",
-          "testString": "assert(Enzyme.shallow(JSX).contains('Hello JSX!'), 'The <code>h1</code> tag should include the text <code>Hello JSX!</code>');"
+          "text":
+            "The <code>h1</code> tag should include the text <code>Hello JSX!</code>",
+          "testString":
+            "assert(Enzyme.shallow(JSX).contains('Hello JSX!'), 'The <code>h1</code> tag should include the text <code>Hello JSX!</code>');"
         }
       ],
-      "solutions": [
-        "const JSX = <h1>Hello JSX!</h1>;"
-      ],
+      "solutions": ["const JSX = <h1>Hello JSX!</h1>;"],
       "challengeType": 6,
       "isRequired": false,
       "translations": {},
@@ -71,7 +69,7 @@
         "For instance, several JSX elements written as siblings with no parent wrapper element will not transpile.",
         "Here's an example:",
         "<b>Valid JSX:</b>",
-        "<blockquote>&lt;div&gt;<br>  &lt;p&gt;Paragraph One&lt;/p&gt;<br>  &lt;p&gt;Paragraph Two&lt;/p&gt;<br>  &lt;p&gt;Paragraph Three&lt;/p&gt;<br>&lt;/div&gt;</blockquote>",
+        "<blockquote>&lt;div&gt;<br>&nbsp;&nbsp;&lt;p&gt;Paragraph One&lt;/p&gt;<br>&nbsp;&nbsp;&lt;p&gt;Paragraph Two&lt;/p&gt;<br>&nbsp;&nbsp;&lt;p&gt;Paragraph Three&lt;/p&gt;<br>&lt;/div&gt;</blockquote>",
         "<b>Invalid JSX:</b>",
         "<blockquote>&lt;p&gt;Paragraph One&lt;/p&gt;<br>&lt;p&gt;Paragraph Two&lt;/p&gt;<br>&lt;p&gt;Paragraph Three&lt;/p&gt;<br></blockquote>",
         "<hr>",
@@ -84,36 +82,41 @@
           "key": "indexjsx",
           "ext": "jsx",
           "name": "index",
-          "contents": [
-            "// write your code here",
-            ""
-          ],
-          "tail": [
-            "ReactDOM.render(JSX, document.getElementById('root'))"
-          ],
+          "contents": ["// write your code here", ""],
+          "tail": ["ReactDOM.render(JSX, document.getElementById('root'))"],
           "head": []
         }
       },
       "tests": [
         {
-          "text": "The constant <code>JSX</code> should return a <code>div</code> element.",
-          "testString": "assert(JSX.type === 'div', 'The constant <code>JSX</code> should return a <code>div</code> element.');"
+          "text":
+            "The constant <code>JSX</code> should return a <code>div</code> element.",
+          "testString":
+            "assert(JSX.type === 'div', 'The constant <code>JSX</code> should return a <code>div</code> element.');"
         },
         {
-          "text": "The <code>div</code> should contain a <code>p</code> tag as the second element.",
-          "testString": "assert(JSX.props.children[1].type === 'p', 'The <code>div</code> should contain a <code>p</code> tag as the second element.');"
+          "text":
+            "The <code>div</code> should contain a <code>p</code> tag as the second element.",
+          "testString":
+            "assert(JSX.props.children[1].type === 'p', 'The <code>div</code> should contain a <code>p</code> tag as the second element.');"
         },
         {
-          "text": "The <code>div</code> should contain a <code>ul</code> tag as the third element.",
-          "testString": "assert(JSX.props.children[2].type === 'ul', 'The <code>div</code> should contain a <code>ul</code> tag as the third element.');"
+          "text":
+            "The <code>div</code> should contain a <code>ul</code> tag as the third element.",
+          "testString":
+            "assert(JSX.props.children[2].type === 'ul', 'The <code>div</code> should contain a <code>ul</code> tag as the third element.');"
         },
         {
-          "text": "The <code>div</code> should contain an <code>h1</code> tag as the first element.",
-          "testString": "assert(JSX.props.children[0].type === 'h1', 'The <code>div</code> should contain an <code>h1</code> tag as the first element.');"
+          "text":
+            "The <code>div</code> should contain an <code>h1</code> tag as the first element.",
+          "testString":
+            "assert(JSX.props.children[0].type === 'h1', 'The <code>div</code> should contain an <code>h1</code> tag as the first element.');"
         },
         {
-          "text": "The <code>ul</code> should contain three <code>li</code> elements.",
-          "testString": "assert(JSX.props.children[2].props.children.length === 3, 'The <code>ul</code> should contain three <code>li</code> elements.');"
+          "text":
+            "The <code>ul</code> should contain three <code>li</code> elements.",
+          "testString":
+            "assert(JSX.props.children[2].props.children.length === 3, 'The <code>ul</code> should contain three <code>li</code> elements.');"
         }
       ],
       "solutions": [
@@ -147,28 +150,33 @@
             "  </div>",
             ");"
           ],
-          "tail": [
-            "ReactDOM.render(JSX, document.getElementById('root'))"
-          ],
+          "tail": ["ReactDOM.render(JSX, document.getElementById('root'))"],
           "head": []
         }
       },
       "tests": [
         {
-          "text": "The constant <code>JSX</code> should return a <code>div</code> element.",
-          "testString": "assert(JSX.type === 'div', 'The constant <code>JSX</code> should return a <code>div</code> element.');"
+          "text":
+            "The constant <code>JSX</code> should return a <code>div</code> element.",
+          "testString":
+            "assert(JSX.type === 'div', 'The constant <code>JSX</code> should return a <code>div</code> element.');"
         },
         {
-          "text": "The <code>div</code> should contain an <code>h1</code> tag as the first element.",
-          "testString": "assert(JSX.props.children[0].type === 'h1', 'The <code>div</code> should contain an <code>h1</code> tag as the first element.');"
+          "text":
+            "The <code>div</code> should contain an <code>h1</code> tag as the first element.",
+          "testString":
+            "assert(JSX.props.children[0].type === 'h1', 'The <code>div</code> should contain an <code>h1</code> tag as the first element.');"
         },
         {
-          "text": "The <code>div</code> should contain a <code>p</code> tag as the second element.",
-          "testString": "assert(JSX.props.children[1].type === 'p', 'The <code>div</code> should contain a <code>p</code> tag as the second element.');"
+          "text":
+            "The <code>div</code> should contain a <code>p</code> tag as the second element.",
+          "testString":
+            "assert(JSX.props.children[1].type === 'p', 'The <code>div</code> should contain a <code>p</code> tag as the second element.');"
         },
         {
           "text": "The <code>JSX</code> should include a comment.",
-          "testString": "getUserInput => assert(getUserInput('index').includes('/*') && getUserInput('index').includes('*/'), 'The <code>JSX</code> should include a comment.');"
+          "testString":
+            "getUserInput => assert(getUserInput('index').includes('/*') && getUserInput('index').includes('*/'), 'The <code>JSX</code> should include a comment.');"
         }
       ],
       "solutions": [
@@ -211,20 +219,28 @@
       },
       "tests": [
         {
-          "text": "The constant <code>JSX</code> should return a <code>div</code> element.",
-          "testString": "assert(JSX.type === 'div', 'The constant <code>JSX</code> should return a <code>div</code> element.');"
+          "text":
+            "The constant <code>JSX</code> should return a <code>div</code> element.",
+          "testString":
+            "assert(JSX.type === 'div', 'The constant <code>JSX</code> should return a <code>div</code> element.');"
         },
         {
-          "text": "The <code>div</code> should contain an <code>h1</code> tag as the first element.",
-          "testString": "assert(JSX.props.children[0].type === 'h1', 'The <code>div</code> should contain an <code>h1</code> tag as the first element.');"
+          "text":
+            "The <code>div</code> should contain an <code>h1</code> tag as the first element.",
+          "testString":
+            "assert(JSX.props.children[0].type === 'h1', 'The <code>div</code> should contain an <code>h1</code> tag as the first element.');"
         },
         {
-          "text": "The <code>div</code> should contain a <code>p</code> tag as the second element.",
-          "testString": "assert(JSX.props.children[1].type === 'p', 'The <code>div</code> should contain a <code>p</code> tag as the second element.');"
+          "text":
+            "The <code>div</code> should contain a <code>p</code> tag as the second element.",
+          "testString":
+            "assert(JSX.props.children[1].type === 'p', 'The <code>div</code> should contain a <code>p</code> tag as the second element.');"
         },
         {
-          "text": "The provided JSX element should render to the DOM node with id <code>challenge-node</code>.",
-          "testString": "assert(document.getElementById('challenge-node').childNodes[0].innerHTML === '<h1>Hello World</h1><p>Lets render this to the DOM</p>', 'The provided JSX element should render to the DOM node with id <code>challenge-node</code>.');"
+          "text":
+            "The provided JSX element should render to the DOM node with id <code>challenge-node</code>.",
+          "testString":
+            "assert(document.getElementById('challenge-node').childNodes[0].innerHTML === '<h1>Hello World</h1><p>Lets render this to the DOM</p>', 'The provided JSX element should render to the DOM node with id <code>challenge-node</code>.');"
         }
       ],
       "solutions": [
@@ -259,20 +275,21 @@
             "  </div>",
             ");"
           ],
-          "tail": [
-            "ReactDOM.render(JSX, document.getElementById('root'))"
-          ],
+          "tail": ["ReactDOM.render(JSX, document.getElementById('root'))"],
           "head": []
         }
       },
       "tests": [
         {
-          "text": "The constant <code>JSX</code> should return a <code>div</code> element.",
-          "testString": "assert.strictEqual(JSX.type, 'div', 'The constant <code>JSX</code> should return a <code>div</code> element.');"
+          "text":
+            "The constant <code>JSX</code> should return a <code>div</code> element.",
+          "testString":
+            "assert.strictEqual(JSX.type, 'div', 'The constant <code>JSX</code> should return a <code>div</code> element.');"
         },
         {
           "text": "The <code>div</code> has a class of <code>myDiv</code>.",
-          "testString": "assert.strictEqual(JSX.props.className, 'myDiv', 'The <code>div</code> has a class of <code>myDiv</code>.');"
+          "testString":
+            "assert.strictEqual(JSX.props.className, 'myDiv', 'The <code>div</code> has a class of <code>myDiv</code>.');"
         }
       ],
       "solutions": [
@@ -313,24 +330,26 @@
             ");",
             ""
           ],
-          "tail": [
-            "ReactDOM.render(JSX, document.getElementById('root'))"
-          ],
+          "tail": ["ReactDOM.render(JSX, document.getElementById('root'))"],
           "head": []
         }
       },
       "tests": [
         {
-          "text": "The constant <code>JSX</code> should return a <code>div</code> element.",
-          "testString": "assert.strictEqual(JSX.type, 'div', 'The constant <code>JSX</code> should return a <code>div</code> element.');"
+          "text":
+            "The constant <code>JSX</code> should return a <code>div</code> element.",
+          "testString":
+            "assert.strictEqual(JSX.type, 'div', 'The constant <code>JSX</code> should return a <code>div</code> element.');"
         },
         {
           "text": "The <code>div</code> should contain a <code>br</code> tag.",
-          "testString": "assert(Enzyme.shallow(JSX).find('br').length === 1, 'The <code>div</code> should contain a <code>br</code> tag.');"
+          "testString":
+            "assert(Enzyme.shallow(JSX).find('br').length === 1, 'The <code>div</code> should contain a <code>br</code> tag.');"
         },
         {
           "text": "The <code>div</code> should contain an <code>hr</code> tag.",
-          "testString": "assert(Enzyme.shallow(JSX).find('hr').length === 1, 'The <code>div</code> should contain an <code>hr</code> tag.');"
+          "testString":
+            "assert(Enzyme.shallow(JSX).find('hr').length === 1, 'The <code>div</code> should contain an <code>hr</code> tag.');"
         }
       ],
       "solutions": [
@@ -349,7 +368,7 @@
         "Components are the core of React. Everything in React is a component and here you will learn how to create one.",
         "There are two ways to create a React component. The first way is to use a JavaScript function. Defining a component in this way creates a <em>stateless functional component</em>. The concept of state in an application will be covered in later challenges. For now, think of a stateless component as one that can receive data and render it, but does not manage or track changes to that data. (We'll cover the second way to create a React component in the next challenge.)",
         "To create a component with a function, you simply write a JavaScript function that returns either JSX or <code>null</code>. One important thing to note is that React requires your function name to begin with a capital letter. Here's an example of a stateless functional component that assigns an HTML class in JSX:",
-        "<blockquote>// After being transpiled, the &lt;div&gt; will have a CSS class of 'customClass'<br>const DemoComponent = function() {<br>  return (<br>    &lt;div className='customClass' /&gt;<br>  );<br>};</blockquote>",
+        "<blockquote>// After being transpiled, the &lt;div&gt; will have a CSS class of 'customClass'<br>const DemoComponent = function() {<br>&nbsp;&nbsp;return (<br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div className='customClass' /&gt;<br>&nbsp;&nbsp;);<br>};</blockquote>",
         "Because a JSX component represents HTML, you could put several components together to create a more complex HTML page. This is one of the key advantages of the component architecture React provides. It allows you to compose your UI from many separate, isolated components. This makes it easier to build and maintain complex user interfaces.",
         "<hr>",
         "The code editor has a function called <code>MyComponent</code>. Complete this function so it returns a single <code>div</code> element which contains some string of text.",
@@ -378,15 +397,20 @@
       "tests": [
         {
           "text": "<code>MyComponent</code> should return JSX.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.length === 1; })(), '<code>MyComponent</code> should return JSX.');"
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.length === 1; })(), '<code>MyComponent</code> should return JSX.');"
         },
         {
-          "text": "<code>MyComponent</code> should return a <code>div</code> element.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.children().type() === 'div' })(), '<code>MyComponent</code> should return a <code>div</code> element.');"
+          "text":
+            "<code>MyComponent</code> should return a <code>div</code> element.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.children().type() === 'div' })(), '<code>MyComponent</code> should return a <code>div</code> element.');"
         },
         {
-          "text": "The <code>div</code> element should contain a string of text.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('div').text() !== ''; })(), 'The <code>div</code> element should contain a string of text.');"
+          "text":
+            "The <code>div</code> element should contain a string of text.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('div').text() !== ''; })(), 'The <code>div</code> element should contain a string of text.');"
         }
       ],
       "solutions": [
@@ -403,7 +427,7 @@
       "releasedOn": "December 25, 2017",
       "description": [
         "The other way to define a React component is with the ES6 <code>class</code> syntax. In the following example, <code>Kitten</code> extends <code>React.Component</code>:",
-        "<blockquote>class Kitten extends React.Component {<br>  constructor(props) {<br>    super(props);<br>  }<br><br>  render() {<br>    return (<br>      &lt;h1&gt;Hi&lt;/h1&gt;<br>    );<br>  }<br>}</blockquote>",
+        "<blockquote>class Kitten extends React.Component {<br>&nbsp;&nbsp;constructor(props) {<br>&nbsp;&nbsp;&nbsp;&nbsp;super(props);<br>&nbsp;&nbsp;}<br><br>&nbsp;&nbsp;render() {<br>&nbsp;&nbsp;&nbsp;&nbsp;return (<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Hi&lt;/h1&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;);<br>&nbsp;&nbsp;}<br>}</blockquote>",
         "This creates an ES6 class <code>Kitten</code> which extends the <code>React.Component</code> class. So the <code>Kitten</code> class now has access to many useful React features, such as local state and lifecycle hooks. Don't worry if you aren't familiar with these terms yet, they will be covered in greater detail in later challenges.",
         "Also notice the <code>Kitten</code> class has a <code>constructor</code> defined within it that calls <code>super()</code>. It uses <code>super()</code> to call the constructor of the parent class, in this case <code>React.Component</code>. The constructor is a special method used during the initialization of objects that are created with the <code>class</code> keyword. It is best practice to call a component's <code>constructor</code> with <code>super</code>, and pass <code>props</code> to both. This makes sure the component is initialized properly. For now, know that it is standard for this code to be included. Soon you will see other uses for the constructor as well as <code>props</code>.",
         "<hr>",
@@ -437,16 +461,22 @@
       },
       "tests": [
         {
-          "text": "The React component should return a <code>div</code> element.",
-          "testString": "assert(Enzyme.shallow(React.createElement(MyComponent)).type() === 'div', 'The React component should return a <code>div</code> element.');"
+          "text":
+            "The React component should return a <code>div</code> element.",
+          "testString":
+            "assert(Enzyme.shallow(React.createElement(MyComponent)).type() === 'div', 'The React component should return a <code>div</code> element.');"
         },
         {
-          "text": "The returned <code>div</code> should render an <code>h1</code> header within it.",
-          "testString": "assert(/<div><h1>.*<\\/h1><\\/div>/.test(Enzyme.shallow(React.createElement(MyComponent)).html()), 'The returned <code>div</code> should render an <code>h1</code> header within it.');"
+          "text":
+            "The returned <code>div</code> should render an <code>h1</code> header within it.",
+          "testString":
+            "assert(/<div><h1>.*<\\/h1><\\/div>/.test(Enzyme.shallow(React.createElement(MyComponent)).html()), 'The returned <code>div</code> should render an <code>h1</code> header within it.');"
         },
         {
-          "text": "The <code>h1</code> header should contain the string <code>Hello React!</code>.",
-          "testString": "assert(Enzyme.shallow(React.createElement(MyComponent)).html() === '<div><h1>Hello React!</h1></div>', 'The <code>h1</code> header should contain the string <code>Hello React!</code>.');"
+          "text":
+            "The <code>h1</code> header should contain the string <code>Hello React!</code>.",
+          "testString":
+            "assert(Enzyme.shallow(React.createElement(MyComponent)).html() === '<div><h1>Hello React!</h1></div>', 'The <code>h1</code> header should contain the string <code>Hello React!</code>.');"
         }
       ],
       "solutions": [
@@ -464,7 +494,7 @@
       "description": [
         "Now we will look at how we can compose multiple React components together. Imagine you are building an App and have created three components, a <code>Navbar</code>, <code>Dashboard</code>, and <code>Footer</code>.",
         "To compose these components together, you could create an <code>App</code> <i>parent</i> component which renders each of these three components as <i>children</i>. To render a component as a child in a React component, you include the component name written as a custom HTML tag in the JSX. For example, in the <code>render</code> method you could write:",
-        "<blockquote>return (<br> &lt;App&gt;<br>  &lt;Navbar /&gt;<br>  &lt;Dashboard /&gt;<br>  &lt;Footer /&gt;<br> &lt;/App&gt;<br>)</blockquote>",
+        "<blockquote>return (<br> &lt;App&gt;<br>&nbsp;&nbsp;&lt;Navbar /&gt;<br>&nbsp;&nbsp;&lt;Dashboard /&gt;<br>&nbsp;&nbsp;&lt;Footer /&gt;<br> &lt;/App&gt;<br>)</blockquote>",
         "When React encounters a custom HTML tag that references another component (a component name wrapped in <code>&lt; /&gt;</code> like in this example), it renders the markup for that component in the location of the tag. This should illustrate the parent/child relationship between the <code>App</code> component and the <code>Navbar</code>, <code>Dashboard</code>, and <code>Footer</code>.",
         "<hr>",
         "In the code editor, there is a simple functional component called <code>ChildComponent</code> and a React component called <code>ParentComponent</code>. Compose the two together by rendering the <code>ChildComponent</code> within the <code>ParentComponent</code>. Make sure to close the <code>ChildComponent</code> tag with a forward slash.",
@@ -509,16 +539,21 @@
       },
       "tests": [
         {
-          "text": "The React component should return a single <code>div</code> element.",
-          "testString": "assert((function() { var shallowRender = Enzyme.shallow(React.createElement(ParentComponent)); return shallowRender.type() === 'div'; })(), 'The React component should return a single <code>div</code> element.');"
+          "text":
+            "The React component should return a single <code>div</code> element.",
+          "testString":
+            "assert((function() { var shallowRender = Enzyme.shallow(React.createElement(ParentComponent)); return shallowRender.type() === 'div'; })(), 'The React component should return a single <code>div</code> element.');"
         },
         {
           "text": "The component should return two nested elements.",
-          "testString": "assert((function() { var shallowRender = Enzyme.shallow(React.createElement(ParentComponent)); return shallowRender.children().length === 2; })(), 'The component should return two nested elements.');"
+          "testString":
+            "assert((function() { var shallowRender = Enzyme.shallow(React.createElement(ParentComponent)); return shallowRender.children().length === 2; })(), 'The component should return two nested elements.');"
         },
         {
-          "text": "The component should return the ChildComponent as its second child.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ParentComponent)); return mockedComponent.find('ParentComponent').find('ChildComponent').length === 1; })(), 'The component should return the ChildComponent as its second child.');"
+          "text":
+            "The component should return the ChildComponent as its second child.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ParentComponent)); return mockedComponent.find('ParentComponent').find('ChildComponent').length === 1; })(), 'The component should return the ChildComponent as its second child.');"
         }
       ],
       "solutions": [
@@ -594,20 +629,28 @@
       },
       "tests": [
         {
-          "text": "The <code>TypesOfFood</code> component should return a single <code>div</code> element.",
-          "testString": "assert(Enzyme.shallow(React.createElement(TypesOfFood)).type() === 'div', 'The <code>TypesOfFood</code> component should return a single <code>div</code> element.');"
+          "text":
+            "The <code>TypesOfFood</code> component should return a single <code>div</code> element.",
+          "testString":
+            "assert(Enzyme.shallow(React.createElement(TypesOfFood)).type() === 'div', 'The <code>TypesOfFood</code> component should return a single <code>div</code> element.');"
         },
         {
-          "text": "The <code>TypesOfFood</code> component should return the <code>Fruits</code> component.",
-          "testString": "assert(Enzyme.shallow(React.createElement(TypesOfFood)).props().children[1].type.name === 'Fruits', 'The <code>TypesOfFood</code> component should return the <code>Fruits</code> component.');"
+          "text":
+            "The <code>TypesOfFood</code> component should return the <code>Fruits</code> component.",
+          "testString":
+            "assert(Enzyme.shallow(React.createElement(TypesOfFood)).props().children[1].type.name === 'Fruits', 'The <code>TypesOfFood</code> component should return the <code>Fruits</code> component.');"
         },
         {
-          "text": "The <code>Fruits</code> component should return the <code>TypesOfFruit</code> component.",
-          "testString": "assert(Enzyme.mount(React.createElement(TypesOfFood)).find('h2').html() === '<h2>Fruits:</h2>', 'The <code>Fruits</code> component should return the <code>TypesOfFruit</code> component.');"
+          "text":
+            "The <code>Fruits</code> component should return the <code>TypesOfFruit</code> component.",
+          "testString":
+            "assert(Enzyme.mount(React.createElement(TypesOfFood)).find('h2').html() === '<h2>Fruits:</h2>', 'The <code>Fruits</code> component should return the <code>TypesOfFruit</code> component.');"
         },
         {
-          "text": "The <code>TypesOfFruit</code> component should return the <code>h2</code> and <code>ul</code> elements.",
-          "testString": "assert(Enzyme.mount(React.createElement(TypesOfFood)).find('ul').text() === 'ApplesBlueberriesStrawberriesBananas', 'The <code>TypesOfFruit</code> component should return the <code>h2</code> and <code>ul</code> elements.');"
+          "text":
+            "The <code>TypesOfFruit</code> component should return the <code>h2</code> and <code>ul</code> elements.",
+          "testString":
+            "assert(Enzyme.mount(React.createElement(TypesOfFood)).find('ul').text() === 'ApplesBlueberriesStrawberriesBananas', 'The <code>TypesOfFruit</code> component should return the <code>h2</code> and <code>ul</code> elements.');"
         }
       ],
       "solutions": [
@@ -720,20 +763,28 @@
       },
       "tests": [
         {
-          "text": "The <code>TypesOfFood</code> component should return a single <code>div</code> element.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().type() === 'div'; })(), 'The <code>TypesOfFood</code> component should return a single <code>div</code> element.');"
+          "text":
+            "The <code>TypesOfFood</code> component should return a single <code>div</code> element.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().type() === 'div'; })(), 'The <code>TypesOfFood</code> component should return a single <code>div</code> element.');"
         },
         {
-          "text": "The <code>TypesOfFood</code> component should return the <code>Fruits</code> component.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(1).name() === 'Fruits'; })(), 'The <code>TypesOfFood</code> component should return the <code>Fruits</code> component.');"
+          "text":
+            "The <code>TypesOfFood</code> component should return the <code>Fruits</code> component.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(1).name() === 'Fruits'; })(), 'The <code>TypesOfFood</code> component should return the <code>Fruits</code> component.');"
         },
         {
-          "text": "The <code>Fruits</code> component should return the <code>NonCitrus</code> component and the <code>Citrus</code> component.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return (mockedComponent.find('Fruits').children().find('NonCitrus').length === 1 && mockedComponent.find('Fruits').children().find('Citrus').length === 1); })(), 'The <code>Fruits</code> component should return the <code>NonCitrus</code> component and the <code>Citrus</code> component.');"
+          "text":
+            "The <code>Fruits</code> component should return the <code>NonCitrus</code> component and the <code>Citrus</code> component.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return (mockedComponent.find('Fruits').children().find('NonCitrus').length === 1 && mockedComponent.find('Fruits').children().find('Citrus').length === 1); })(), 'The <code>Fruits</code> component should return the <code>NonCitrus</code> component and the <code>Citrus</code> component.');"
         },
         {
-          "text": "The <code>TypesOfFood</code> component should return the <code>Vegetables</code> component below the <code>Fruits</code> component.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(2).name() === 'Vegetables'; })(), 'The <code>TypesOfFood</code> component should return the <code>Vegetables</code> component below the <code>Fruits</code> component.');"
+          "text":
+            "The <code>TypesOfFood</code> component should return the <code>Vegetables</code> component below the <code>Fruits</code> component.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(2).name() === 'Vegetables'; })(), 'The <code>TypesOfFood</code> component should return the <code>Vegetables</code> component below the <code>Fruits</code> component.');"
         }
       ],
       "solutions": [
@@ -823,20 +874,28 @@
       },
       "tests": [
         {
-          "text": "The <code>TypesOfFood</code> component should return a single <code>div</code> element.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().type() === 'div'; })(), 'The <code>TypesOfFood</code> component should return a single <code>div</code> element.');"
+          "text":
+            "The <code>TypesOfFood</code> component should return a single <code>div</code> element.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().type() === 'div'; })(), 'The <code>TypesOfFood</code> component should return a single <code>div</code> element.');"
         },
         {
-          "text": "The <code>TypesOfFood</code> component should render the <code>Fruits</code> component after the <code>h1</code> element.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(1).name() === 'Fruits'; })(), 'The <code>TypesOfFood</code> component should render the <code>Fruits</code> component after the <code>h1</code> element.');"
+          "text":
+            "The <code>TypesOfFood</code> component should render the <code>Fruits</code> component after the <code>h1</code> element.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(1).name() === 'Fruits'; })(), 'The <code>TypesOfFood</code> component should render the <code>Fruits</code> component after the <code>h1</code> element.');"
         },
         {
-          "text": "The <code>TypesOfFood</code> component should render the <code>Vegetables</code> component after <code>Fruits</code>.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(2).name() === 'Vegetables'; })(), 'The <code>TypesOfFood</code> component should render the <code>Vegetables</code> component after <code>Fruits</code>.');"
+          "text":
+            "The <code>TypesOfFood</code> component should render the <code>Vegetables</code> component after <code>Fruits</code>.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood)); return mockedComponent.children().childAt(2).name() === 'Vegetables'; })(), 'The <code>TypesOfFood</code> component should render the <code>Vegetables</code> component after <code>Fruits</code>.');"
         },
         {
-          "text": "The <code>TypesOfFood</code> component should render to the DOM within the <code>div</code> with the id <code>challenge-node</code>.",
-          "testString": "assert((function() { const html = document.getElementById('challenge-node').childNodes[0].innerHTML; return (html === '<h1>Types of Food:</h1><div><h2>Fruits:</h2><h4>Non-Citrus:</h4><ul><li>Apples</li><li>Blueberries</li><li>Strawberries</li><li>Bananas</li></ul><h4>Citrus:</h4><ul><li>Lemon</li><li>Lime</li><li>Orange</li><li>Grapefruit</li></ul></div><div><h2>Vegetables:</h2><ul><li>Brussel Sprouts</li><li>Broccoli</li><li>Squash</li></ul></div>'); })(), 'The <code>TypesOfFood</code> component should render to the DOM within the <code>div</code> with the id <code>challenge-node</code>.');"
+          "text":
+            "The <code>TypesOfFood</code> component should render to the DOM within the <code>div</code> with the id <code>challenge-node</code>.",
+          "testString":
+            "assert((function() { const html = document.getElementById('challenge-node').childNodes[0].innerHTML; return (html === '<h1>Types of Food:</h1><div><h2>Fruits:</h2><h4>Non-Citrus:</h4><ul><li>Apples</li><li>Blueberries</li><li>Strawberries</li><li>Bananas</li></ul><h4>Citrus:</h4><ul><li>Lemon</li><li>Lime</li><li>Orange</li><li>Grapefruit</li></ul></div><div><h2>Vegetables:</h2><ul><li>Brussel Sprouts</li><li>Broccoli</li><li>Squash</li></ul></div>'); })(), 'The <code>TypesOfFood</code> component should render to the DOM within the <code>div</code> with the id <code>challenge-node</code>.');"
         }
       ],
       "solutions": [
@@ -862,26 +921,28 @@
           "key": "indexjsx",
           "ext": "jsx",
           "name": "index",
-          "contents": [
-            "// change code below this line",
-            ""
-          ],
+          "contents": ["// change code below this line", ""],
           "head": [],
           "tail": []
         }
       },
       "tests": [
         {
-          "text": "There should be a React component called <code>MyComponent</code>.",
-          "testString": "getUserInput => assert(getUserInput('index').replace(/\\s/g, '').includes('classMyComponentextendsReact.Component{'), 'There should be a React component called <code>MyComponent</code>.');"
+          "text":
+            "There should be a React component called <code>MyComponent</code>.",
+          "testString":
+            "getUserInput => assert(getUserInput('index').replace(/\\s/g, '').includes('classMyComponentextendsReact.Component{'), 'There should be a React component called <code>MyComponent</code>.');"
         },
         {
-          "text": "<code>MyComponent</code> should contain an <code>h1</code> tag with text <code>My First React Component!</code> Case and punctuation matter.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('h1').text() === 'My First React Component!'; })(), '<code>MyComponent</code> should contain an <code>h1</code> tag with text <code>My First React Component!</code> Case and punctuation matter.');"
+          "text":
+            "<code>MyComponent</code> should contain an <code>h1</code> tag with text <code>My First React Component!</code> Case and punctuation matter.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('h1').text() === 'My First React Component!'; })(), '<code>MyComponent</code> should contain an <code>h1</code> tag with text <code>My First React Component!</code> Case and punctuation matter.');"
         },
         {
           "text": "<code>MyComponent</code> should render to the DOM.",
-          "testString": "assert(document.getElementById('challenge-node').childNodes.length === 1, '<code>MyComponent</code> should render to the DOM.');"
+          "testString":
+            "assert(document.getElementById('challenge-node').childNodes.length === 1, '<code>MyComponent</code> should render to the DOM.');"
         }
       ],
       "solutions": [
@@ -898,7 +959,7 @@
       "releasedOn": "December 25, 2017",
       "description": [
         "The previous challenges covered a lot about creating and composing JSX elements, functional components, and ES6 style class components in React. With this foundation, it's time to look at another feature very common in React: <b>props</b>. In React, you can pass props, or properties, to child components. Say you have an <code>App</code> component which renders a child component called <code>Welcome</code> that is a stateless functional component. You can pass <code>Welcome</code> a <code>user</code> property by writing:",
-        "<blockquote>&lt;App&gt;<br>  &lt;Welcome user='Mark' /&gt;<br>&lt;/App&gt;</blockquote>",
+        "<blockquote>&lt;App&gt;<br>&nbsp;&nbsp;&lt;Welcome user='Mark' /&gt;<br>&lt;/App&gt;</blockquote>",
         "You use <strong>custom HTML attributes</strong> that React provides support for to pass the property <code>user</code> to the component <code>Welcome</code>. Since <code>Welcome</code> is a stateless functional component, it has access to this value like so:",
         "<blockquote>const Welcome = (props) => &lt;h1&gt;Hello, {props.user}!&lt;/h1&gt;</blockquote>",
         "It is standard to call this value <code>props</code> and when dealing with stateless functional components, you basically consider it as an argument to a function which returns JSX. You can access the value of the argument in the function body. With class components, you will see this is a little different.",
@@ -946,24 +1007,34 @@
       },
       "tests": [
         {
-          "text": "The <code>Calendar</code> component should return a single <code>div</code> element.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().type() === 'div'; })(), 'The <code>Calendar</code> component should return a single <code>div</code> element.');"
+          "text":
+            "The <code>Calendar</code> component should return a single <code>div</code> element.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().type() === 'div'; })(), 'The <code>Calendar</code> component should return a single <code>div</code> element.');"
         },
         {
-          "text": "The second child of the <code>Calendar</code> component should be the <code>CurrentDate</code> component.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).name() === 'CurrentDate'; })(), 'The second child of the <code>Calendar</code> component should be the <code>CurrentDate</code> component.');"
+          "text":
+            "The second child of the <code>Calendar</code> component should be the <code>CurrentDate</code> component.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).name() === 'CurrentDate'; })(), 'The second child of the <code>Calendar</code> component should be the <code>CurrentDate</code> component.');"
         },
         {
-          "text": "The <code>CurrentDate</code> component should have a prop called <code>date</code>.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).props().date })(), 'The <code>CurrentDate</code> component should have a prop called <code>date</code>.');"
+          "text":
+            "The <code>CurrentDate</code> component should have a prop called <code>date</code>.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).props().date })(), 'The <code>CurrentDate</code> component should have a prop called <code>date</code>.');"
         },
         {
-          "text": "The <code>date</code> prop of the <code>CurrentDate</code> should contain a string of text.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); const prop = mockedComponent.children().childAt(1).props().date; return( typeof prop === 'string' && prop.length > 0 ); })(), 'The <code>date</code> prop of the <code>CurrentDate</code> should contain a string of text.');"
+          "text":
+            "The <code>date</code> prop of the <code>CurrentDate</code> should contain a string of text.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); const prop = mockedComponent.children().childAt(1).props().date; return( typeof prop === 'string' && prop.length > 0 ); })(), 'The <code>date</code> prop of the <code>CurrentDate</code> should contain a string of text.');"
         },
         {
-          "text": "The <code>CurrentDate</code> component should render the value from the <code>date</code> prop in the <code>p</code> tag.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.find('p').html().includes(Date().substr(3)); })(), 'The <code>CurrentDate</code> component should render the value from the <code>date</code> prop in the <code>p</code> tag.');"
+          "text":
+            "The <code>CurrentDate</code> component should render the value from the <code>date</code> prop in the <code>p</code> tag.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.find('p').html().includes(Date().substr(3)); })(), 'The <code>CurrentDate</code> component should render the value from the <code>date</code> prop in the <code>p</code> tag.');"
         }
       ],
       "solutions": [
@@ -980,7 +1051,7 @@
       "releasedOn": "December 25, 2017",
       "description": [
         "The last challenge demonstrated how to pass information from a parent component to a child component as <code>props</code> or properties. This challenge looks at how arrays can be passed as <code>props</code>.  To pass an array to a JSX element, it must be treated as JavaScript and wrapped in curly braces.",
-        "<blockquote>&lt;ParentComponent&gt;<br>  &lt;ChildComponent colors={[\"green\", \"blue\", \"red\"]} /&gt;<br>&lt;/ParentComponent&gt;</blockquote>",
+        "<blockquote>&lt;ParentComponent&gt;<br>&nbsp;&nbsp;&lt;ChildComponent colors={[\"green\", \"blue\", \"red\"]} /&gt;<br>&lt;/ParentComponent&gt;</blockquote>",
         "The child component then has access to the array property <code>colors</code>.  Array methods such as <code>join()</code> can be used when accessing the property.",
         "<code>const ChildComponent = (props) => &lt;p&gt{props.colors.join(', ')}&lt;/p&gt</code>",
         "This will join all <code>colors</code> array items into a comma separated string and produce:",
@@ -1028,32 +1099,46 @@
       },
       "tests": [
         {
-          "text": "The <code>ToDo</code> component should return a single outer <code>div</code>.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().type() === 'div'; })(), 'The <code>ToDo</code> component should return a single outer <code>div</code>.');"
+          "text":
+            "The <code>ToDo</code> component should return a single outer <code>div</code>.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().type() === 'div'; })(), 'The <code>ToDo</code> component should return a single outer <code>div</code>.');"
         },
         {
-          "text": "The third child of the <code>ToDo</code> component should be an instance of the <code>List</code> component.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().childAt(2).name() === 'List'; })(), 'The third child of the <code>ToDo</code> component should be an instance of the <code>List</code> component.');"
+          "text":
+            "The third child of the <code>ToDo</code> component should be an instance of the <code>List</code> component.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().childAt(2).name() === 'List'; })(), 'The third child of the <code>ToDo</code> component should be an instance of the <code>List</code> component.');"
         },
         {
-          "text": "The fifth child of the <code>ToDo</code> component should be an instance of the <code>List</code> component.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().childAt(4).name() === 'List'; })(), 'The fifth child of the <code>ToDo</code> component should be an instance of the <code>List</code> component.');"
+          "text":
+            "The fifth child of the <code>ToDo</code> component should be an instance of the <code>List</code> component.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.children().first().childAt(4).name() === 'List'; })(), 'The fifth child of the <code>ToDo</code> component should be an instance of the <code>List</code> component.');"
         },
         {
-          "text": "Both instances of the <code>List</code> component should have a property called <code>tasks</code> and <code>tasks</code> should be of type array.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return Array.isArray(mockedComponent.find('List').get(0).props.tasks) && Array.isArray(mockedComponent.find('List').get(1).props.tasks); })(), 'Both instances of the <code>List</code> component should have a property called <code>tasks</code> and <code>tasks</code> should be of type array.');"
+          "text":
+            "Both instances of the <code>List</code> component should have a property called <code>tasks</code> and <code>tasks</code> should be of type array.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return Array.isArray(mockedComponent.find('List').get(0).props.tasks) && Array.isArray(mockedComponent.find('List').get(1).props.tasks); })(), 'Both instances of the <code>List</code> component should have a property called <code>tasks</code> and <code>tasks</code> should be of type array.');"
         },
         {
-          "text": "The first <code>List</code> component representing the tasks for today should have 2 or more items.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find('List').get(0).props.tasks.length >= 2; })(), 'The first <code>List</code> component representing the tasks for today should have 2 or more items.');"
+          "text":
+            "The first <code>List</code> component representing the tasks for today should have 2 or more items.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find('List').get(0).props.tasks.length >= 2; })(), 'The first <code>List</code> component representing the tasks for today should have 2 or more items.');"
         },
         {
-          "text": "The second <code>List</code> component representing the tasks for tomorrow should have 3 or more items.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find('List').get(1).props.tasks.length >= 3; })(), 'The second <code>List</code> component representing the tasks for tomorrow should have 3 or more items.');"
+          "text":
+            "The second <code>List</code> component representing the tasks for tomorrow should have 3 or more items.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find('List').get(1).props.tasks.length >= 3; })(), 'The second <code>List</code> component representing the tasks for tomorrow should have 3 or more items.');"
         },
         {
-          "text": "The <code>List</code> component should render the value from the <code>tasks</code> prop in the <code>p</code> tag.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find('p').get(0).props.children === mockedComponent.find('List').get(0).props.tasks.join(', ') && mockedComponent.find('p').get(1).props.children === mockedComponent.find('List').get(1).props.tasks.join(', '); })(), 'The <code>List</code> component should render the value from the <code>tasks</code> prop in the <code>p</code> tag.');"
+          "text":
+            "The <code>List</code> component should render the value from the <code>tasks</code> prop in the <code>p</code> tag.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ToDo)); return mockedComponent.find('p').get(0).props.children === mockedComponent.find('List').get(0).props.tasks.join(', ') && mockedComponent.find('p').get(1).props.children === mockedComponent.find('List').get(1).props.tasks.join(', '); })(), 'The <code>List</code> component should render the value from the <code>tasks</code> prop in the <code>p</code> tag.');"
         }
       ],
       "solutions": [
@@ -1098,11 +1183,14 @@
       "tests": [
         {
           "text": "The <code>ShoppingCart</code> component should render.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('ShoppingCart').length === 1; })(), 'The <code>ShoppingCart</code> component should render.');"
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('ShoppingCart').length === 1; })(), 'The <code>ShoppingCart</code> component should render.');"
         },
         {
-          "text": "The <code>ShoppingCart</code> component should have a default prop of <code>{ items: 0 }</code>.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); mockedComponent.setProps({items: undefined}); return mockedComponent.find('ShoppingCart').props().items === 0; })(), 'The <code>ShoppingCart</code> component should have a default prop of <code>{ items: 0 }</code>.');"
+          "text":
+            "The <code>ShoppingCart</code> component should have a default prop of <code>{ items: 0 }</code>.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); mockedComponent.setProps({items: undefined}); return mockedComponent.find('ShoppingCart').props().items === 0; })(), 'The <code>ShoppingCart</code> component should have a default prop of <code>{ items: 0 }</code>.');"
         }
       ],
       "solutions": [
@@ -1157,15 +1245,19 @@
       "tests": [
         {
           "text": "The component <code>ShoppingCart</code> should render.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('ShoppingCart').length === 1; })(), 'The component <code>ShoppingCart</code> should render.');"
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('ShoppingCart').length === 1; })(), 'The component <code>ShoppingCart</code> should render.');"
         },
         {
           "text": "The component <code>Items</code> should render.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('Items').length === 1; })(), 'The component <code>Items</code> should render.');"
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('Items').length === 1; })(), 'The component <code>Items</code> should render.');"
         },
         {
-          "text": "The <code>Items</code> component should have a prop of <code>{ quantity: 10 }</code> passed from the <code>ShoppingCart</code> component.",
-          "testString": "getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('Items').props().quantity == 10 && getUserInput('index').replace(/ /g,'').includes('<Itemsquantity={10}/>'); })(), 'The <code>Items</code> component should have a prop of <code>{ quantity: 10 }</code> passed from the <code>ShoppingCart</code> component.');"
+          "text":
+            "The <code>Items</code> component should have a prop of <code>{ quantity: 10 }</code> passed from the <code>ShoppingCart</code> component.",
+          "testString":
+            "getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('Items').props().quantity == 10 && getUserInput('index').replace(/ /g,'').includes('<Itemsquantity={10}/>'); })(), 'The <code>Items</code> component should have a prop of <code>{ quantity: 10 }</code> passed from the <code>ShoppingCart</code> component.');"
         }
       ],
       "solutions": [
@@ -1231,15 +1323,19 @@
       "tests": [
         {
           "text": "The <code>ShoppingCart</code> component should render.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('ShoppingCart').length === 1; })(), 'The <code>ShoppingCart</code> component should render.');"
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('ShoppingCart').length === 1; })(), 'The <code>ShoppingCart</code> component should render.');"
         },
         {
           "text": "The <code>Items</code> component should render.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('Items').length === 1; })(), 'The <code>Items</code> component should render.');"
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart)); return mockedComponent.find('Items').length === 1; })(), 'The <code>Items</code> component should render.');"
         },
         {
-          "text": "The <code>Items</code> component should include a <code>propTypes</code> check that requires <code>quantity</code> to be a <code>number</code>.",
-          "testString": "getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').replace(/ /g, ''); return noWhiteSpace.includes('quantity:PropTypes.number.isRequired') && noWhiteSpace.includes('Items.propTypes='); })(), 'The <code>Items</code> component should include a <code>propTypes</code> check that requires <code>quantity</code> to be a <code>number</code>.');"
+          "text":
+            "The <code>Items</code> component should include a <code>propTypes</code> check that requires <code>quantity</code> to be a <code>number</code>.",
+          "testString":
+            "getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').replace(/ /g, ''); return noWhiteSpace.includes('quantity:PropTypes.number.isRequired') && noWhiteSpace.includes('Items.propTypes='); })(), 'The <code>Items</code> component should include a <code>propTypes</code> check that requires <code>quantity</code> to be a <code>number</code>.');"
         }
       ],
       "solutions": [
@@ -1309,24 +1405,34 @@
       },
       "tests": [
         {
-          "text": "The <code>ResetPassword</code> component should return a single <code>div</code> element.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().type() === 'div'; })(), 'The <code>ResetPassword</code> component should return a single <code>div</code> element.');"
+          "text":
+            "The <code>ResetPassword</code> component should return a single <code>div</code> element.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().type() === 'div'; })(), 'The <code>ResetPassword</code> component should return a single <code>div</code> element.');"
         },
         {
-          "text": "The fourth child of <code>ResetPassword</code> should be the <code>ReturnTempPassword</code> component.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().childAt(3).name() === 'ReturnTempPassword'; })(), 'The fourth child of <code>ResetPassword</code> should be the <code>ReturnTempPassword</code> component.');"
+          "text":
+            "The fourth child of <code>ResetPassword</code> should be the <code>ReturnTempPassword</code> component.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().childAt(3).name() === 'ReturnTempPassword'; })(), 'The fourth child of <code>ResetPassword</code> should be the <code>ReturnTempPassword</code> component.');"
         },
         {
-          "text": "The <code>ReturnTempPassword</code> component should have a prop called <code>tempPassword</code>.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find('ReturnTempPassword').props().tempPassword; })(), 'The <code>ReturnTempPassword</code> component should have a prop called <code>tempPassword</code>.');"
+          "text":
+            "The <code>ReturnTempPassword</code> component should have a prop called <code>tempPassword</code>.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find('ReturnTempPassword').props().tempPassword; })(), 'The <code>ReturnTempPassword</code> component should have a prop called <code>tempPassword</code>.');"
         },
         {
-          "text": "The <code>tempPassword</code> prop of <code>ReturnTempPassword</code> should be equal to a string of at least <code>8</code> characters.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); const temp = mockedComponent.find('ReturnTempPassword').props().tempPassword; return typeof temp === 'string' && temp.length >= 8; })(), 'The <code>tempPassword</code> prop of <code>ReturnTempPassword</code> should be equal to a string of at least <code>8</code> characters.');"
+          "text":
+            "The <code>tempPassword</code> prop of <code>ReturnTempPassword</code> should be equal to a string of at least <code>8</code> characters.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); const temp = mockedComponent.find('ReturnTempPassword').props().tempPassword; return typeof temp === 'string' && temp.length >= 8; })(), 'The <code>tempPassword</code> prop of <code>ReturnTempPassword</code> should be equal to a string of at least <code>8</code> characters.');"
         },
         {
-          "text": "The <code>ReturnTempPassword</code> component should display the password you create as the <code>tempPassword</code> prop within <code>strong</code> tags.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find('strong').text() === mockedComponent.find('ReturnTempPassword').props().tempPassword; })(), 'The <code>ReturnTempPassword</code> component should display the password you create as the <code>tempPassword</code> prop within <code>strong</code> tags.');"
+          "text":
+            "The <code>ReturnTempPassword</code> component should display the password you create as the <code>tempPassword</code> prop within <code>strong</code> tags.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find('strong').text() === mockedComponent.find('ReturnTempPassword').props().tempPassword; })(), 'The <code>ReturnTempPassword</code> component should display the password you create as the <code>tempPassword</code> prop within <code>strong</code> tags.');"
         }
       ],
       "solutions": [
@@ -1382,23 +1488,31 @@
       "tests": [
         {
           "text": "The <code>CampSite</code> component should render.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find('CampSite').length === 1; })(), 'The <code>CampSite</code> component should render.');"
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find('CampSite').length === 1; })(), 'The <code>CampSite</code> component should render.');"
         },
         {
           "text": "The <code>Camper</code> component should render.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find('Camper').length === 1; })(), 'The <code>Camper</code> component should render.');"
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find('Camper').length === 1; })(), 'The <code>Camper</code> component should render.');"
         },
         {
-          "text": "The <code>Camper</code> component should include default props which assign the string <code>CamperBot</code> to the key <code>name</code>.",
-          "testString": "getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').replace(/\\s/g, ''); const verify1 = 'Camper.defaultProps={name:\\'CamperBot\\'}'; const verify2 = 'Camper.defaultProps={name:\"CamperBot\"}'; return (noWhiteSpace.includes(verify1) || noWhiteSpace.includes(verify2)); })(), 'The <code>Camper</code> component should include default props which assign the string <code>CamperBot</code> to the key <code>name</code>.');"
+          "text":
+            "The <code>Camper</code> component should include default props which assign the string <code>CamperBot</code> to the key <code>name</code>.",
+          "testString":
+            "getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').replace(/\\s/g, ''); const verify1 = 'Camper.defaultProps={name:\\'CamperBot\\'}'; const verify2 = 'Camper.defaultProps={name:\"CamperBot\"}'; return (noWhiteSpace.includes(verify1) || noWhiteSpace.includes(verify2)); })(), 'The <code>Camper</code> component should include default props which assign the string <code>CamperBot</code> to the key <code>name</code>.');"
         },
         {
-          "text": "The <code>Camper</code> component should include prop types which require the <code>name</code> prop to be of type <code>string</code>.",
-          "testString": "getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); const noWhiteSpace = getUserInput('index').replace(/\\s/g, ''); const verifyDefaultProps = 'Camper.propTypes={name:PropTypes.string.isRequired}'; return noWhiteSpace.includes(verifyDefaultProps); })(), 'The <code>Camper</code> component should include prop types which require the <code>name</code> prop to be of type <code>string</code>.');"
+          "text":
+            "The <code>Camper</code> component should include prop types which require the <code>name</code> prop to be of type <code>string</code>.",
+          "testString":
+            "getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); const noWhiteSpace = getUserInput('index').replace(/\\s/g, ''); const verifyDefaultProps = 'Camper.propTypes={name:PropTypes.string.isRequired}'; return noWhiteSpace.includes(verifyDefaultProps); })(), 'The <code>Camper</code> component should include prop types which require the <code>name</code> prop to be of type <code>string</code>.');"
         },
         {
-          "text": "The <code>Camper</code> component should contain a <code>p</code> element with only the text from the <code>name</code> prop.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find('p').text() === mockedComponent.find('Camper').props().name; })(), 'The <code>Camper</code> component should contain a <code>p</code> element with only the text from the <code>name</code> prop.');"
+          "text":
+            "The <code>Camper</code> component should contain a <code>p</code> element with only the text from the <code>name</code> prop.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(CampSite)); return mockedComponent.find('p').text() === mockedComponent.find('Camper').props().name; })(), 'The <code>Camper</code> component should contain a <code>p</code> element with only the text from the <code>name</code> prop.');"
         }
       ],
       "solutions": [
@@ -1416,7 +1530,7 @@
       "description": [
         "One of the most important topics in React is <code>state</code>. State consists of any data your application needs to know about, that can change over time. You want your apps to respond to state changes and present an updated UI when necessary. React offers a nice solution for the state management of modern web applications.",
         "You create state in a React component by declaring a <code>state</code> property on the component class in its <code>constructor</code>. This initializes the component with <code>state</code> when it is created. The <code>state</code> property must be set to a JavaScript <code>object</code>. Declaring it looks like this:",
-        "<blockquote>this.state = {<br>  // describe your state here<br>}</code>",
+        "<blockquote>this.state = {<br>&nbsp;&nbsp;// describe your state here<br>}</code>",
         "You have access to the <code>state</code> object throughout the life of your component. You can update it, render it in your UI, and pass it as props to child components. The <code>state</code> object can be as complex or as simple as you need it to be. Note that you must create a class component by extending <code>React.Component</code> in order to create <code>state</code> like this.",
         "<hr>",
         "There is a component in the code editor that is trying to render a <code>name</code> property from its <code>state</code>. However, there is no <code>state</code> defined. Initialize the component with <code>state</code> in the <code>constructor</code> and assign your name to a property of <code>name</code>."
@@ -1452,19 +1566,26 @@
       "tests": [
         {
           "text": "<code>StatefulComponent</code> should exist and render.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find('StatefulComponent').length === 1; })(), '<code>StatefulComponent</code> should exist and render.');"
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find('StatefulComponent').length === 1; })(), '<code>StatefulComponent</code> should exist and render.');"
         },
         {
-          "text": "<code>StatefulComponent</code> should render a <code>div</code> and an <code>h1</code> element.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find('div').length === 1 && mockedComponent.find('h1').length === 1; })(), '<code>StatefulComponent</code> should render a <code>div</code> and an <code>h1</code> element.');"
+          "text":
+            "<code>StatefulComponent</code> should render a <code>div</code> and an <code>h1</code> element.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); return mockedComponent.find('div').length === 1 && mockedComponent.find('h1').length === 1; })(), '<code>StatefulComponent</code> should render a <code>div</code> and an <code>h1</code> element.');"
         },
         {
-          "text": "The state of <code>StatefulComponent</code> should be initialized with a property <code>name</code> set to a string.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return ( typeof initialState === 'object' && typeof initialState.name === 'string'); })(), 'The state of <code>StatefulComponent</code> should be initialized with a property <code>name</code> set to a string.');"
+          "text":
+            "The state of <code>StatefulComponent</code> should be initialized with a property <code>name</code> set to a string.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return ( typeof initialState === 'object' && typeof initialState.name === 'string'); })(), 'The state of <code>StatefulComponent</code> should be initialized with a property <code>name</code> set to a string.');"
         },
         {
-          "text": "The property <code>name</code> in the state of <code>StatefulComponent</code> should render in the <code>h1</code> element.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return mockedComponent.find('h1').text() === initialState.name; })(), 'The property <code>name</code> in the state of <code>StatefulComponent</code> should render in the <code>h1</code> element.');"
+          "text":
+            "The property <code>name</code> in the state of <code>StatefulComponent</code> should render in the <code>h1</code> element.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(StatefulComponent)); const initialState = mockedComponent.state(); return mockedComponent.find('h1').text() === initialState.name; })(), 'The property <code>name</code> in the state of <code>StatefulComponent</code> should render in the <code>h1</code> element.');"
         }
       ],
       "solutions": [
@@ -1520,16 +1641,22 @@
       },
       "tests": [
         {
-          "text": "<code>MyComponent</code> should have a key <code>name</code> with value <code>freeCodeCamp</code> stored in its state.",
-          "testString": "assert(Enzyme.mount(React.createElement(MyComponent)).state('name') === 'freeCodeCamp', '<code>MyComponent</code> should have a key <code>name</code> with value <code>freeCodeCamp</code> stored in its state.');"
+          "text":
+            "<code>MyComponent</code> should have a key <code>name</code> with value <code>freeCodeCamp</code> stored in its state.",
+          "testString":
+            "assert(Enzyme.mount(React.createElement(MyComponent)).state('name') === 'freeCodeCamp', '<code>MyComponent</code> should have a key <code>name</code> with value <code>freeCodeCamp</code> stored in its state.');"
         },
         {
-          "text": "<code>MyComponent</code> should render an <code>h1</code> header enclosed in a single <code>div</code>.",
-          "testString": "assert(/<div><h1>.*<\\/h1><\\/div>/.test(Enzyme.mount(React.createElement(MyComponent)).html()), '<code>MyComponent</code> should render an <code>h1</code> header enclosed in a single <code>div</code>.');"
+          "text":
+            "<code>MyComponent</code> should render an <code>h1</code> header enclosed in a single <code>div</code>.",
+          "testString":
+            "assert(/<div><h1>.*<\\/h1><\\/div>/.test(Enzyme.mount(React.createElement(MyComponent)).html()), '<code>MyComponent</code> should render an <code>h1</code> header enclosed in a single <code>div</code>.');"
         },
         {
-          "text": "The rendered <code>h1</code> header should contain text rendered from the component&apos;s state.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: 'TestName' });   return waitForIt(() => mockedComponent.html()) }; const firstValue = await first(); assert(firstValue === '<div><h1>TestName</h1></div>', 'The rendered <code>h1</code> header should contain text rendered from the component&apos;s state.');};"
+          "text":
+            "The rendered <code>h1</code> header should contain text rendered from the component&apos;s state.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: 'TestName' });   return waitForIt(() => mockedComponent.html()) }; const firstValue = await first(); assert(firstValue === '<div><h1>TestName</h1></div>', 'The rendered <code>h1</code> header should contain text rendered from the component&apos;s state.');};"
         }
       ],
       "solutions": [
@@ -1585,20 +1712,28 @@
       },
       "tests": [
         {
-          "text": "<code>MyComponent</code> should have a key <code>name</code> with value <code>freeCodeCamp</code> stored in its state.",
-          "testString": "assert(Enzyme.mount(React.createElement(MyComponent)).state('name') === 'freeCodeCamp', '<code>MyComponent</code> should have a key <code>name</code> with value <code>freeCodeCamp</code> stored in its state.');"
+          "text":
+            "<code>MyComponent</code> should have a key <code>name</code> with value <code>freeCodeCamp</code> stored in its state.",
+          "testString":
+            "assert(Enzyme.mount(React.createElement(MyComponent)).state('name') === 'freeCodeCamp', '<code>MyComponent</code> should have a key <code>name</code> with value <code>freeCodeCamp</code> stored in its state.');"
         },
         {
-          "text": "<code>MyComponent</code> should render an <code>h1</code> header enclosed in a single <code>div</code>.",
-          "testString": "assert(/<div><h1>.*<\\/h1><\\/div>/.test(Enzyme.mount(React.createElement(MyComponent)).html()), '<code>MyComponent</code> should render an <code>h1</code> header enclosed in a single <code>div</code>.');"
+          "text":
+            "<code>MyComponent</code> should render an <code>h1</code> header enclosed in a single <code>div</code>.",
+          "testString":
+            "assert(/<div><h1>.*<\\/h1><\\/div>/.test(Enzyme.mount(React.createElement(MyComponent)).html()), '<code>MyComponent</code> should render an <code>h1</code> header enclosed in a single <code>div</code>.');"
         },
         {
-          "text": "The rendered <code>h1</code> tag should include a reference to <code>{name}</code>.",
-          "testString": "getUserInput => assert(/<h1>\\n*\\s*\\{\\s*name\\s*\\}\\s*\\n*<\\/h1>/.test(getUserInput('index')), 'The rendered <code>h1</code> tag should include a reference to <code>{name}</code>.');"
+          "text":
+            "The rendered <code>h1</code> tag should include a reference to <code>{name}</code>.",
+          "testString":
+            "getUserInput => assert(/<h1>\\n*\\s*\\{\\s*name\\s*\\}\\s*\\n*<\\/h1>/.test(getUserInput('index')), 'The rendered <code>h1</code> tag should include a reference to <code>{name}</code>.');"
         },
         {
-          "text": "The rendered <code>h1</code> header should contain text rendered from the component&apos;s state.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: 'TestName' });   return waitForIt(() => mockedComponent.html()) }; const firstValue = await first(); assert(firstValue === '<div><h1>TestName</h1></div>', 'The rendered <code>h1</code> header should contain text rendered from the component&apos;s state.'); };"
+          "text":
+            "The rendered <code>h1</code> header should contain text rendered from the component&apos;s state.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: 'TestName' });   return waitForIt(() => mockedComponent.html()) }; const firstValue = await first(); assert(firstValue === '<div><h1>TestName</h1></div>', 'The rendered <code>h1</code> header should contain text rendered from the component&apos;s state.'); };"
         }
       ],
       "solutions": [
@@ -1615,7 +1750,7 @@
       "releasedOn": "December 25, 2017",
       "description": [
         "The previous challenges covered component <code>state</code> and how to initialize state in the <code>constructor</code>. There is also a way to change the component's <code>state</code>. React provides a method for updating component <code>state</code> called <code>setState</code>. You call the <code>setState</code> method within your component class like so: <code>this.setState()</code>, passing in an object with key-value pairs. The keys are your state properties and the values are the updated state data. For instance, if we were storing a <code>username</code> in state and wanted to update it, it would look like this:",
-        "<blockquote>this.setState({<br> username: 'Lewis'<br>});</blockquote>",
+        "<blockquote>this.setState({<br>&nbsp;&nbsp;username: 'Lewis'<br>});</blockquote>",
         "React expects you to never modify <code>state</code> directly, instead always use <code>this.setState()</code> when state changes occur. Also, you should note that React may batch multiple state updates in order to improve performance. What this means is that state updates through the <code>setState</code> method can be asynchronous. There is an alternative syntax for the <code>setState</code> method which provides a way around this problem. This is rarely needed but it's good to keep it in mind! Please consult the <a target=\"_blank\" href=\"https://facebook.github.io/react/docs/state-and-lifecycle.html\">React documentation</a> for further details.",
         "<hr>",
         "There is a <code>button</code> element in the code editor which has an <code>onClick()</code> handler. This handler is triggered when the <code>button</code> receives a click event in the browser, and runs the <code>handleClick</code> method defined on <code>MyComponent</code>. Within the <code>handleClick</code> method, update the component <code>state</code> using <code>this.setState()</code>. Set the <code>name</code> property in <code>state</code> to equal the string <code>React Rocks!</code>.",
@@ -1658,20 +1793,28 @@
       },
       "tests": [
         {
-          "text": "The state of <code>MyComponent</code> should initialize with the key value pair <code>{ name: Initial State }</code>.",
-          "testString": "assert(Enzyme.mount(React.createElement(MyComponent)).state('name') === 'Initial State', 'The state of <code>MyComponent</code> should initialize with the key value pair <code>{ name: Initial State }</code>.');"
+          "text":
+            "The state of <code>MyComponent</code> should initialize with the key value pair <code>{ name: Initial State }</code>.",
+          "testString":
+            "assert(Enzyme.mount(React.createElement(MyComponent)).state('name') === 'Initial State', 'The state of <code>MyComponent</code> should initialize with the key value pair <code>{ name: Initial State }</code>.');"
         },
         {
-          "text": "<code>MyComponent</code> should render an <code>h1</code> header.",
-          "testString": "assert(Enzyme.mount(React.createElement(MyComponent)).find('h1').length === 1, '<code>MyComponent</code> should render an <code>h1</code> header.');"
+          "text":
+            "<code>MyComponent</code> should render an <code>h1</code> header.",
+          "testString":
+            "assert(Enzyme.mount(React.createElement(MyComponent)).find('h1').length === 1, '<code>MyComponent</code> should render an <code>h1</code> header.');"
         },
         {
-          "text": "The rendered <code>h1</code> header should contain text rendered from the component&apos;s state.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: 'TestName' }); return waitForIt(() => mockedComponent.html()); }; const firstValue = await first(); assert(/<h1>TestName<\\/h1>/.test(firstValue), 'The rendered <code>h1</code> header should contain text rendered from the component&apos;s state.'); };"
+          "text":
+            "The rendered <code>h1</code> header should contain text rendered from the component&apos;s state.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: 'TestName' }); return waitForIt(() => mockedComponent.html()); }; const firstValue = await first(); assert(/<h1>TestName<\\/h1>/.test(firstValue), 'The rendered <code>h1</code> header should contain text rendered from the component&apos;s state.'); };"
         },
         {
-          "text": "Calling the <code>handleClick</code> method on <code>MyComponent</code> should set the name property in state to equal <code>React Rocks!</code>.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: 'Before' }); return waitForIt(() => mockedComponent.state('name')); }; const second = () => { mockedComponent.instance().handleClick(); return waitForIt(() => mockedComponent.state('name')); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 'Before' && secondValue === 'React Rocks!', 'Calling the <code>handleClick</code> method on <code>MyComponent</code> should set the name property in state to equal <code>React Rocks!</code>.'); };"
+          "text":
+            "Calling the <code>handleClick</code> method on <code>MyComponent</code> should set the name property in state to equal <code>React Rocks!</code>.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ name: 'Before' }); return waitForIt(() => mockedComponent.state('name')); }; const second = () => { mockedComponent.instance().handleClick(); return waitForIt(() => mockedComponent.state('name')); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 'Before' && secondValue === 'React Rocks!', 'Calling the <code>handleClick</code> method on <code>MyComponent</code> should set the name property in state to equal <code>React Rocks!</code>.'); };"
         }
       ],
       "solutions": [
@@ -1736,16 +1879,22 @@
       },
       "tests": [
         {
-          "text": "<code>MyComponent</code> should return a <code>div</code> element which wraps two elements, a button and an <code>h1</code> element, in that order.",
-          "testString": "assert(Enzyme.mount(React.createElement(MyComponent)).find('div').length === 1 && Enzyme.mount(React.createElement(MyComponent)).find('div').childAt(0).type() === 'button' && Enzyme.mount(React.createElement(MyComponent)).find('div').childAt(1).type() === 'h1', '<code>MyComponent</code> should return a <code>div</code> element which wraps two elements, a button and an <code>h1</code> element, in that order.');"
+          "text":
+            "<code>MyComponent</code> should return a <code>div</code> element which wraps two elements, a button and an <code>h1</code> element, in that order.",
+          "testString":
+            "assert(Enzyme.mount(React.createElement(MyComponent)).find('div').length === 1 && Enzyme.mount(React.createElement(MyComponent)).find('div').childAt(0).type() === 'button' && Enzyme.mount(React.createElement(MyComponent)).find('div').childAt(1).type() === 'h1', '<code>MyComponent</code> should return a <code>div</code> element which wraps two elements, a button and an <code>h1</code> element, in that order.');"
         },
         {
-          "text": "The state of <code>MyComponent</code> should initialize with the key value pair <code>{ itemCount: 0 }</code>.",
-          "testString": "assert(Enzyme.mount(React.createElement(MyComponent)).state('itemCount') === 0, 'The state of <code>MyComponent</code> should initialize with the key value pair <code>{ itemCount: 0 }</code>.');"
+          "text":
+            "The state of <code>MyComponent</code> should initialize with the key value pair <code>{ itemCount: 0 }</code>.",
+          "testString":
+            "assert(Enzyme.mount(React.createElement(MyComponent)).state('itemCount') === 0, 'The state of <code>MyComponent</code> should initialize with the key value pair <code>{ itemCount: 0 }</code>.');"
         },
         {
-          "text": "Clicking the <code>button</code> element should run the <code>addItem</code> method and increment the state <code>itemCount</code> by <code>1</code>.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ itemCount: 0 }); return waitForIt(() => mockedComponent.state('itemCount')); }; const second = () => { mockedComponent.find('button').simulate('click'); return waitForIt(() => mockedComponent.state('itemCount')); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === 1, 'Clicking the <code>button</code> element should run the <code>addItem</code> method and increment the state <code>itemCount</code> by <code>1</code>.'); };"
+          "text":
+            "Clicking the <code>button</code> element should run the <code>addItem</code> method and increment the state <code>itemCount</code> by <code>1</code>.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ itemCount: 0 }); return waitForIt(() => mockedComponent.state('itemCount')); }; const second = () => { mockedComponent.find('button').simulate('click'); return waitForIt(() => mockedComponent.state('itemCount')); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === 1, 'Clicking the <code>button</code> element should run the <code>addItem</code> method and increment the state <code>itemCount</code> by <code>1</code>.'); };"
         }
       ],
       "solutions": [
@@ -1813,16 +1962,22 @@
       },
       "tests": [
         {
-          "text": "<code>MyComponent</code> should return a <code>div</code> element which contains a <code>button</code>.",
-          "testString": "assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).find('div').find('button').length, 1, '<code>MyComponent</code> should return a <code>div</code> element which contains a <code>button</code>.');"
+          "text":
+            "<code>MyComponent</code> should return a <code>div</code> element which contains a <code>button</code>.",
+          "testString":
+            "assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).find('div').find('button').length, 1, '<code>MyComponent</code> should return a <code>div</code> element which contains a <code>button</code>.');"
         },
         {
-          "text": "The state of <code>MyComponent</code> should initialize with a <code>visibility</code> property set to <code>false</code>.",
-          "testString": "assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).state('visibility'), false, 'The state of <code>MyComponent</code> should initialize with a <code>visibility</code> property set to <code>false</code>.');"
+          "text":
+            "The state of <code>MyComponent</code> should initialize with a <code>visibility</code> property set to <code>false</code>.",
+          "testString":
+            "assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).state('visibility'), false, 'The state of <code>MyComponent</code> should initialize with a <code>visibility</code> property set to <code>false</code>.');"
         },
         {
-          "text": "Clicking the button element should toggle the <code>visibility</code> property in state between <code>true</code> and <code>false</code>.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ visibility: false }); return waitForIt(() => mockedComponent.state('visibility')); }; const second = () => { mockedComponent.find('button').simulate('click'); return waitForIt(() => mockedComponent.state('visibility')); }; const third = () => { mockedComponent.find('button').simulate('click'); return waitForIt(() => mockedComponent.state('visibility')); }; const firstValue = await first(); const secondValue = await second(); const thirdValue = await third(); assert(!firstValue && secondValue && !thirdValue, 'Clicking the button element should toggle the <code>visibility</code> property in state between <code>true</code> and <code>false</code>.'); }; "
+          "text":
+            "Clicking the button element should toggle the <code>visibility</code> property in state between <code>true</code> and <code>false</code>.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ visibility: false }); return waitForIt(() => mockedComponent.state('visibility')); }; const second = () => { mockedComponent.find('button').simulate('click'); return waitForIt(() => mockedComponent.state('visibility')); }; const third = () => { mockedComponent.find('button').simulate('click'); return waitForIt(() => mockedComponent.state('visibility')); }; const firstValue = await first(); const secondValue = await second(); const thirdValue = await third(); assert(!firstValue && secondValue && !thirdValue, 'Clicking the button element should toggle the <code>visibility</code> property in state between <code>true</code> and <code>false</code>.'); }; "
         }
       ],
       "solutions": [
@@ -1882,24 +2037,34 @@
       },
       "tests": [
         {
-          "text": "<code>Counter</code> should return a <code>div</code> element which contains three buttons with text content in this order <code>Increment!</code>, <code>Decrement!</code>, <code>Reset</code>.",
-          "testString": "assert((() => { const mockedComponent = Enzyme.mount(React.createElement(Counter)); return (mockedComponent.find('.inc').text() === 'Increment!' && mockedComponent.find('.dec').text() === 'Decrement!' && mockedComponent.find('.reset').text() === 'Reset'); })(), '<code>Counter</code> should return a <code>div</code> element which contains three buttons with text content in this order <code>Increment!</code>, <code>Decrement!</code>, <code>Reset</code>.');"
+          "text":
+            "<code>Counter</code> should return a <code>div</code> element which contains three buttons with text content in this order <code>Increment!</code>, <code>Decrement!</code>, <code>Reset</code>.",
+          "testString":
+            "assert((() => { const mockedComponent = Enzyme.mount(React.createElement(Counter)); return (mockedComponent.find('.inc').text() === 'Increment!' && mockedComponent.find('.dec').text() === 'Decrement!' && mockedComponent.find('.reset').text() === 'Reset'); })(), '<code>Counter</code> should return a <code>div</code> element which contains three buttons with text content in this order <code>Increment!</code>, <code>Decrement!</code>, <code>Reset</code>.');"
         },
         {
-          "text": "The state of <code>Counter</code> should initialize with a <code>count</code> property set to <code>0</code>.",
-          "testString": "assert.strictEqual(Enzyme.mount(React.createElement(Counter)).state('count'), 0, 'The state of <code>Counter</code> should initialize with a <code>count</code> property set to <code>0</code>.');"
+          "text":
+            "The state of <code>Counter</code> should initialize with a <code>count</code> property set to <code>0</code>.",
+          "testString":
+            "assert.strictEqual(Enzyme.mount(React.createElement(Counter)).state('count'), 0, 'The state of <code>Counter</code> should initialize with a <code>count</code> property set to <code>0</code>.');"
         },
         {
-          "text": "Clicking the increment button should increment the count by <code>1</code>.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const first = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state('count')); }; const second = () => { mockedComponent.find('.inc').simulate('click'); return waitForIt(() => mockedComponent.state('count')); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === 1, 'Clicking the increment button should increment the count by <code>1</code>.'); }; "
+          "text":
+            "Clicking the increment button should increment the count by <code>1</code>.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const first = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state('count')); }; const second = () => { mockedComponent.find('.inc').simulate('click'); return waitForIt(() => mockedComponent.state('count')); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === 1, 'Clicking the increment button should increment the count by <code>1</code>.'); }; "
         },
         {
-          "text": "Clicking the decrement button should decrement the count by <code>1</code>.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const first = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state('count')); }; const second = () => { mockedComponent.find('.dec').simulate('click'); return waitForIt(() => mockedComponent.state('count')); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === -1, 'Clicking the decrement button should decrement the count by <code>1</code>.'); }; "
+          "text":
+            "Clicking the decrement button should decrement the count by <code>1</code>.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const first = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state('count')); }; const second = () => { mockedComponent.find('.dec').simulate('click'); return waitForIt(() => mockedComponent.state('count')); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === 0 && secondValue === -1, 'Clicking the decrement button should decrement the count by <code>1</code>.'); }; "
         },
         {
-          "text": "Clicking the reset button should reset the count to <code>0</code>.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const init = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state('count')); }; const increment = () => { mockedComponent.find('.inc').simulate('click'); mockedComponent.find('.inc').simulate('click'); return waitForIt(() => mockedComponent.state('count')); }; const decrement = () => { mockedComponent.find('.dec').simulate('click'); return waitForIt(() => mockedComponent.state('count')); }; const reset = () => { mockedComponent.find('.reset').simulate('click'); return waitForIt(() => mockedComponent.state('count')); }; const firstValue = await init(); const secondValue = await increment(); const thirdValue = await decrement(); const fourthValue = await reset(); assert(firstValue === 0 && secondValue === 2 && thirdValue === 1 && fourthValue === 0, 'Clicking the reset button should reset the count to <code>0</code>.'); }; "
+          "text":
+            "Clicking the reset button should reset the count to <code>0</code>.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Counter)); const init = () => { mockedComponent.setState({ count: 0 }); return waitForIt(() => mockedComponent.state('count')); }; const increment = () => { mockedComponent.find('.inc').simulate('click'); mockedComponent.find('.inc').simulate('click'); return waitForIt(() => mockedComponent.state('count')); }; const decrement = () => { mockedComponent.find('.dec').simulate('click'); return waitForIt(() => mockedComponent.state('count')); }; const reset = () => { mockedComponent.find('.reset').simulate('click'); return waitForIt(() => mockedComponent.state('count')); }; const firstValue = await init(); const secondValue = await increment(); const thirdValue = await decrement(); const fourthValue = await reset(); assert(firstValue === 0 && secondValue === 2 && thirdValue === 1 && fourthValue === 0, 'Clicking the reset button should reset the count to <code>0</code>.'); }; "
         }
       ],
       "solutions": [
@@ -1963,16 +2128,22 @@
       },
       "tests": [
         {
-          "text": "<code>ControlledInput</code> should return a <code>div</code> element which contains an <code>input</code> and a <code>p</code> tag.",
-          "testString": "assert(Enzyme.mount(React.createElement(ControlledInput)).find('div').children().find('input').length === 1 && Enzyme.mount(React.createElement(ControlledInput)).find('div').children().find('p').length === 1, '<code>ControlledInput</code> should return a <code>div</code> element which contains an <code>input</code> and a <code>p</code> tag.');"
+          "text":
+            "<code>ControlledInput</code> should return a <code>div</code> element which contains an <code>input</code> and a <code>p</code> tag.",
+          "testString":
+            "assert(Enzyme.mount(React.createElement(ControlledInput)).find('div').children().find('input').length === 1 && Enzyme.mount(React.createElement(ControlledInput)).find('div').children().find('p').length === 1, '<code>ControlledInput</code> should return a <code>div</code> element which contains an <code>input</code> and a <code>p</code> tag.');"
         },
         {
-          "text": "The state of <code>ControlledInput</code> should initialize with an <code>input</code> property set to an empty string.",
-          "testString": "assert.strictEqual(Enzyme.mount(React.createElement(ControlledInput)).state('input'), '', 'The state of <code>ControlledInput</code> should initialize with an <code>input</code> property set to an empty string.');"
+          "text":
+            "The state of <code>ControlledInput</code> should initialize with an <code>input</code> property set to an empty string.",
+          "testString":
+            "assert.strictEqual(Enzyme.mount(React.createElement(ControlledInput)).state('input'), '', 'The state of <code>ControlledInput</code> should initialize with an <code>input</code> property set to an empty string.');"
         },
         {
-          "text": "Typing in the input element should update the state and the value of the input, and the <code>p</code> element should render this state as you type.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(ControlledInput)); const _1 = () => { mockedComponent.setState({ input: '' }); return waitForIt(() => mockedComponent.state('input'))}; const _2 = () => { mockedComponent.find('input').simulate('change', { target: { value: 'TestInput' }}); return waitForIt(() => ({ state: mockedComponent.state('input'), text: mockedComponent.find('p').text(), inputVal: mockedComponent.find('input').props().value }))}; const before = await _1(); const after = await _2(); assert(before === '' && after.state === 'TestInput' && after.text === 'TestInput' && after.inputVal === 'TestInput', 'Typing in the input element should update the state and the value of the input, and the <code>p</code> element should render this state as you type.'); }; "
+          "text":
+            "Typing in the input element should update the state and the value of the input, and the <code>p</code> element should render this state as you type.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(ControlledInput)); const _1 = () => { mockedComponent.setState({ input: '' }); return waitForIt(() => mockedComponent.state('input'))}; const _2 = () => { mockedComponent.find('input').simulate('change', { target: { value: 'TestInput' }}); return waitForIt(() => ({ state: mockedComponent.state('input'), text: mockedComponent.find('p').text(), inputVal: mockedComponent.find('input').props().value }))}; const before = await _1(); const after = await _2(); assert(before === '' && after.state === 'TestInput' && after.text === 'TestInput' && after.inputVal === 'TestInput', 'Typing in the input element should update the state and the value of the input, and the <code>p</code> element should render this state as you type.'); }; "
         }
       ],
       "solutions": [
@@ -2046,24 +2217,34 @@
       },
       "tests": [
         {
-          "text": "<code>MyForm</code> should return a <code>div</code> element which contains a <code>form</code> and an <code>h1</code> tag. The form should include an <code>input</code> and a <code>button</code>.",
-          "testString": "assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyForm)); return (mockedComponent.find('div').children().find('form').length === 1 && mockedComponent.find('div').children().find('h1').length === 1 && mockedComponent.find('form').children().find('input').length === 1 && mockedComponent.find('form').children().find('button').length === 1) })(), '<code>MyForm</code> should return a <code>div</code> element which contains a <code>form</code> and an <code>h1</code> tag. The form should include an <code>input</code> and a <code>button</code>.');"
+          "text":
+            "<code>MyForm</code> should return a <code>div</code> element which contains a <code>form</code> and an <code>h1</code> tag. The form should include an <code>input</code> and a <code>button</code>.",
+          "testString":
+            "assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyForm)); return (mockedComponent.find('div').children().find('form').length === 1 && mockedComponent.find('div').children().find('h1').length === 1 && mockedComponent.find('form').children().find('input').length === 1 && mockedComponent.find('form').children().find('button').length === 1) })(), '<code>MyForm</code> should return a <code>div</code> element which contains a <code>form</code> and an <code>h1</code> tag. The form should include an <code>input</code> and a <code>button</code>.');"
         },
         {
-          "text": "The state of <code>MyForm</code> should initialize with <code>input</code> and <code>submit</code> properties, both set to empty strings.",
-          "testString": "assert(Enzyme.mount(React.createElement(MyForm)).state('input') === '' && Enzyme.mount(React.createElement(MyForm)).state('submit') === '', 'The state of <code>MyForm</code> should initialize with <code>input</code> and <code>submit</code> properties, both set to empty strings.');"
+          "text":
+            "The state of <code>MyForm</code> should initialize with <code>input</code> and <code>submit</code> properties, both set to empty strings.",
+          "testString":
+            "assert(Enzyme.mount(React.createElement(MyForm)).state('input') === '' && Enzyme.mount(React.createElement(MyForm)).state('submit') === '', 'The state of <code>MyForm</code> should initialize with <code>input</code> and <code>submit</code> properties, both set to empty strings.');"
         },
         {
-          "text": "Typing in the <code>input</code> element should update the <code>input</code> property of the component&apos;s state.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: '' }); return waitForIt(() => mockedComponent.state('input'))}; const _2 = () => { mockedComponent.find('input').simulate('change', { target: { value: 'TestInput' }}); return waitForIt(() => ({ state: mockedComponent.state('input'), inputVal: mockedComponent.find('input').props().value }))}; const before = await _1(); const after = await _2(); assert(before === '' && after.state === 'TestInput' && after.inputVal === 'TestInput', 'Typing in the <code>input</code> element should update the <code>input</code> property of the component&apos;s state.'); }; "
+          "text":
+            "Typing in the <code>input</code> element should update the <code>input</code> property of the component&apos;s state.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: '' }); return waitForIt(() => mockedComponent.state('input'))}; const _2 = () => { mockedComponent.find('input').simulate('change', { target: { value: 'TestInput' }}); return waitForIt(() => ({ state: mockedComponent.state('input'), inputVal: mockedComponent.find('input').props().value }))}; const before = await _1(); const after = await _2(); assert(before === '' && after.state === 'TestInput' && after.inputVal === 'TestInput', 'Typing in the <code>input</code> element should update the <code>input</code> property of the component&apos;s state.'); }; "
         },
         {
-          "text": "Submitting the form should run <code>handleSubmit</code> which should set the <code>submit</code> property in state equal to the current input.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: '' }); mockedComponent.setState({submit: ''}); mockedComponent.find('input').simulate('change', {target: {value: 'SubmitInput'}}); return waitForIt(() => mockedComponent.state('submit'))}; const _2 = () => { mockedComponent.find('form').simulate('submit'); return waitForIt(() => mockedComponent.state('submit'))}; const before = await _1(); const after = await _2(); assert(before === '' && after === 'SubmitInput', 'Submitting the form should run <code>handleSubmit</code> which should set the <code>submit</code> property in state equal to the current input.'); };"
+          "text":
+            "Submitting the form should run <code>handleSubmit</code> which should set the <code>submit</code> property in state equal to the current input.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: '' }); mockedComponent.setState({submit: ''}); mockedComponent.find('input').simulate('change', {target: {value: 'SubmitInput'}}); return waitForIt(() => mockedComponent.state('submit'))}; const _2 = () => { mockedComponent.find('form').simulate('submit'); return waitForIt(() => mockedComponent.state('submit'))}; const before = await _1(); const after = await _2(); assert(before === '' && after === 'SubmitInput', 'Submitting the form should run <code>handleSubmit</code> which should set the <code>submit</code> property in state equal to the current input.'); };"
         },
         {
-          "text": "The <code>h1</code> header should render the value of the <code>submit</code> field from the component&apos;s state.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: '' }); mockedComponent.setState({submit: ''}); mockedComponent.find('input').simulate('change', {target: {value: 'TestInput'}}); return waitForIt(() => mockedComponent.find('h1').text())}; const _2 = () => { mockedComponent.find('form').simulate('submit'); return waitForIt(() => mockedComponent.find('h1').text())}; const before = await _1(); const after = await _2(); assert(before === '' && after === 'TestInput', 'The <code>h1</code> header should render the value of the <code>submit</code> field from the component&apos;s state.'); }; "
+          "text":
+            "The <code>h1</code> header should render the value of the <code>submit</code> field from the component&apos;s state.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyForm)); const _1 = () => { mockedComponent.setState({ input: '' }); mockedComponent.setState({submit: ''}); mockedComponent.find('input').simulate('change', {target: {value: 'TestInput'}}); return waitForIt(() => mockedComponent.find('h1').text())}; const _2 = () => { mockedComponent.find('form').simulate('submit'); return waitForIt(() => mockedComponent.find('h1').text())}; const before = await _1(); const after = await _2(); assert(before === '' && after === 'TestInput', 'The <code>h1</code> header should render the value of the <code>submit</code> field from the component&apos;s state.'); }; "
         }
       ],
       "solutions": [
@@ -2128,16 +2309,22 @@
       },
       "tests": [
         {
-          "text": "The <code>MyApp</code> component should render with a <code>Navbar</code> component inside.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('MyApp').length === 1 && mockedComponent.find('Navbar').length === 1; })(), 'The <code>MyApp</code> component should render with a <code>Navbar</code> component inside.');"
+          "text":
+            "The <code>MyApp</code> component should render with a <code>Navbar</code> component inside.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('MyApp').length === 1 && mockedComponent.find('Navbar').length === 1; })(), 'The <code>MyApp</code> component should render with a <code>Navbar</code> component inside.');"
         },
         {
-          "text": "The <code>Navbar</code> component should receive the <code>MyApp</code> state property <code>name</code> as props.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const setState = () => { mockedComponent.setState({name: 'TestName'}); return waitForIt(() => mockedComponent.find('Navbar').props() )}; const navProps = await setState(); assert(navProps.name === 'TestName', 'The <code>Navbar</code> component should receive the <code>MyApp</code> state property <code>name</code> as props.'); }; "
+          "text":
+            "The <code>Navbar</code> component should receive the <code>MyApp</code> state property <code>name</code> as props.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const setState = () => { mockedComponent.setState({name: 'TestName'}); return waitForIt(() => mockedComponent.find('Navbar').props() )}; const navProps = await setState(); assert(navProps.name === 'TestName', 'The <code>Navbar</code> component should receive the <code>MyApp</code> state property <code>name</code> as props.'); }; "
         },
         {
-          "text": "The <code>h1</code> element in <code>Navbar</code> should render the <code>name</code> prop.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const navH1Before = mockedComponent.find('Navbar').find('h1').text(); const setState = () => { mockedComponent.setState({name: 'TestName'}); return waitForIt(() => mockedComponent.find('Navbar').find('h1').text() )}; const navH1After = await setState(); assert(new RegExp('TestName').test(navH1After) && navH1After !== navH1Before, 'The <code>h1</code> element in <code>Navbar</code> should render the <code>name</code> prop.'); }; "
+          "text":
+            "The <code>h1</code> element in <code>Navbar</code> should render the <code>name</code> prop.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const navH1Before = mockedComponent.find('Navbar').find('h1').text(); const setState = () => { mockedComponent.setState({name: 'TestName'}); return waitForIt(() => mockedComponent.find('Navbar').find('h1').text() )}; const navH1After = await setState(); assert(new RegExp('TestName').test(navH1After) && navH1After !== navH1Before, 'The <code>h1</code> element in <code>Navbar</code> should render the <code>name</code> prop.'); }; "
         }
       ],
       "solutions": [
@@ -2227,23 +2414,30 @@
       "tests": [
         {
           "text": "The <code>MyApp</code> component should render.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('MyApp').length === 1; })(), 'The <code>MyApp</code> component should render.');"
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('MyApp').length === 1; })(), 'The <code>MyApp</code> component should render.');"
         },
         {
           "text": "The <code>GetInput</code> component should render.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('GetInput').length === 1; })(), 'The <code>GetInput</code> component should render.');"
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('GetInput').length === 1; })(), 'The <code>GetInput</code> component should render.');"
         },
         {
           "text": "The <code>RenderInput</code> component should render.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('RenderInput').length === 1; })(), 'The <code>RenderInput</code> component should render.');"
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find('RenderInput').length === 1; })(), 'The <code>RenderInput</code> component should render.');"
         },
         {
-          "text": "The <code>GetInput</code> component should receive the <code>MyApp</code> state property <code>inputValue</code> as props and contain an <code>input</code> element which modifies <code>MyApp</code> state.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const state_1 = () => { mockedComponent.setState({inputValue: ''}); return waitForIt(() => mockedComponent.state() )}; const state_2 = () => { mockedComponent.find('input').simulate('change', {target: {value: 'TestInput'}}); return waitForIt(() => mockedComponent.state() )}; const updated_1 = await state_1(); const updated_2 = await state_2(); assert(updated_1.inputValue === '' && updated_2.inputValue === 'TestInput', 'The <code>GetInput</code> component should receive the <code>MyApp</code> state property <code>inputValue</code> as props and contain an <code>input</code> element which modifies <code>MyApp</code> state.'); }; "
+          "text":
+            "The <code>GetInput</code> component should receive the <code>MyApp</code> state property <code>inputValue</code> as props and contain an <code>input</code> element which modifies <code>MyApp</code> state.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const state_1 = () => { mockedComponent.setState({inputValue: ''}); return waitForIt(() => mockedComponent.state() )}; const state_2 = () => { mockedComponent.find('input').simulate('change', {target: {value: 'TestInput'}}); return waitForIt(() => mockedComponent.state() )}; const updated_1 = await state_1(); const updated_2 = await state_2(); assert(updated_1.inputValue === '' && updated_2.inputValue === 'TestInput', 'The <code>GetInput</code> component should receive the <code>MyApp</code> state property <code>inputValue</code> as props and contain an <code>input</code> element which modifies <code>MyApp</code> state.'); }; "
         },
         {
-          "text": "The <code>RenderInput</code> component should receive the <code>MyApp</code> state property <code>inputValue</code> as props.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const state_1 = () => { mockedComponent.setState({inputValue: 'TestName'}); return waitForIt(() => mockedComponent )}; const updated_1 = await state_1(); assert(updated_1.find('p').text().includes('TestName'), 'The <code>RenderInput</code> component should receive the <code>MyApp</code> state property <code>inputValue</code> as props.'); }; "
+          "text":
+            "The <code>RenderInput</code> component should receive the <code>MyApp</code> state property <code>inputValue</code> as props.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const state_1 = () => { mockedComponent.setState({inputValue: 'TestName'}); return waitForIt(() => mockedComponent )}; const updated_1 = await state_1(); assert(updated_1.find('p').text().includes('TestName'), 'The <code>RenderInput</code> component should receive the <code>MyApp</code> state property <code>inputValue</code> as props.'); }; "
         }
       ],
       "solutions": [
@@ -2299,12 +2493,16 @@
       },
       "tests": [
         {
-          "text": "<code>MyComponent</code> should render a <code>div</code> element.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('div').length === 1; })(), '<code>MyComponent</code> should render a <code>div</code> element.');"
+          "text":
+            "<code>MyComponent</code> should render a <code>div</code> element.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('div').length === 1; })(), '<code>MyComponent</code> should render a <code>div</code> element.');"
         },
         {
-          "text": "<code>console.log</code> should be called in <code>componentWillMount</code>.",
-          "testString": "assert((function() { const lifecycle = React.createElement(MyComponent).type.prototype.componentWillMount.toString().replace(/ /g,''); return lifecycle.includes('console.log('); })(), '<code>console.log</code> should be called in <code>componentWillMount</code>.');"
+          "text":
+            "<code>console.log</code> should be called in <code>componentWillMount</code>.",
+          "testString":
+            "assert((function() { const lifecycle = React.createElement(MyComponent).type.prototype.componentWillMount.toString().replace(/ /g,''); return lifecycle.includes('console.log('); })(), '<code>console.log</code> should be called in <code>componentWillMount</code>.');"
         }
       ],
       "solutions": [
@@ -2362,16 +2560,22 @@
       },
       "tests": [
         {
-          "text": "<code>MyComponent</code> should render a <code>div</code> element which wraps an <code>h1</code> tag.",
-          "testString": "assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return (mockedComponent.find('div').length === 1 && mockedComponent.find('h1').length === 1); })(), '<code>MyComponent</code> should render a <code>div</code> element which wraps an <code>h1</code> tag.');"
+          "text":
+            "<code>MyComponent</code> should render a <code>div</code> element which wraps an <code>h1</code> tag.",
+          "testString":
+            "assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return (mockedComponent.find('div').length === 1 && mockedComponent.find('h1').length === 1); })(), '<code>MyComponent</code> should render a <code>div</code> element which wraps an <code>h1</code> tag.');"
         },
         {
-          "text": "Component state should be updated with a timeout function in <code>componentDidMount</code>.",
-          "testString": "assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return new RegExp('setTimeout(.|\\n)+setState(.|\\n)+activeUsers').test(String(mockedComponent.instance().componentDidMount)); })(), 'Component state should be updated with a timeout function in <code>componentDidMount</code>.');"
+          "text":
+            "Component state should be updated with a timeout function in <code>componentDidMount</code>.",
+          "testString":
+            "assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return new RegExp('setTimeout(.|\\n)+setState(.|\\n)+activeUsers').test(String(mockedComponent.instance().componentDidMount)); })(), 'Component state should be updated with a timeout function in <code>componentDidMount</code>.');"
         },
         {
-          "text": "The <code>h1</code> tag should render the <code>activeUsers</code> value from <code>MyComponent</code>&apos;s state.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ activeUsers: 1237 }); return waitForIt(() => mockedComponent.find('h1').text()); }; const second = () => { mockedComponent.setState({ activeUsers: 1000 }); return waitForIt(() => mockedComponent.find('h1').text()); }; const firstValue = await first(); const secondValue = await second(); assert(new RegExp('1237').test(firstValue) && new RegExp('1000').test(secondValue), 'The <code>h1</code> tag should render the <code>activeUsers</code> value from <code>MyComponent</code>&apos;s state.'); }; "
+          "text":
+            "The <code>h1</code> tag should render the <code>activeUsers</code> value from <code>MyComponent</code>&apos;s state.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const first = () => { mockedComponent.setState({ activeUsers: 1237 }); return waitForIt(() => mockedComponent.find('h1').text()); }; const second = () => { mockedComponent.setState({ activeUsers: 1000 }); return waitForIt(() => mockedComponent.find('h1').text()); }; const firstValue = await first(); const secondValue = await second(); assert(new RegExp('1237').test(firstValue) && new RegExp('1000').test(secondValue), 'The <code>h1</code> tag should render the <code>activeUsers</code> value from <code>MyComponent</code>&apos;s state.'); }; "
         }
       ],
       "solutions": [
@@ -2443,20 +2647,28 @@
       },
       "tests": [
         {
-          "text": "<code>MyComponent</code> should render a <code>div</code> element which wraps an <code>h1</code> tag.",
-          "testString": "assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('div').children().find('h1').length === 1; })(), '<code>MyComponent</code> should render a <code>div</code> element which wraps an <code>h1</code> tag.');"
+          "text":
+            "<code>MyComponent</code> should render a <code>div</code> element which wraps an <code>h1</code> tag.",
+          "testString":
+            "assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('div').children().find('h1').length === 1; })(), '<code>MyComponent</code> should render a <code>div</code> element which wraps an <code>h1</code> tag.');"
         },
         {
-          "text": "A keydown listener should be attached to the document in <code>componentDidMount</code>.",
-          "testString": "assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const didMountString = mockedComponent.instance().componentDidMount.toString(); return new RegExp('document\\.addEventListener(.|\\n|\\r)+keydown(.|\\n|\\r)+this\\.handleKeyPress').test(didMountString); })(), 'A keydown listener should be attached to the document in <code>componentDidMount</code>.');"
+          "text":
+            "A keydown listener should be attached to the document in <code>componentDidMount</code>.",
+          "testString":
+            "assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const didMountString = mockedComponent.instance().componentDidMount.toString(); return new RegExp('document\\.addEventListener(.|\\n|\\r)+keydown(.|\\n|\\r)+this\\.handleKeyPress').test(didMountString); })(), 'A keydown listener should be attached to the document in <code>componentDidMount</code>.');"
         },
         {
-          "text": "The keydown listener should be removed from the document in <code>componentWillUnmount</code>.",
-          "testString": "assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const willUnmountString = mockedComponent.instance().componentWillUnmount.toString(); return new RegExp('document\\.removeEventListener(.|\\n|\\r)+keydown(.|\\n|\\r)+this\\.handleKeyPress').test(willUnmountString); })(), 'The keydown listener should be removed from the document in <code>componentWillUnmount</code>.');"
+          "text":
+            "The keydown listener should be removed from the document in <code>componentWillUnmount</code>.",
+          "testString":
+            "assert((() => { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const willUnmountString = mockedComponent.instance().componentWillUnmount.toString(); return new RegExp('document\\.removeEventListener(.|\\n|\\r)+keydown(.|\\n|\\r)+this\\.handleKeyPress').test(willUnmountString); })(), 'The keydown listener should be removed from the document in <code>componentWillUnmount</code>.');"
         },
         {
-          "text": "Once the component has mounted, pressing <code>enter</code> should update its state and the rendered <code>h1</code> tag.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const beforeState = mockedComponent.state('message'); const beforeText = mockedComponent.find('h1').text(); const pressEnterKey = () => { mockedComponent.instance().handleKeyPress({ keyCode: 13 }); return waitForIt(() => { mockedComponent.update(); return { state: mockedComponent.state('message'), text: mockedComponent.find('h1').text()}; });}; const afterKeyPress = await pressEnterKey(); assert(beforeState !== afterKeyPress.state && beforeText !== afterKeyPress.text, 'Once the component has mounted, pressing <code>enter</code> should update its state and the rendered <code>h1</code> tag.'); }; "
+          "text":
+            "Once the component has mounted, pressing <code>enter</code> should update its state and the rendered <code>h1</code> tag.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const beforeState = mockedComponent.state('message'); const beforeText = mockedComponent.find('h1').text(); const pressEnterKey = () => { mockedComponent.instance().handleKeyPress({ keyCode: 13 }); return waitForIt(() => { mockedComponent.update(); return { state: mockedComponent.state('message'), text: mockedComponent.find('h1').text()}; });}; const afterKeyPress = await pressEnterKey(); assert(beforeState !== afterKeyPress.state && beforeText !== afterKeyPress.text, 'Once the component has mounted, pressing <code>enter</code> should update its state and the rendered <code>h1</code> tag.'); }; "
         }
       ],
       "solutions": [
@@ -2531,20 +2743,28 @@
       },
       "tests": [
         {
-          "text": "The <code>Controller</code> component should render the <code>Dialog</code> component as a child.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Controller)); return mockedComponent.find('Controller').length === 1 && mockedComponent.find('Dialog').length === 1; })(), 'The <code>Controller</code> component should render the <code>Dialog</code> component as a child.');"
+          "text":
+            "The <code>Controller</code> component should render the <code>Dialog</code> component as a child.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Controller)); return mockedComponent.find('Controller').length === 1 && mockedComponent.find('Dialog').length === 1; })(), 'The <code>Controller</code> component should render the <code>Dialog</code> component as a child.');"
         },
         {
-          "text": "The <code>componentWillReceiveProps</code> method in the <code>Dialog</code> component should log <code>this.props</code> to the console.",
-          "testString": "assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentWillReceiveProps.toString().replace(/ /g,''); return lifecycleChild.includes('console.log') && lifecycleChild.includes('this.props') })(), 'The <code>componentWillReceiveProps</code> method in the <code>Dialog</code> component should log <code>this.props</code> to the console.');"
+          "text":
+            "The <code>componentWillReceiveProps</code> method in the <code>Dialog</code> component should log <code>this.props</code> to the console.",
+          "testString":
+            "assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentWillReceiveProps.toString().replace(/ /g,''); return lifecycleChild.includes('console.log') && lifecycleChild.includes('this.props') })(), 'The <code>componentWillReceiveProps</code> method in the <code>Dialog</code> component should log <code>this.props</code> to the console.');"
         },
         {
-          "text": "The <code>componentWillReceiveProps</code> method in the <code>Dialog</code> component should log <code>nextProps</code> to the console.",
-          "testString": "assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentWillReceiveProps.toString().replace(/ /g,''); const nextPropsAsParameterTest = /componentWillReceiveProps(| *?= *?)(\\(|)nextProps(\\)|)( *?=> *?{| *?{|{)/; const nextPropsInConsoleLogTest = /console\\.log\\(.*?nextProps\\b.*?\\)/; return ( lifecycleChild.includes('console.log') && nextPropsInConsoleLogTest.test(lifecycleChild) && nextPropsAsParameterTest.test(lifecycleChild) ); })(), 'The <code>componentWillReceiveProps</code> method in the <code>Dialog</code> component should log <code>nextProps</code> to the console.');"
+          "text":
+            "The <code>componentWillReceiveProps</code> method in the <code>Dialog</code> component should log <code>nextProps</code> to the console.",
+          "testString":
+            "assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentWillReceiveProps.toString().replace(/ /g,''); const nextPropsAsParameterTest = /componentWillReceiveProps(| *?= *?)(\\(|)nextProps(\\)|)( *?=> *?{| *?{|{)/; const nextPropsInConsoleLogTest = /console\\.log\\(.*?nextProps\\b.*?\\)/; return ( lifecycleChild.includes('console.log') && nextPropsInConsoleLogTest.test(lifecycleChild) && nextPropsAsParameterTest.test(lifecycleChild) ); })(), 'The <code>componentWillReceiveProps</code> method in the <code>Dialog</code> component should log <code>nextProps</code> to the console.');"
         },
         {
-          "text": "The <code>Dialog</code> component should call the <code>componentDidUpdate</code> method and log a message to the console.",
-          "testString": "assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentDidUpdate.toString().replace(/ /g,''); return lifecycleChild.length !== 'undefined' && lifecycleChild.includes('console.log'); })(), 'The <code>Dialog</code> component should call the <code>componentDidUpdate</code> method and log a message to the console.');"
+          "text":
+            "The <code>Dialog</code> component should call the <code>componentDidUpdate</code> method and log a message to the console.",
+          "testString":
+            "assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentDidUpdate.toString().replace(/ /g,''); return lifecycleChild.length !== 'undefined' && lifecycleChild.includes('console.log'); })(), 'The <code>Dialog</code> component should call the <code>componentDidUpdate</code> method and log a message to the console.');"
         }
       ],
       "solutions": [
@@ -2623,20 +2843,28 @@
       },
       "tests": [
         {
-          "text": "The <code>Controller</code> component should render the <code>OnlyEvens</code> component as a child.",
-          "testString": "assert((() => { const mockedComponent = Enzyme.mount(React.createElement(Controller)); return mockedComponent.find('Controller').length === 1 && mockedComponent.find('OnlyEvens').length === 1; })(), 'The <code>Controller</code> component should render the <code>OnlyEvens</code> component as a child.');"
+          "text":
+            "The <code>Controller</code> component should render the <code>OnlyEvens</code> component as a child.",
+          "testString":
+            "assert((() => { const mockedComponent = Enzyme.mount(React.createElement(Controller)); return mockedComponent.find('Controller').length === 1 && mockedComponent.find('OnlyEvens').length === 1; })(), 'The <code>Controller</code> component should render the <code>OnlyEvens</code> component as a child.');"
         },
         {
-          "text": "The <code>shouldComponentUpdate</code> method should be defined on the <code>OnlyEvens</code> component.",
-          "testString": "assert((() => { const child = React.createElement(OnlyEvens).type.prototype.shouldComponentUpdate.toString().replace(/s/g,''); return child !== 'undefined'; })(), 'The <code>shouldComponentUpdate</code> method should be defined on the <code>OnlyEvens</code> component.');"
+          "text":
+            "The <code>shouldComponentUpdate</code> method should be defined on the <code>OnlyEvens</code> component.",
+          "testString":
+            "assert((() => { const child = React.createElement(OnlyEvens).type.prototype.shouldComponentUpdate.toString().replace(/s/g,''); return child !== 'undefined'; })(), 'The <code>shouldComponentUpdate</code> method should be defined on the <code>OnlyEvens</code> component.');"
         },
         {
-          "text": "The <code>OnlyEvens</code> component should return an <code>h1</code> tag which renders the value of <code>this.props.value</code>.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Controller)); const first = () => { mockedComponent.setState({ value: 1000 }); return waitForIt(() => mockedComponent.find('h1').html()); }; const second = () => { mockedComponent.setState({ value: 10 }); return waitForIt(() => mockedComponent.find('h1').html()); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === '<h1>1000</h1>' && secondValue === '<h1>10</h1>', 'The <code>OnlyEvens</code> component should return an <code>h1</code> tag which renders the value of <code>this.props.value</code>.'); }; "
+          "text":
+            "The <code>OnlyEvens</code> component should return an <code>h1</code> tag which renders the value of <code>this.props.value</code>.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Controller)); const first = () => { mockedComponent.setState({ value: 1000 }); return waitForIt(() => mockedComponent.find('h1').html()); }; const second = () => { mockedComponent.setState({ value: 10 }); return waitForIt(() => mockedComponent.find('h1').html()); }; const firstValue = await first(); const secondValue = await second(); assert(firstValue === '<h1>1000</h1>' && secondValue === '<h1>10</h1>', 'The <code>OnlyEvens</code> component should return an <code>h1</code> tag which renders the value of <code>this.props.value</code>.'); }; "
         },
         {
-          "text": "<code>OnlyEvens</code> should re-render only when <code>nextProps.value</code> is even.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Controller)); const first = () => { mockedComponent.setState({ value: 8 }); return waitForIt(() => mockedComponent.find('h1').text()); }; const second = () => { mockedComponent.setState({ value: 7 }); return waitForIt(() => mockedComponent.find('h1').text()); }; const third = () => { mockedComponent.setState({ value: 42 }); return waitForIt(() => mockedComponent.find('h1').text()); }; const firstValue = await first(); const secondValue = await second(); const thirdValue = await third(); assert(firstValue === '8' && secondValue === '8' && thirdValue === '42', '<code>OnlyEvens</code> should re-render only when <code>nextProps.value</code> is even.'); }; "
+          "text":
+            "<code>OnlyEvens</code> should re-render only when <code>nextProps.value</code> is even.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(Controller)); const first = () => { mockedComponent.setState({ value: 8 }); return waitForIt(() => mockedComponent.find('h1').text()); }; const second = () => { mockedComponent.setState({ value: 7 }); return waitForIt(() => mockedComponent.find('h1').text()); }; const third = () => { mockedComponent.setState({ value: 42 }); return waitForIt(() => mockedComponent.find('h1').text()); }; const firstValue = await first(); const secondValue = await second(); const thirdValue = await third(); assert(firstValue === '8' && secondValue === '8' && thirdValue === '42', '<code>OnlyEvens</code> should re-render only when <code>nextProps.value</code> is even.'); }; "
         }
       ],
       "solutions": [
@@ -2688,15 +2916,20 @@
       "tests": [
         {
           "text": "The component should render a <code>div</code> element.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().type() === 'div'; })(), 'The component should render a <code>div</code> element.');"
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().type() === 'div'; })(), 'The component should render a <code>div</code> element.');"
         },
         {
-          "text": "The <code>div</code> element should have a color of <code>red</code>.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().props().style.color === 'red'; })(), 'The <code>div</code> element should have a color of <code>red</code>.');"
+          "text":
+            "The <code>div</code> element should have a color of <code>red</code>.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return mockedComponent.children().props().style.color === 'red'; })(), 'The <code>div</code> element should have a color of <code>red</code>.');"
         },
         {
-          "text": "The <code>div</code> element should have a font size of <code>72px</code>.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return (mockedComponent.children().props().style.fontSize === 72 || mockedComponent.children().props().style.fontSize === '72' || mockedComponent.children().props().style.fontSize === '72px'); })(), 'The <code>div</code> element should have a font size of <code>72px</code>.');"
+          "text":
+            "The <code>div</code> element should have a font size of <code>72px</code>.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Colorful)); return (mockedComponent.children().props().style.fontSize === 72 || mockedComponent.children().props().style.fontSize === '72' || mockedComponent.children().props().style.fontSize === '72px'); })(), 'The <code>div</code> element should have a font size of <code>72px</code>.');"
         }
       ],
       "solutions": [
@@ -2745,28 +2978,39 @@
       },
       "tests": [
         {
-          "text": "The <code>styles</code> variable should be an <code>object</code> with three properties.",
-          "testString": "assert(Object.keys(styles).length === 3, 'The <code>styles</code> variable should be an <code>object</code> with three properties.');"
+          "text":
+            "The <code>styles</code> variable should be an <code>object</code> with three properties.",
+          "testString":
+            "assert(Object.keys(styles).length === 3, 'The <code>styles</code> variable should be an <code>object</code> with three properties.');"
         },
         {
-          "text": "The <code>styles</code> variable should have a <code>color</code> property set to a value of <code>purple</code>.",
-          "testString": "assert(styles.color === 'purple', 'The <code>styles</code> variable should have a <code>color</code> property set to a value of <code>purple</code>.');"
+          "text":
+            "The <code>styles</code> variable should have a <code>color</code> property set to a value of <code>purple</code>.",
+          "testString":
+            "assert(styles.color === 'purple', 'The <code>styles</code> variable should have a <code>color</code> property set to a value of <code>purple</code>.');"
         },
         {
-          "text": "The <code>styles</code> variable should have a <code>fontSize</code> property set to a value of <code>40</code>.",
-          "testString": "assert(styles.fontSize === 40, 'The <code>styles</code> variable should have a <code>fontSize</code> property set to a value of <code>40</code>.');"
+          "text":
+            "The <code>styles</code> variable should have a <code>fontSize</code> property set to a value of <code>40</code>.",
+          "testString":
+            "assert(styles.fontSize === 40, 'The <code>styles</code> variable should have a <code>fontSize</code> property set to a value of <code>40</code>.');"
         },
         {
-          "text": "The <code>styles</code> variable should have a <code>border</code> property set to a value of <code>2px solid purple</code>.",
-          "testString": "assert(styles.border === \"2px solid purple\", 'The <code>styles</code> variable should have a <code>border</code> property set to a value of <code>2px solid purple</code>.');"
+          "text":
+            "The <code>styles</code> variable should have a <code>border</code> property set to a value of <code>2px solid purple</code>.",
+          "testString":
+            "assert(styles.border === \"2px solid purple\", 'The <code>styles</code> variable should have a <code>border</code> property set to a value of <code>2px solid purple</code>.');"
         },
         {
           "text": "The component should render a <code>div</code> element.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return mockedComponent.type() === 'div'; })(), 'The component should render a <code>div</code> element.');"
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return mockedComponent.type() === 'div'; })(), 'The component should render a <code>div</code> element.');"
         },
         {
-          "text": "The <code>div</code> element should have its styles defined by the <code>styles</code> object.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return (mockedComponent.props().style.color === \"purple\" && mockedComponent.props().style.fontSize === 40 && mockedComponent.props().style.border === \"2px solid purple\"); })(), 'The <code>div</code> element should have its styles defined by the <code>styles</code> object.');"
+          "text":
+            "The <code>div</code> element should have its styles defined by the <code>styles</code> object.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.shallow(React.createElement(Colorful)); return (mockedComponent.props().style.color === \"purple\" && mockedComponent.props().style.fontSize === 40 && mockedComponent.props().style.border === \"2px solid purple\"); })(), 'The <code>div</code> element should have its styles defined by the <code>styles</code> object.');"
         }
       ],
       "solutions": [
@@ -2875,28 +3119,40 @@
       },
       "tests": [
         {
-          "text": "The <code>MagicEightBall</code> component should exist and should render to the page.",
-          "testString": "assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).find('MagicEightBall').length, 1, 'The <code>MagicEightBall</code> component should exist and should render to the page.');"
+          "text":
+            "The <code>MagicEightBall</code> component should exist and should render to the page.",
+          "testString":
+            "assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).find('MagicEightBall').length, 1, 'The <code>MagicEightBall</code> component should exist and should render to the page.');"
         },
         {
-          "text": "<code>MagicEightBall</code>&apos;s first child should be an <code>input</code> element.",
-          "testString": "assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(0).name(), 'input', '<code>MagicEightBall</code>&apos;s first child should be an <code>input</code> element.');"
+          "text":
+            "<code>MagicEightBall</code>&apos;s first child should be an <code>input</code> element.",
+          "testString":
+            "assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(0).name(), 'input', '<code>MagicEightBall</code>&apos;s first child should be an <code>input</code> element.');"
         },
         {
-          "text": "<code>MagicEightBall</code>&apos;s third child should be a <code>button</code> element.",
-          "testString": "assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(2).name(), 'button', '<code>MagicEightBall</code>&apos;s third child should be a <code>button</code> element.');"
+          "text":
+            "<code>MagicEightBall</code>&apos;s third child should be a <code>button</code> element.",
+          "testString":
+            "assert.strictEqual(Enzyme.mount(React.createElement(MagicEightBall)).children().childAt(2).name(), 'button', '<code>MagicEightBall</code>&apos;s third child should be a <code>button</code> element.');"
         },
         {
-          "text": "<code>MagicEightBall</code>&apos;s state should be initialized with a property of <code>userInput</code> and a property of <code>randomIndex</code> both set to a value of an empty string.",
-          "testString": "assert(Enzyme.mount(React.createElement(MagicEightBall)).state('randomIndex') === '' && Enzyme.mount(React.createElement(MagicEightBall)).state('userInput') === '', '<code>MagicEightBall</code>&apos;s state should be initialized with a property of <code>userInput</code> and a property of <code>randomIndex</code> both set to a value of an empty string.');"
+          "text":
+            "<code>MagicEightBall</code>&apos;s state should be initialized with a property of <code>userInput</code> and a property of <code>randomIndex</code> both set to a value of an empty string.",
+          "testString":
+            "assert(Enzyme.mount(React.createElement(MagicEightBall)).state('randomIndex') === '' && Enzyme.mount(React.createElement(MagicEightBall)).state('userInput') === '', '<code>MagicEightBall</code>&apos;s state should be initialized with a property of <code>userInput</code> and a property of <code>randomIndex</code> both set to a value of an empty string.');"
         },
         {
-          "text": "When <code>MagicEightBall</code> is first mounted to the DOM, it should return an empty <code>p</code> element.",
-          "testString": "assert(Enzyme.mount(React.createElement(MagicEightBall)).find('p').length === 1 && Enzyme.mount(React.createElement(MagicEightBall)).find('p').text() === '', 'When <code>MagicEightBall</code> is first mounted to the DOM, it should return an empty <code>p</code> element.');"
+          "text":
+            "When <code>MagicEightBall</code> is first mounted to the DOM, it should return an empty <code>p</code> element.",
+          "testString":
+            "assert(Enzyme.mount(React.createElement(MagicEightBall)).find('p').length === 1 && Enzyme.mount(React.createElement(MagicEightBall)).find('p').text() === '', 'When <code>MagicEightBall</code> is first mounted to the DOM, it should return an empty <code>p</code> element.');"
         },
         {
-          "text": "When text is entered into the <code>input</code> element and the button is clicked, the <code>MagicEightBall</code> component should return a <code>p</code> element that contains a random element from the <code>possibleAnswers</code> array.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MagicEightBall)); const simulate = () => { comp.find('input').simulate('change', { target: { value: 'test?' }}); comp.find('button').simulate('click'); }; const result = () => comp.find('p').text(); const _1 = () => { simulate(); return waitForIt(() => result()) }; const _2 = () => { simulate(); return waitForIt(() => result()) }; const _3 = () => { simulate(); return waitForIt(() => result()) }; const _4 = () => { simulate(); return waitForIt(() => result()) }; const _5 = () => { simulate(); return waitForIt(() => result()) }; const _6 = () => { simulate(); return waitForIt(() => result()) }; const _7 = () => { simulate(); return waitForIt(() => result()) }; const _8 = () => { simulate(); return waitForIt(() => result()) }; const _9 = () => { simulate(); return waitForIt(() => result()) }; const _10 = () => { simulate(); return waitForIt(() => result()) }; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const actualAnswers = [_1_val, _2_val, _3_val, _4_val, _5_val, _6_val, _7_val, _8_val, _9_val, _10_val]; const hasIndex = actualAnswers.filter((answer, i) => possibleAnswers.indexOf(answer) !== -1); const notAllEqual = new Set(actualAnswers); assert(notAllEqual.size > 1 && hasIndex.length === 10, 'When text is entered into the <code>input</code> element and the button is clicked, the <code>MagicEightBall</code> component should return a <code>p</code> element that contains a random element from the <code>possibleAnswers</code> array.');}"
+          "text":
+            "When text is entered into the <code>input</code> element and the button is clicked, the <code>MagicEightBall</code> component should return a <code>p</code> element that contains a random element from the <code>possibleAnswers</code> array.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MagicEightBall)); const simulate = () => { comp.find('input').simulate('change', { target: { value: 'test?' }}); comp.find('button').simulate('click'); }; const result = () => comp.find('p').text(); const _1 = () => { simulate(); return waitForIt(() => result()) }; const _2 = () => { simulate(); return waitForIt(() => result()) }; const _3 = () => { simulate(); return waitForIt(() => result()) }; const _4 = () => { simulate(); return waitForIt(() => result()) }; const _5 = () => { simulate(); return waitForIt(() => result()) }; const _6 = () => { simulate(); return waitForIt(() => result()) }; const _7 = () => { simulate(); return waitForIt(() => result()) }; const _8 = () => { simulate(); return waitForIt(() => result()) }; const _9 = () => { simulate(); return waitForIt(() => result()) }; const _10 = () => { simulate(); return waitForIt(() => result()) }; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const actualAnswers = [_1_val, _2_val, _3_val, _4_val, _5_val, _6_val, _7_val, _8_val, _9_val, _10_val]; const hasIndex = actualAnswers.filter((answer, i) => possibleAnswers.indexOf(answer) !== -1); const notAllEqual = new Set(actualAnswers); assert(notAllEqual.size > 1 && hasIndex.length === 10, 'When text is entered into the <code>input</code> element and the button is clicked, the <code>MagicEightBall</code> component should return a <code>p</code> element that contains a random element from the <code>possibleAnswers</code> array.');}"
         }
       ],
       "solutions": [
@@ -2957,19 +3213,26 @@
       "tests": [
         {
           "text": "<code>MyComponent</code> should exist and render.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('MyComponent').length === 1; })(), '<code>MyComponent</code> should exist and render.');"
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('MyComponent').length === 1; })(), '<code>MyComponent</code> should exist and render.');"
         },
         {
-          "text": "When <code>display</code> is set to <code>true</code>, a <code>div</code>, <code>button</code>, and <code>h1</code> should render.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: true}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(mockedComponent.find('div').length === 1 && mockedComponent.find('div').children().length === 2 && mockedComponent.find('button').length === 1 && mockedComponent.find('h1').length === 1, 'When <code>display</code> is set to <code>true</code>, a <code>div</code>, <code>button</code>, and <code>h1</code> should render.'); }; "
+          "text":
+            "When <code>display</code> is set to <code>true</code>, a <code>div</code>, <code>button</code>, and <code>h1</code> should render.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: true}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(mockedComponent.find('div').length === 1 && mockedComponent.find('div').children().length === 2 && mockedComponent.find('button').length === 1 && mockedComponent.find('h1').length === 1, 'When <code>display</code> is set to <code>true</code>, a <code>div</code>, <code>button</code>, and <code>h1</code> should render.'); }; "
         },
         {
-          "text": "When <code>display</code> is set to <code>false</code>, only a <code>div</code> and <code>button</code> should render.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: false}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(mockedComponent.find('div').length === 1 && mockedComponent.find('div').children().length === 1 && mockedComponent.find('button').length === 1 && mockedComponent.find('h1').length === 0, 'When <code>display</code> is set to <code>false</code>, only a <code>div</code> and <code>button</code> should render.'); }; "
+          "text":
+            "When <code>display</code> is set to <code>false</code>, only a <code>div</code> and <code>button</code> should render.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: false}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(mockedComponent.find('div').length === 1 && mockedComponent.find('div').children().length === 1 && mockedComponent.find('button').length === 1 && mockedComponent.find('h1').length === 0, 'When <code>display</code> is set to <code>false</code>, only a <code>div</code> and <code>button</code> should render.'); }; "
         },
         {
-          "text": "The render method should use an <code>if/else</code> statement to check the condition of <code>this.state.display</code>.",
-          "testString": "getUserInput => assert(getUserInput('index').includes('if') && getUserInput('index').includes('else'), 'The render method should use an <code>if/else</code> statement to check the condition of <code>this.state.display</code>.');"
+          "text":
+            "The render method should use an <code>if/else</code> statement to check the condition of <code>this.state.display</code>.",
+          "testString":
+            "getUserInput => assert(getUserInput('index').includes('if') && getUserInput('index').includes('else'), 'The render method should use an <code>if/else</code> statement to check the condition of <code>this.state.display</code>.');"
         }
       ],
       "solutions": [
@@ -3030,19 +3293,26 @@
       "tests": [
         {
           "text": "<code>MyComponent</code> should exist and render.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('MyComponent').length; })(), '<code>MyComponent</code> should exist and render.');"
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); return mockedComponent.find('MyComponent').length; })(), '<code>MyComponent</code> should exist and render.');"
         },
         {
-          "text": "When <code>display</code> is set to <code>true</code>, a <code>div</code>, <code>button</code>, and <code>h1</code> should render.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: true}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(updated.find('div').length === 1 && updated.find('div').children().length === 2 && updated.find('button').length === 1 && updated.find('h1').length === 1, 'When <code>display</code> is set to <code>true</code>, a <code>div</code>, <code>button</code>, and <code>h1</code> should render.'); }; "
+          "text":
+            "When <code>display</code> is set to <code>true</code>, a <code>div</code>, <code>button</code>, and <code>h1</code> should render.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: true}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(updated.find('div').length === 1 && updated.find('div').children().length === 2 && updated.find('button').length === 1 && updated.find('h1').length === 1, 'When <code>display</code> is set to <code>true</code>, a <code>div</code>, <code>button</code>, and <code>h1</code> should render.'); }; "
         },
         {
-          "text": "When <code>display</code> is set to <code>false</code>, only a <code>div</code> and <code>button</code> should render.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: false}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(updated.find('div').length === 1 && updated.find('div').children().length === 1 && updated.find('button').length === 1 && updated.find('h1').length === 0, 'When <code>display</code> is set to <code>false</code>, only a <code>div</code> and <code>button</code> should render.'); }; "
+          "text":
+            "When <code>display</code> is set to <code>false</code>, only a <code>div</code> and <code>button</code> should render.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyComponent)); const state_1 = () => { mockedComponent.setState({display: false}); return waitForIt(() => mockedComponent )}; const updated = await state_1(); assert(updated.find('div').length === 1 && updated.find('div').children().length === 1 && updated.find('button').length === 1 && updated.find('h1').length === 0, 'When <code>display</code> is set to <code>false</code>, only a <code>div</code> and <code>button</code> should render.'); }; "
         },
         {
-          "text": "The render method should use the && logical operator to check the condition of this.state.display.",
-          "testString": "getUserInput => assert(getUserInput('index').includes('&&'), 'The render method should use the && logical operator to check the condition of this.state.display.');"
+          "text":
+            "The render method should use the && logical operator to check the condition of this.state.display.",
+          "testString":
+            "getUserInput => assert(getUserInput('index').includes('&&'), 'The render method should use the && logical operator to check the condition of this.state.display.');"
         }
       ],
       "solutions": [
@@ -3124,32 +3394,46 @@
       },
       "tests": [
         {
-          "text": "The <code>CheckUserAge</code> component should render with a single <code>input</code> element and a single <code>button</code> element.",
-          "testString": "assert(Enzyme.mount(React.createElement(CheckUserAge)).find('div').find('input').length === 1 && Enzyme.mount(React.createElement(CheckUserAge)).find('div').find('button').length === 1, 'The <code>CheckUserAge</code> component should render with a single <code>input</code> element and a single <code>button</code> element.');"
+          "text":
+            "The <code>CheckUserAge</code> component should render with a single <code>input</code> element and a single <code>button</code> element.",
+          "testString":
+            "assert(Enzyme.mount(React.createElement(CheckUserAge)).find('div').find('input').length === 1 && Enzyme.mount(React.createElement(CheckUserAge)).find('div').find('button').length === 1, 'The <code>CheckUserAge</code> component should render with a single <code>input</code> element and a single <code>button</code> element.');"
         },
         {
-          "text": "The <code>CheckUserAge</code> component&apos;s state should be initialized with a property of <code>userAge</code> and a property of <code>input</code>, both set to a value of an empty string.",
-          "testString": "assert(Enzyme.mount(React.createElement(CheckUserAge)).state().input === '' && Enzyme.mount(React.createElement(CheckUserAge)).state().userAge === '', 'The <code>CheckUserAge</code> component&apos;s state should be initialized with a property of <code>userAge</code> and a property of <code>input</code>, both set to a value of an empty string.');"
+          "text":
+            "The <code>CheckUserAge</code> component&apos;s state should be initialized with a property of <code>userAge</code> and a property of <code>input</code>, both set to a value of an empty string.",
+          "testString":
+            "assert(Enzyme.mount(React.createElement(CheckUserAge)).state().input === '' && Enzyme.mount(React.createElement(CheckUserAge)).state().userAge === '', 'The <code>CheckUserAge</code> component&apos;s state should be initialized with a property of <code>userAge</code> and a property of <code>input</code>, both set to a value of an empty string.');"
         },
         {
-          "text": "When the <code>CheckUserAge</code> component is first rendered to the DOM, the <code>button</code>&apos;s inner text should be Submit.",
-          "testString": "assert(Enzyme.mount(React.createElement(CheckUserAge)).find('button').text() === 'Submit', 'When the <code>CheckUserAge</code> component is first rendered to the DOM, the <code>button</code>&apos;s inner text should be Submit.');"
+          "text":
+            "When the <code>CheckUserAge</code> component is first rendered to the DOM, the <code>button</code>&apos;s inner text should be Submit.",
+          "testString":
+            "assert(Enzyme.mount(React.createElement(CheckUserAge)).find('button').text() === 'Submit', 'When the <code>CheckUserAge</code> component is first rendered to the DOM, the <code>button</code>&apos;s inner text should be Submit.');"
         },
         {
-          "text": "When a number of less than 18 is entered into the <code>input</code> element and the <code>button</code> is clicked, the <code>button</code>&apos;s inner text should read <code>You Shall Not Pass</code>.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find('button').text(); const enter3AndClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: '3' }}); mockedComponent.find('button').simulate('click'); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const enter17AndClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: '17' }}); mockedComponent.find('button').simulate('click'); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const userAge3 = await enter3AndClickButton(); const userAge17 = await enter17AndClickButton(); assert(initialButton === 'Submit' && userAge3 === 'You Shall Not Pass' && userAge17 === 'You Shall Not Pass', 'When a number of less than 18 is entered into the <code>input</code> element and the <code>button</code> is clicked, the <code>button</code>&apos;s inner text should read <code>You Shall Not Pass</code>.'); }; "
+          "text":
+            "When a number of less than 18 is entered into the <code>input</code> element and the <code>button</code> is clicked, the <code>button</code>&apos;s inner text should read <code>You Shall Not Pass</code>.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find('button').text(); const enter3AndClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: '3' }}); mockedComponent.find('button').simulate('click'); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const enter17AndClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: '17' }}); mockedComponent.find('button').simulate('click'); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const userAge3 = await enter3AndClickButton(); const userAge17 = await enter17AndClickButton(); assert(initialButton === 'Submit' && userAge3 === 'You Shall Not Pass' && userAge17 === 'You Shall Not Pass', 'When a number of less than 18 is entered into the <code>input</code> element and the <code>button</code> is clicked, the <code>button</code>&apos;s inner text should read <code>You Shall Not Pass</code>.'); }; "
         },
         {
-          "text": "When a number greater than or equal to 18 is entered into the <code>input</code> element and the <code>button</code> is clicked, the <code>button</code>&apos;s inner text should read <code>You May Enter</code>.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find('button').text(); const enter18AndClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: '18' }}); mockedComponent.find('button').simulate('click'); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const enter35AndClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: '35' }}); mockedComponent.find('button').simulate('click'); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const userAge18 = await enter18AndClickButton(); const userAge35 = await enter35AndClickButton(); assert(initialButton === 'Submit' && userAge18 === 'You May Enter' && userAge35 === 'You May Enter', 'When a number greater than or equal to 18 is entered into the <code>input</code> element and the <code>button</code> is clicked, the <code>button</code>&apos;s inner text should read <code>You May Enter</code>.'); }; "
+          "text":
+            "When a number greater than or equal to 18 is entered into the <code>input</code> element and the <code>button</code> is clicked, the <code>button</code>&apos;s inner text should read <code>You May Enter</code>.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const initialButton = mockedComponent.find('button').text(); const enter18AndClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: '18' }}); mockedComponent.find('button').simulate('click'); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const enter35AndClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: '35' }}); mockedComponent.find('button').simulate('click'); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const userAge18 = await enter18AndClickButton(); const userAge35 = await enter35AndClickButton(); assert(initialButton === 'Submit' && userAge18 === 'You May Enter' && userAge35 === 'You May Enter', 'When a number greater than or equal to 18 is entered into the <code>input</code> element and the <code>button</code> is clicked, the <code>button</code>&apos;s inner text should read <code>You May Enter</code>.'); }; "
         },
         {
-          "text": "Once a number has been submitted, and the value of the <code>input</code> is once again changed, the <code>button</code> should return to reading <code>Submit</code>.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const enter18AndClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: '18' }}); mockedComponent.find('button').simulate('click'); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const changeInputDontClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: '5' }}); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const enter10AndClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: '10' }}); mockedComponent.find('button').simulate('click'); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const userAge18 = await enter18AndClickButton(); const changeInput1 = await changeInputDontClickButton(); const userAge10 = await enter10AndClickButton(); const changeInput2 = await changeInputDontClickButton(); assert(userAge18 === 'You May Enter' && changeInput1 === 'Submit' && userAge10 === 'You Shall Not Pass' && changeInput2 === 'Submit', 'Once a number has been submitted, and the value of the <code>input</code> is once again changed, the <code>button</code> should return to reading <code>Submit</code>.'); }; "
+          "text":
+            "Once a number has been submitted, and the value of the <code>input</code> is once again changed, the <code>button</code> should return to reading <code>Submit</code>.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge)); const enter18AndClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: '18' }}); mockedComponent.find('button').simulate('click'); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const changeInputDontClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: '5' }}); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const enter10AndClickButton = () => { mockedComponent.find('input').simulate('change', {target: { value: '10' }}); mockedComponent.find('button').simulate('click'); return waitForIt(() => { mockedComponent.update(); return mockedComponent.find('button').text(); }); }; const userAge18 = await enter18AndClickButton(); const changeInput1 = await changeInputDontClickButton(); const userAge10 = await enter10AndClickButton(); const changeInput2 = await changeInputDontClickButton(); assert(userAge18 === 'You May Enter' && changeInput1 === 'Submit' && userAge10 === 'You Shall Not Pass' && changeInput2 === 'Submit', 'Once a number has been submitted, and the value of the <code>input</code> is once again changed, the <code>button</code> should return to reading <code>Submit</code>.'); }; "
         },
         {
-          "text": "Your code should not contain any <code>if/else</code> statements.",
-          "testString": "assert(new RegExp(/(\\s|;)if(\\s|\\()/).test(Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()) === false, 'Your code should not contain any <code>if/else</code> statements.');"
+          "text":
+            "Your code should not contain any <code>if/else</code> statements.",
+          "testString":
+            "assert(new RegExp(/(\\s|;)if(\\s|\\()/).test(Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()) === false, 'Your code should not contain any <code>if/else</code> statements.');"
         }
       ],
       "solutions": [
@@ -3228,32 +3512,46 @@
       },
       "tests": [
         {
-          "text": "The <code>GameOfChance</code> component should exist and render to the page.",
-          "testString": "assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find('GameOfChance').length, 1, 'The <code>GameOfChance</code> component should exist and render to the page.');"
+          "text":
+            "The <code>GameOfChance</code> component should exist and render to the page.",
+          "testString":
+            "assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find('GameOfChance').length, 1, 'The <code>GameOfChance</code> component should exist and render to the page.');"
         },
         {
-          "text": "<code>GameOfChance</code> should return a single <code>button</code> element.",
-          "testString": "assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find('button').length, 1, '<code>GameOfChance</code> should return a single <code>button</code> element.');"
+          "text":
+            "<code>GameOfChance</code> should return a single <code>button</code> element.",
+          "testString":
+            "assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find('button').length, 1, '<code>GameOfChance</code> should return a single <code>button</code> element.');"
         },
         {
-          "text": "<code>GameOfChance</code> should return a single instance of the <code>Results</code> component, which has a prop called <code>fiftyFifty</code>.",
-          "testString": "assert(Enzyme.mount(React.createElement(GameOfChance)).find('Results').length === 1 && Enzyme.mount(React.createElement(GameOfChance)).find('Results').props().hasOwnProperty('fiftyFifty') === true, '<code>GameOfChance</code> should return a single instance of the <code>Results</code> component, which has a prop called <code>fiftyFifty</code>.');"
+          "text":
+            "<code>GameOfChance</code> should return a single instance of the <code>Results</code> component, which has a prop called <code>fiftyFifty</code>.",
+          "testString":
+            "assert(Enzyme.mount(React.createElement(GameOfChance)).find('Results').length === 1 && Enzyme.mount(React.createElement(GameOfChance)).find('Results').props().hasOwnProperty('fiftyFifty') === true, '<code>GameOfChance</code> should return a single instance of the <code>Results</code> component, which has a prop called <code>fiftyFifty</code>.');"
         },
         {
-          "text": "<code>GameOfChance</code> state should be initialized with a property of <code>counter</code> set to a value of <code>1</code>.",
-          "testString": "assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).state().counter, 1, '<code>GameOfChance</code> state should be initialized with a property of <code>counter</code> set to a value of <code>1</code>.');"
+          "text":
+            "<code>GameOfChance</code> state should be initialized with a property of <code>counter</code> set to a value of <code>1</code>.",
+          "testString":
+            "assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).state().counter, 1, '<code>GameOfChance</code> state should be initialized with a property of <code>counter</code> set to a value of <code>1</code>.');"
         },
         {
-          "text": "When the <code>GameOfChance</code> component is first rendered to the DOM, a <code>p</code> element should be returned with the inner text of <code>Turn: 1</code>.",
-          "testString": "assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find('p').text(), 'Turn: 1', 'When the <code>GameOfChance</code> component is first rendered to the DOM, a <code>p</code> element should be returned with the inner text of <code>Turn: 1</code>.');"
+          "text":
+            "When the <code>GameOfChance</code> component is first rendered to the DOM, a <code>p</code> element should be returned with the inner text of <code>Turn: 1</code>.",
+          "testString":
+            "assert.strictEqual(Enzyme.mount(React.createElement(GameOfChance)).find('p').text(), 'Turn: 1', 'When the <code>GameOfChance</code> component is first rendered to the DOM, a <code>p</code> element should be returned with the inner text of <code>Turn: 1</code>.');"
         },
         {
-          "text": "Each time the button is clicked, the counter state should be incremented by a value of 1, and a single <code>p</code> element should be rendered to the DOM that contains the text \"Turn: N\", where N is the value of the counter state.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(GameOfChance)); const simulate = () => { comp.find('button').simulate('click'); };const result = () => ({ count: comp.state('counter'), text: comp.find('p').text() });const _1 = () => { simulate(); return waitForIt(() => result())}; const _2 = () => { simulate(); return waitForIt(() => result())}; const _3 = () => { simulate(); return waitForIt(() => result())}; const _4 = () => { simulate(); return waitForIt(() => result())}; const _5 = () => { simulate(); return waitForIt(() => result())}; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); assert(_1_val.count === 2 && _1_val.text === 'Turn: 2' && _2_val.count === 3 && _2_val.text === 'Turn: 3' && _3_val.count === 4 && _3_val.text === 'Turn: 4' && _4_val.count === 5 && _4_val.text === 'Turn: 5' && _5_val.count === 6 && _5_val.text === 'Turn: 6', 'Each time the button is clicked, the counter state should be incremented by a value of 1, and a single <code>p</code> element should be rendered to the DOM that contains the text \"Turn: N\", where N is the value of the counter state.'); }; "
+          "text":
+            "Each time the button is clicked, the counter state should be incremented by a value of 1, and a single <code>p</code> element should be rendered to the DOM that contains the text \"Turn: N\", where N is the value of the counter state.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(GameOfChance)); const simulate = () => { comp.find('button').simulate('click'); };const result = () => ({ count: comp.state('counter'), text: comp.find('p').text() });const _1 = () => { simulate(); return waitForIt(() => result())}; const _2 = () => { simulate(); return waitForIt(() => result())}; const _3 = () => { simulate(); return waitForIt(() => result())}; const _4 = () => { simulate(); return waitForIt(() => result())}; const _5 = () => { simulate(); return waitForIt(() => result())}; const _1_val = await _1(); const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); assert(_1_val.count === 2 && _1_val.text === 'Turn: 2' && _2_val.count === 3 && _2_val.text === 'Turn: 3' && _3_val.count === 4 && _3_val.text === 'Turn: 4' && _4_val.count === 5 && _4_val.text === 'Turn: 5' && _5_val.count === 6 && _5_val.text === 'Turn: 6', 'Each time the button is clicked, the counter state should be incremented by a value of 1, and a single <code>p</code> element should be rendered to the DOM that contains the text \"Turn: N\", where N is the value of the counter state.'); }; "
         },
         {
-          "text": "When the <code>GameOfChance</code> component is first mounted to the DOM and each time the button is clicked thereafter, a single <code>h1</code> element should be returned that randomly renders either <code>You Win!</code> or <code>You Lose!</code>.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(GameOfChance)); const simulate = () => { comp.find('button').simulate('click'); };const result = () => ({ h1: comp.find('h1').length, text: comp.find('h1').text() });const _1 = result(); const _2 = () => { simulate(); return waitForIt(() => result())}; const _3 = () => { simulate(); return waitForIt(() => result())}; const _4 = () => { simulate(); return waitForIt(() => result())}; const _5 = () => { simulate(); return waitForIt(() => result())}; const _6 = () => { simulate(); return waitForIt(() => result())}; const _7 = () => { simulate(); return waitForIt(() => result())}; const _8 = () => { simulate(); return waitForIt(() => result())}; const _9 = () => { simulate(); return waitForIt(() => result())}; const _10 = () => { simulate(); return waitForIt(() => result())}; const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const __text = new Set([_1.text, _2_val.text, _3_val.text, _4_val.text, _5_val.text, _6_val.text, _7_val.text, _8_val.text, _9_val.text, _10_val.text]); const __h1 = new Set([_1.h1, _2_val.h1, _3_val.h1, _4_val.h1, _5_val.h1, _6_val.h1, _7_val.h1, _8_val.h1, _9_val.h1, _10_val.h1]); assert(__text.size === 2 && __h1.size === 1, 'When the <code>GameOfChance</code> component is first mounted to the DOM and each time the button is clicked thereafter, a single <code>h1</code> element should be returned that randomly renders either <code>You Win!</code> or <code>You Lose!</code>.'); }; "
+          "text":
+            "When the <code>GameOfChance</code> component is first mounted to the DOM and each time the button is clicked thereafter, a single <code>h1</code> element should be returned that randomly renders either <code>You Win!</code> or <code>You Lose!</code>.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(GameOfChance)); const simulate = () => { comp.find('button').simulate('click'); };const result = () => ({ h1: comp.find('h1').length, text: comp.find('h1').text() });const _1 = result(); const _2 = () => { simulate(); return waitForIt(() => result())}; const _3 = () => { simulate(); return waitForIt(() => result())}; const _4 = () => { simulate(); return waitForIt(() => result())}; const _5 = () => { simulate(); return waitForIt(() => result())}; const _6 = () => { simulate(); return waitForIt(() => result())}; const _7 = () => { simulate(); return waitForIt(() => result())}; const _8 = () => { simulate(); return waitForIt(() => result())}; const _9 = () => { simulate(); return waitForIt(() => result())}; const _10 = () => { simulate(); return waitForIt(() => result())}; const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); const _5_val = await _5(); const _6_val = await _6(); const _7_val = await _7(); const _8_val = await _8(); const _9_val = await _9(); const _10_val = await _10(); const __text = new Set([_1.text, _2_val.text, _3_val.text, _4_val.text, _5_val.text, _6_val.text, _7_val.text, _8_val.text, _9_val.text, _10_val.text]); const __h1 = new Set([_1.h1, _2_val.h1, _3_val.h1, _4_val.h1, _5_val.h1, _6_val.h1, _7_val.h1, _8_val.h1, _9_val.h1, _10_val.h1]); assert(__text.size === 2 && __h1.size === 1, 'When the <code>GameOfChance</code> component is first mounted to the DOM and each time the button is clicked thereafter, a single <code>h1</code> element should be returned that randomly renders either <code>You Win!</code> or <code>You Lose!</code>.'); }; "
         }
       ],
       "solutions": [
@@ -3320,24 +3618,34 @@
       },
       "tests": [
         {
-          "text": "The <code>GateKeeper</code> component should render a <code>div</code> element.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find('div').length === 1; })(), 'The <code>GateKeeper</code> component should render a <code>div</code> element.');"
+          "text":
+            "The <code>GateKeeper</code> component should render a <code>div</code> element.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find('div').length === 1; })(), 'The <code>GateKeeper</code> component should render a <code>div</code> element.');"
         },
         {
-          "text": "The <code>GateKeeper</code> component should be initialized with a state key <code>input</code> set to an empty string.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.state().input === ''; })(), 'The <code>GateKeeper</code> component should be initialized with a state key <code>input</code> set to an empty string.');"
+          "text":
+            "The <code>GateKeeper</code> component should be initialized with a state key <code>input</code> set to an empty string.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.state().input === ''; })(), 'The <code>GateKeeper</code> component should be initialized with a state key <code>input</code> set to an empty string.');"
         },
         {
-          "text": "The <code>GateKeeper</code> component should render an <code>h3</code> tag and an <code>input</code> tag.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find('h3').length === 1 && mockedComponent.find('input').length === 1; })(), 'The <code>GateKeeper</code> component should render an <code>h3</code> tag and an <code>input</code> tag.');"
+          "text":
+            "The <code>GateKeeper</code> component should render an <code>h3</code> tag and an <code>input</code> tag.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find('h3').length === 1 && mockedComponent.find('input').length === 1; })(), 'The <code>GateKeeper</code> component should render an <code>h3</code> tag and an <code>input</code> tag.');"
         },
         {
-          "text": "The <code>input</code> tag should initially have a style of <code>1px solid black</code> for the <code>border</code> property.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find('input').props().style.border === '1px solid black'; })(), 'The <code>input</code> tag should initially have a style of <code>1px solid black</code> for the <code>border</code> property.');"
+          "text":
+            "The <code>input</code> tag should initially have a style of <code>1px solid black</code> for the <code>border</code> property.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); return mockedComponent.find('input').props().style.border === '1px solid black'; })(), 'The <code>input</code> tag should initially have a style of <code>1px solid black</code> for the <code>border</code> property.');"
         },
         {
-          "text": "The <code>input</code> tag should be styled with a border of <code>3px solid red</code> if the input value in state is longer than 15 characters.",
-          "testString": "async () => {  const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); const simulateChange = (el, value) => el.simulate('change', {target: {value}}); let initialStyle = mockedComponent.find('input').props().style.border; const state_1 = () => { mockedComponent.setState({input: 'this is 15 char' }); return waitForIt(() => mockedComponent.find('input').props().style.border )}; const state_2 = () => { mockedComponent.setState({input: 'A very long string longer than 15 characters.' }); return waitForIt(() => mockedComponent.find('input').props().style.border )}; const style_1 = await state_1(); const style_2 = await state_2(); assert(initialStyle === '1px solid black' && style_1 === '1px solid black' && style_2 === '3px solid red', 'The <code>input</code> tag should be styled with a border of <code>3px solid red</code> if the input value in state is longer than 15 characters.'); }; "
+          "text":
+            "The <code>input</code> tag should be styled with a border of <code>3px solid red</code> if the input value in state is longer than 15 characters.",
+          "testString":
+            "async () => {  const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const mockedComponent = Enzyme.mount(React.createElement(GateKeeper)); const simulateChange = (el, value) => el.simulate('change', {target: {value}}); let initialStyle = mockedComponent.find('input').props().style.border; const state_1 = () => { mockedComponent.setState({input: 'this is 15 char' }); return waitForIt(() => mockedComponent.find('input').props().style.border )}; const state_2 = () => { mockedComponent.setState({input: 'A very long string longer than 15 characters.' }); return waitForIt(() => mockedComponent.find('input').props().style.border )}; const style_1 = await state_1(); const style_2 = await state_2(); assert(initialStyle === '1px solid black' && style_1 === '1px solid black' && style_2 === '3px solid red', 'The <code>input</code> tag should be styled with a border of <code>3px solid red</code> if the input value in state is longer than 15 characters.'); }; "
         }
       ],
       "solutions": [
@@ -3418,28 +3726,40 @@
       },
       "tests": [
         {
-          "text": "The MyToDoList component should exist and render to the page.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find('MyToDoList').length === 1; })(), 'The MyToDoList component should exist and render to the page.');"
+          "text":
+            "The MyToDoList component should exist and render to the page.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find('MyToDoList').length === 1; })(), 'The MyToDoList component should exist and render to the page.');"
         },
         {
-          "text": "The first child of <code>MyToDoList</code> should be a <code>textarea</code> element.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find('MyToDoList').children().childAt(0).type() === 'textarea'; })(), 'The first child of <code>MyToDoList</code> should be a <code>textarea</code> element.');"
+          "text":
+            "The first child of <code>MyToDoList</code> should be a <code>textarea</code> element.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find('MyToDoList').children().childAt(0).type() === 'textarea'; })(), 'The first child of <code>MyToDoList</code> should be a <code>textarea</code> element.');"
         },
         {
-          "text": "The third child of <code>MyToDoList</code> should be a <code>button</code> element.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find('MyToDoList').children().childAt(2).type() === 'button'; })(), 'The third child of <code>MyToDoList</code> should be a <code>button</code> element.');"
+          "text":
+            "The third child of <code>MyToDoList</code> should be a <code>button</code> element.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); return mockedComponent.find('MyToDoList').children().childAt(2).type() === 'button'; })(), 'The third child of <code>MyToDoList</code> should be a <code>button</code> element.');"
         },
         {
-          "text": "The state of <code>MyToDoList</code> should be initialized with <code>toDoList</code> as an empty array.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const initialState = mockedComponent.state(); return Array.isArray(initialState.toDoList) === true && initialState.toDoList.length === 0; })(), 'The state of <code>MyToDoList</code> should be initialized with <code>toDoList</code> as an empty array.');"
+          "text":
+            "The state of <code>MyToDoList</code> should be initialized with <code>toDoList</code> as an empty array.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const initialState = mockedComponent.state(); return Array.isArray(initialState.toDoList) === true && initialState.toDoList.length === 0; })(), 'The state of <code>MyToDoList</code> should be initialized with <code>toDoList</code> as an empty array.');"
         },
         {
-          "text": "The state of <code>MyToDoList</code> should be initialized with <code>userInput</code> as an empty string.",
-          "testString": "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const initialState = mockedComponent.state(); return typeof initialState.userInput === 'string' && initialState.userInput.length === 0; })(), 'The state of <code>MyToDoList</code> should be initialized with <code>userInput</code> as an empty string.');"
+          "text":
+            "The state of <code>MyToDoList</code> should be initialized with <code>userInput</code> as an empty string.",
+          "testString":
+            "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const initialState = mockedComponent.state(); return typeof initialState.userInput === 'string' && initialState.userInput.length === 0; })(), 'The state of <code>MyToDoList</code> should be initialized with <code>userInput</code> as an empty string.');"
         },
         {
-          "text": "When the <code>Create List</code> button is clicked, the <code>MyToDoList</code> component should dynamically return an unordered list that contains a list item element for every item of a comma-separated list entered into the <code>textarea</code> element.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const simulateChange = (el, value) => el.simulate('change', {target: {value}}); const state_1 = () => { return waitForIt(() => mockedComponent.find('ul').find('li'))}; const setInput = () => { return waitForIt(() => simulateChange(mockedComponent.find('textarea'), \"testA, testB, testC\"))}; const click = () => { return waitForIt(() => mockedComponent.find('button').simulate('click'))}; const state_2 = () => { return waitForIt(() => { const nodes = mockedComponent.find('ul').find('li'); return { nodes, text: nodes.reduce((t, n) => t + n.text(), '') }; })}; const setInput_2 = () => { return waitForIt(() => simulateChange(mockedComponent.find('textarea'), \"t1, t2, t3, t4, t5, t6\"))}; const click_1 = () => { return waitForIt(() => mockedComponent.find('button').simulate('click'))}; const state_3 = () => { return waitForIt(() => { const nodes = mockedComponent.find('ul').find('li'); return { nodes, text: nodes.reduce((t, n) => t + n.text(), '') }; })}; const awaited_state_1 = await state_1(); const awaited_setInput = await setInput(); const awaited_click = await click(); const awaited_state_2 = await state_2(); const awaited_setInput_2 = await setInput_2(); const awaited_click_1 = await click_1(); const awaited_state_3 = await state_3(); assert(awaited_state_1.length === 0 && awaited_state_2.nodes.length === 3 && awaited_state_3.nodes.length === 6 && awaited_state_2.text === 'testA testB testC' && awaited_state_3.text === 't1 t2 t3 t4 t5 t6', 'When the <code>Create List</code> button is clicked, the <code>MyToDoList</code> component should dynamically return an unordered list that contains a list item element for every item of a comma-separated list entered into the <code>textarea</code> element.'); }; "
+          "text":
+            "When the <code>Create List</code> button is clicked, the <code>MyToDoList</code> component should dynamically return an unordered list that contains a list item element for every item of a comma-separated list entered into the <code>textarea</code> element.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100)); const mockedComponent = Enzyme.mount(React.createElement(MyToDoList)); const simulateChange = (el, value) => el.simulate('change', {target: {value}}); const state_1 = () => { return waitForIt(() => mockedComponent.find('ul').find('li'))}; const setInput = () => { return waitForIt(() => simulateChange(mockedComponent.find('textarea'), \"testA, testB, testC\"))}; const click = () => { return waitForIt(() => mockedComponent.find('button').simulate('click'))}; const state_2 = () => { return waitForIt(() => { const nodes = mockedComponent.find('ul').find('li'); return { nodes, text: nodes.reduce((t, n) => t + n.text(), '') }; })}; const setInput_2 = () => { return waitForIt(() => simulateChange(mockedComponent.find('textarea'), \"t1, t2, t3, t4, t5, t6\"))}; const click_1 = () => { return waitForIt(() => mockedComponent.find('button').simulate('click'))}; const state_3 = () => { return waitForIt(() => { const nodes = mockedComponent.find('ul').find('li'); return { nodes, text: nodes.reduce((t, n) => t + n.text(), '') }; })}; const awaited_state_1 = await state_1(); const awaited_setInput = await setInput(); const awaited_click = await click(); const awaited_state_2 = await state_2(); const awaited_setInput_2 = await setInput_2(); const awaited_click_1 = await click_1(); const awaited_state_3 = await state_3(); assert(awaited_state_1.length === 0 && awaited_state_2.nodes.length === 3 && awaited_state_3.nodes.length === 6 && awaited_state_2.text === 'testA testB testC' && awaited_state_3.text === 't1 t2 t3 t4 t5 t6', 'When the <code>Create List</code> button is clicked, the <code>MyToDoList</code> component should dynamically return an unordered list that contains a list item element for every item of a comma-separated list entered into the <code>textarea</code> element.'); }; "
         }
       ],
       "solutions": [
@@ -3496,24 +3816,34 @@
       },
       "tests": [
         {
-          "text": "The <code>Frameworks</code> component should exist and render to the page.",
-          "testString": "assert(Enzyme.mount(React.createElement(Frameworks)).find('Frameworks').length === 1, 'The <code>Frameworks</code> component should exist and render to the page.');"
+          "text":
+            "The <code>Frameworks</code> component should exist and render to the page.",
+          "testString":
+            "assert(Enzyme.mount(React.createElement(Frameworks)).find('Frameworks').length === 1, 'The <code>Frameworks</code> component should exist and render to the page.');"
         },
         {
-          "text": "<code>Frameworks</code> should render an <code>h1</code> element.",
-          "testString": "assert(Enzyme.mount(React.createElement(Frameworks)).find('h1').length === 1, '<code>Frameworks</code> should render an <code>h1</code> element.');"
+          "text":
+            "<code>Frameworks</code> should render an <code>h1</code> element.",
+          "testString":
+            "assert(Enzyme.mount(React.createElement(Frameworks)).find('h1').length === 1, '<code>Frameworks</code> should render an <code>h1</code> element.');"
         },
         {
-          "text": "<code>Frameworks</code> should render a <code>ul</code> element.",
-          "testString": "assert(Enzyme.mount(React.createElement(Frameworks)).find('ul').length === 1, '<code>Frameworks</code> should render a <code>ul</code> element.');"
+          "text":
+            "<code>Frameworks</code> should render a <code>ul</code> element.",
+          "testString":
+            "assert(Enzyme.mount(React.createElement(Frameworks)).find('ul').length === 1, '<code>Frameworks</code> should render a <code>ul</code> element.');"
         },
         {
-          "text": "The <code>ul</code> tag should render 6 child <code>li</code> elements.",
-          "testString": "assert(Enzyme.mount(React.createElement(Frameworks)).find('ul').children().length === 6 && Enzyme.mount(React.createElement(Frameworks)).find('ul').childAt(0).name() === 'li' && Enzyme.mount(React.createElement(Frameworks)).find('li').length === 6, 'The <code>ul</code> tag should render 6 child <code>li</code> elements.');"
+          "text":
+            "The <code>ul</code> tag should render 6 child <code>li</code> elements.",
+          "testString":
+            "assert(Enzyme.mount(React.createElement(Frameworks)).find('ul').children().length === 6 && Enzyme.mount(React.createElement(Frameworks)).find('ul').childAt(0).name() === 'li' && Enzyme.mount(React.createElement(Frameworks)).find('li').length === 6, 'The <code>ul</code> tag should render 6 child <code>li</code> elements.');"
         },
         {
-          "text": "Each list item element should have a unique <code>key</code> attribute.",
-          "testString": "assert((() => { const ul = Enzyme.mount(React.createElement(Frameworks)).find('ul'); const keys = new Set([ ul.childAt(0).key(), ul.childAt(1).key(), ul.childAt(2).key(), ul.childAt(3).key(), ul.childAt(4).key(), ul.childAt(5).key(), ]); return keys.size === 6; })(), 'Each list item element should have a unique <code>key</code> attribute.');"
+          "text":
+            "Each list item element should have a unique <code>key</code> attribute.",
+          "testString":
+            "assert((() => { const ul = Enzyme.mount(React.createElement(Frameworks)).find('ul'); const keys = new Set([ ul.childAt(0).key(), ul.childAt(1).key(), ul.childAt(2).key(), ul.childAt(3).key(), ul.childAt(4).key(), ul.childAt(5).key(), ]); return keys.size === 6; })(), 'Each list item element should have a unique <code>key</code> attribute.');"
         }
       ],
       "solutions": [
@@ -3594,24 +3924,34 @@
       },
       "tests": [
         {
-          "text": "<code>MyComponent</code> should exist and render to the page.",
-          "testString": "assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).find('MyComponent').length, 1, '<code>MyComponent</code> should exist and render to the page.');"
+          "text":
+            "<code>MyComponent</code> should exist and render to the page.",
+          "testString":
+            "assert.strictEqual(Enzyme.mount(React.createElement(MyComponent)).find('MyComponent').length, 1, '<code>MyComponent</code> should exist and render to the page.');"
         },
         {
-          "text": "<code>MyComponent</code>&apos;s state should be initialized to an array of six users.\")",
-          "testString": "assert(Array.isArray(Enzyme.mount(React.createElement(MyComponent)).state('users')) === true && Enzyme.mount(React.createElement(MyComponent)).state('users').length === 6, \"<code>MyComponent</code>&apos;s state should be initialized to an array of six users.\");"
+          "text":
+            "<code>MyComponent</code>&apos;s state should be initialized to an array of six users.\")",
+          "testString":
+            "assert(Array.isArray(Enzyme.mount(React.createElement(MyComponent)).state('users')) === true && Enzyme.mount(React.createElement(MyComponent)).state('users').length === 6, \"<code>MyComponent</code>&apos;s state should be initialized to an array of six users.\");"
         },
         {
-          "text": "<code>MyComponent</code> should return a <code>div</code>, an <code>h1</code>, and then an unordered list containing <code>li</code> elements for every user whose online status is set to <code>true</code>.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MyComponent)); const users = (bool) => ({users:[ { username: 'Jeff', online: bool }, { username: 'Alan', online: bool }, { username: 'Mary', online: bool }, { username: 'Jim', online: bool   }, { username: 'Laura', online: bool } ]}); const result = () => comp.find('li').length; const _1 = result(); const _2 = () => { comp.setState(users(true)); return waitForIt(() => result()) }; const _3 = () => { comp.setState(users(false)); return waitForIt(() => result()) }; const _4 = () => { comp.setState({ users: [] }); return waitForIt(() => result()) }; const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); assert(comp.find('div').length === 1 && comp.find('h1').length === 1 && comp.find('ul').length === 1 && _1 === 4 && _2_val === 5 && _3_val === 0 && _4_val === 0, '<code>MyComponent</code> should return a <code>div</code>, an <code>h1</code>, and then an unordered list containing <code>li</code> elements for every user whose online status is set to <code>true</code>.'); }; "
+          "text":
+            "<code>MyComponent</code> should return a <code>div</code>, an <code>h1</code>, and then an unordered list containing <code>li</code> elements for every user whose online status is set to <code>true</code>.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MyComponent)); const users = (bool) => ({users:[ { username: 'Jeff', online: bool }, { username: 'Alan', online: bool }, { username: 'Mary', online: bool }, { username: 'Jim', online: bool   }, { username: 'Laura', online: bool } ]}); const result = () => comp.find('li').length; const _1 = result(); const _2 = () => { comp.setState(users(true)); return waitForIt(() => result()) }; const _3 = () => { comp.setState(users(false)); return waitForIt(() => result()) }; const _4 = () => { comp.setState({ users: [] }); return waitForIt(() => result()) }; const _2_val = await _2(); const _3_val = await _3(); const _4_val = await _4(); assert(comp.find('div').length === 1 && comp.find('h1').length === 1 && comp.find('ul').length === 1 && _1 === 4 && _2_val === 5 && _3_val === 0 && _4_val === 0, '<code>MyComponent</code> should return a <code>div</code>, an <code>h1</code>, and then an unordered list containing <code>li</code> elements for every user whose online status is set to <code>true</code>.'); }; "
         },
         {
-          "text": "<code>MyComponent</code> should render <code>li</code> elements that contain the username of each online user.",
-          "testString": "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MyComponent)); const users = (bool) => ({users:[ { username: 'Jeff', online: bool }, { username: 'Alan', online: bool }, { username: 'Mary', online: bool }, { username: 'Jim', online: bool   }, { username: 'Laura', online: bool } ]}); const ul = () => { comp.setState(users(true)); return waitForIt(() => comp.find('ul').html()) }; const html = await ul(); assert(html === '<ul><li>Jeff</li><li>Alan</li><li>Mary</li><li>Jim</li><li>Laura</li></ul>', '<code>MyComponent</code> should render <code>li</code> elements that contain the username of each online user.'); }; "
+          "text":
+            "<code>MyComponent</code> should render <code>li</code> elements that contain the username of each online user.",
+          "testString":
+            "async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const comp = Enzyme.mount(React.createElement(MyComponent)); const users = (bool) => ({users:[ { username: 'Jeff', online: bool }, { username: 'Alan', online: bool }, { username: 'Mary', online: bool }, { username: 'Jim', online: bool   }, { username: 'Laura', online: bool } ]}); const ul = () => { comp.setState(users(true)); return waitForIt(() => comp.find('ul').html()) }; const html = await ul(); assert(html === '<ul><li>Jeff</li><li>Alan</li><li>Mary</li><li>Jim</li><li>Laura</li></ul>', '<code>MyComponent</code> should render <code>li</code> elements that contain the username of each online user.'); }; "
         },
         {
-          "text": "Each list item element should have a unique <code>key</code> attribute.",
-          "testString": "assert((() => { const ul = Enzyme.mount(React.createElement(MyComponent)).find('ul'); console.log(ul.debug()); const keys = new Set([ ul.childAt(0).key(), ul.childAt(1).key(), ul.childAt(2).key(), ul.childAt(3).key() ]); return keys.size === 4; })(), 'Each list item element should have a unique <code>key</code> attribute.');"
+          "text":
+            "Each list item element should have a unique <code>key</code> attribute.",
+          "testString":
+            "assert((() => { const ul = Enzyme.mount(React.createElement(MyComponent)).find('ul'); console.log(ul.debug()); const keys = new Set([ ul.childAt(0).key(), ul.childAt(1).key(), ul.childAt(2).key(), ul.childAt(3).key() ]); return keys.size === 4; })(), 'Each list item element should have a unique <code>key</code> attribute.');"
         }
       ],
       "solutions": [
@@ -3654,15 +3994,15 @@
             "// change code below this line",
             ""
           ],
-          "tail": [
-            "ReactDOM.render(<App />, document.getElementById('root'))"
-          ]
+          "tail": ["ReactDOM.render(<App />, document.getElementById('root'))"]
         }
       },
       "tests": [
         {
-          "text": "The <code>App</code> component should render to a string using <code>ReactDOMServer.renderToString</code>.",
-          "testString": "getUserInput => assert(getUserInput('index').replace(/ /g,'').includes('ReactDOMServer.renderToString(<App/>)') && Enzyme.mount(React.createElement(App)).children().name() === 'div', 'The <code>App</code> component should render to a string using <code>ReactDOMServer.renderToString</code>.');"
+          "text":
+            "The <code>App</code> component should render to a string using <code>ReactDOMServer.renderToString</code>.",
+          "testString":
+            "getUserInput => assert(getUserInput('index').replace(/ /g,'').includes('ReactDOMServer.renderToString(<App/>)') && Enzyme.mount(React.createElement(App)).children().name() === 'div', 'The <code>App</code> component should render to a string using <code>ReactDOMServer.renderToString</code>.');"
         }
       ],
       "solutions": [
diff --git a/challenges/03-front-end-libraries/redux.json b/challenges/03-front-end-libraries/redux.json
index bb9f21450..4dc0302fb 100644
--- a/challenges/03-front-end-libraries/redux.json
+++ b/challenges/03-front-end-libraries/redux.json
@@ -8,7 +8,8 @@
       "src": "https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.min.js"
     },
     {
-      "src": "https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.2.0/redux-thunk.min.js"
+      "src":
+        "https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.2.0/redux-thunk.min.js"
     }
   ],
   "challenges": [
@@ -48,11 +49,13 @@
       "tests": [
         {
           "text": "The redux store exists.",
-          "testString": "assert(typeof store.getState === 'function', 'The redux store exists.');"
+          "testString":
+            "assert(typeof store.getState === 'function', 'The redux store exists.');"
         },
         {
           "text": "The redux store has a value of 5 for the state.",
-          "testString": "assert(store.getState()=== 5, 'The redux store has a value of 5 for the state.');"
+          "testString":
+            "assert(store.getState()=== 5, 'The redux store has a value of 5 for the state.');"
         }
       ],
       "solutions": [
@@ -91,12 +94,16 @@
       },
       "tests": [
         {
-          "text": "The redux store should have a value of 5 for the initial state.",
-          "testString": "assert(store.getState()===5, 'The redux store should have a value of 5 for the initial state.');"
+          "text":
+            "The redux store should have a value of 5 for the initial state.",
+          "testString":
+            "assert(store.getState()===5, 'The redux store should have a value of 5 for the initial state.');"
         },
         {
-          "text": "A variable <code>currentState</code> should exist and should be assigned the current state of the Redux store.",
-          "testString": "getUserInput => assert(currentState === 5 && getUserInput('index').includes('store.getState()'), 'A variable <code>currentState</code> should exist and should be assigned the current state of the Redux store.');"
+          "text":
+            "A variable <code>currentState</code> should exist and should be assigned the current state of the Redux store.",
+          "testString":
+            "getUserInput => assert(currentState === 5 && getUserInput('index').includes('store.getState()'), 'A variable <code>currentState</code> should exist and should be assigned the current state of the Redux store.');"
         }
       ],
       "solutions": [
@@ -122,10 +129,7 @@
           "key": "indexjsx",
           "ext": "jsx",
           "name": "index",
-          "contents": [
-            "// Define an action here:",
-            ""
-          ],
+          "contents": ["// Define an action here:", ""],
           "head": [],
           "tail": []
         }
@@ -133,16 +137,17 @@
       "tests": [
         {
           "text": "An action object should exist.",
-          "testString": "assert((function() { return typeof action === 'object' })(), 'An action object should exist.');"
+          "testString":
+            "assert((function() { return typeof action === 'object' })(), 'An action object should exist.');"
         },
         {
-          "text": "The action should have a key property type with value <code>LOGIN</code>.",
-          "testString": "assert((function() { return action.type === 'LOGIN' })(), 'The action should have a key property type with value <code>LOGIN</code>.');"
+          "text":
+            "The action should have a key property type with value <code>LOGIN</code>.",
+          "testString":
+            "assert((function() { return action.type === 'LOGIN' })(), 'The action should have a key property type with value <code>LOGIN</code>.');"
         }
       ],
-      "solutions": [
-        "const action = {\n  type: 'LOGIN'\n}"
-      ],
+      "solutions": ["const action = {\n  type: 'LOGIN'\n}"],
       "challengeType": 6,
       "isRequired": false,
       "translations": {},
@@ -176,15 +181,20 @@
       "tests": [
         {
           "text": "The function <code>actionCreator</code> should exist.",
-          "testString": "assert(typeof actionCreator === 'function', 'The function <code>actionCreator</code> should exist.');"
+          "testString":
+            "assert(typeof actionCreator === 'function', 'The function <code>actionCreator</code> should exist.');"
         },
         {
-          "text": "Running the <code>actionCreator</code> function should return the action object.",
-          "testString": "assert(typeof action === 'object', 'Running the <code>actionCreator</code> function should return the action object.');"
+          "text":
+            "Running the <code>actionCreator</code> function should return the action object.",
+          "testString":
+            "assert(typeof action === 'object', 'Running the <code>actionCreator</code> function should return the action object.');"
         },
         {
-          "text": "The returned action should have a key property type with value <code>LOGIN</code>.",
-          "testString": "assert(action.type === 'LOGIN', 'The returned action should have a key property type with value <code>LOGIN</code>.');"
+          "text":
+            "The returned action should have a key property type with value <code>LOGIN</code>.",
+          "testString":
+            "assert(action.type === 'LOGIN', 'The returned action should have a key property type with value <code>LOGIN</code>.');"
         }
       ],
       "solutions": [
@@ -231,16 +241,22 @@
       },
       "tests": [
         {
-          "text": "Calling the function <code>loginAction</code> should return an object with <code>type</code> property set to the string <code>LOGIN</code>.",
-          "testString": "assert(loginAction().type === 'LOGIN', 'Calling the function <code>loginAction</code> should return an object with <code>type</code> property set to the string <code>LOGIN</code>.');"
+          "text":
+            "Calling the function <code>loginAction</code> should return an object with <code>type</code> property set to the string <code>LOGIN</code>.",
+          "testString":
+            "assert(loginAction().type === 'LOGIN', 'Calling the function <code>loginAction</code> should return an object with <code>type</code> property set to the string <code>LOGIN</code>.');"
         },
         {
-          "text": "The store should be initialized with an object with property <code>login</code> set to <code>false</code>.",
-          "testString": "assert(store.getState().login === false, 'The store should be initialized with an object with property <code>login</code> set to <code>false</code>.');"
+          "text":
+            "The store should be initialized with an object with property <code>login</code> set to <code>false</code>.",
+          "testString":
+            "assert(store.getState().login === false, 'The store should be initialized with an object with property <code>login</code> set to <code>false</code>.');"
         },
         {
-          "text": "The <code>store.dispatch()</code> method should be used to dispatch an action of type <code>LOGIN</code>.",
-          "testString": "getUserInput => assert((function() {  let noWhiteSpace = getUserInput('index').replace(/\\s/g,''); return noWhiteSpace.includes('store.dispatch(loginAction())') || noWhiteSpace.includes('store.dispatch({type: \\'LOGIN\\'})') === true })(), 'The <code>store.dispatch()</code> method should be used to dispatch an action of type <code>LOGIN</code>.');"
+          "text":
+            "The <code>store.dispatch()</code> method should be used to dispatch an action of type <code>LOGIN</code>.",
+          "testString":
+            "getUserInput => assert((function() {  let noWhiteSpace = getUserInput('index').replace(/\\s/g,''); return noWhiteSpace.includes('store.dispatch(loginAction())') || noWhiteSpace.includes('store.dispatch({type: \\'LOGIN\\'})') === true })(), 'The <code>store.dispatch()</code> method should be used to dispatch an action of type <code>LOGIN</code>.');"
         }
       ],
       "solutions": [
@@ -291,20 +307,28 @@
       },
       "tests": [
         {
-          "text": "Calling the function <code>loginAction</code> should return an object with type property set to the string <code>LOGIN</code>.",
-          "testString": "assert(loginAction().type === 'LOGIN', 'Calling the function <code>loginAction</code> should return an object with type property set to the string <code>LOGIN</code>.');"
+          "text":
+            "Calling the function <code>loginAction</code> should return an object with type property set to the string <code>LOGIN</code>.",
+          "testString":
+            "assert(loginAction().type === 'LOGIN', 'Calling the function <code>loginAction</code> should return an object with type property set to the string <code>LOGIN</code>.');"
         },
         {
-          "text": "The store should be initialized with an object with property <code>login</code> set to <code>false</code>.",
-          "testString": "assert(store.getState().login === false, 'The store should be initialized with an object with property <code>login</code> set to <code>false</code>.');"
+          "text":
+            "The store should be initialized with an object with property <code>login</code> set to <code>false</code>.",
+          "testString":
+            "assert(store.getState().login === false, 'The store should be initialized with an object with property <code>login</code> set to <code>false</code>.');"
         },
         {
-          "text": "Dispatching <code>loginAction</code> should update the <code>login</code> property in the store state to <code>true</code>.",
-          "testString": "assert((function() {  const initialState = store.getState(); store.dispatch(loginAction()); const afterState = store.getState(); return initialState.login === false && afterState.login === true })(), 'Dispatching <code>loginAction</code> should update the <code>login</code> property in the store state to <code>true</code>.');"
+          "text":
+            "Dispatching <code>loginAction</code> should update the <code>login</code> property in the store state to <code>true</code>.",
+          "testString":
+            "assert((function() {  const initialState = store.getState(); store.dispatch(loginAction()); const afterState = store.getState(); return initialState.login === false && afterState.login === true })(), 'Dispatching <code>loginAction</code> should update the <code>login</code> property in the store state to <code>true</code>.');"
         },
         {
-          "text": "If the action is not of type <code>LOGIN</code>, the store should return the current state.",
-          "testString": "assert((function() { store.dispatch({type: '__TEST__ACTION__'}); let afterTest = store.getState(); return typeof afterTest === 'object' && afterTest.hasOwnProperty('login') })(), 'If the action is not of type <code>LOGIN</code>, the store should return the current state.');"
+          "text":
+            "If the action is not of type <code>LOGIN</code>, the store should return the current state.",
+          "testString":
+            "assert((function() { store.dispatch({type: '__TEST__ACTION__'}); let afterTest = store.getState(); return typeof afterTest === 'object' && afterTest.hasOwnProperty('login') })(), 'If the action is not of type <code>LOGIN</code>, the store should return the current state.');"
         }
       ],
       "solutions": [
@@ -361,28 +385,40 @@
       },
       "tests": [
         {
-          "text": "Calling the function <code>loginUser</code> should return an object with type property set to the string <code>LOGIN</code>.",
-          "testString": "assert(loginUser().type === 'LOGIN', 'Calling the function <code>loginUser</code> should return an object with type property set to the string <code>LOGIN</code>.');"
+          "text":
+            "Calling the function <code>loginUser</code> should return an object with type property set to the string <code>LOGIN</code>.",
+          "testString":
+            "assert(loginUser().type === 'LOGIN', 'Calling the function <code>loginUser</code> should return an object with type property set to the string <code>LOGIN</code>.');"
         },
         {
-          "text": "Calling the function <code>logoutUser</code> should return an object with type property set to the string <code>LOGOUT</code>.",
-          "testString": "assert(logoutUser().type === 'LOGOUT', 'Calling the function <code>logoutUser</code> should return an object with type property set to the string <code>LOGOUT</code>.');"
+          "text":
+            "Calling the function <code>logoutUser</code> should return an object with type property set to the string <code>LOGOUT</code>.",
+          "testString":
+            "assert(logoutUser().type === 'LOGOUT', 'Calling the function <code>logoutUser</code> should return an object with type property set to the string <code>LOGOUT</code>.');"
         },
         {
-          "text": "The store should be initialized with an object with an <code>authenticated</code> property set to <code>false</code>.",
-          "testString": "assert(store.getState().authenticated === false, 'The store should be initialized with an object with an <code>authenticated</code> property set to <code>false</code>.');"
+          "text":
+            "The store should be initialized with an object with an <code>authenticated</code> property set to <code>false</code>.",
+          "testString":
+            "assert(store.getState().authenticated === false, 'The store should be initialized with an object with an <code>authenticated</code> property set to <code>false</code>.');"
         },
         {
-          "text": "Dispatching <code>loginUser</code> should update the <code>authenticated</code> property in the store state to <code>true</code>.",
-          "testString": "assert((function() {  const initialState = store.getState(); store.dispatch(loginUser()); const afterLogin = store.getState(); return initialState.authenticated === false && afterLogin.authenticated === true })(), 'Dispatching <code>loginUser</code> should update the <code>authenticated</code> property in the store state to <code>true</code>.');"
+          "text":
+            "Dispatching <code>loginUser</code> should update the <code>authenticated</code> property in the store state to <code>true</code>.",
+          "testString":
+            "assert((function() {  const initialState = store.getState(); store.dispatch(loginUser()); const afterLogin = store.getState(); return initialState.authenticated === false && afterLogin.authenticated === true })(), 'Dispatching <code>loginUser</code> should update the <code>authenticated</code> property in the store state to <code>true</code>.');"
         },
         {
-          "text": "Dispatching <code>logoutUser</code> should update the <code>authenticated</code> property in the store state to <code>false</code>.",
-          "testString": "assert((function() {  store.dispatch(loginUser()); const loggedIn = store.getState(); store.dispatch(logoutUser()); const afterLogout = store.getState(); return loggedIn.authenticated === true && afterLogout.authenticated === false  })(), 'Dispatching <code>logoutUser</code> should update the <code>authenticated</code> property in the store state to <code>false</code>.');"
+          "text":
+            "Dispatching <code>logoutUser</code> should update the <code>authenticated</code> property in the store state to <code>false</code>.",
+          "testString":
+            "assert((function() {  store.dispatch(loginUser()); const loggedIn = store.getState(); store.dispatch(logoutUser()); const afterLogout = store.getState(); return loggedIn.authenticated === true && afterLogout.authenticated === false  })(), 'Dispatching <code>logoutUser</code> should update the <code>authenticated</code> property in the store state to <code>false</code>.');"
         },
         {
-          "text": "The <code>authReducer</code> function should handle multiple action types with a <code>switch</code> statement.",
-          "testString": "getUserInput => assert( getUserInput('index').toString().includes('switch') && getUserInput('index').toString().includes('case') && getUserInput('index').toString().includes('default'), 'The <code>authReducer</code> function should handle multiple action types with a <code>switch</code> statement.');"
+          "text":
+            "The <code>authReducer</code> function should handle multiple action types with a <code>switch</code> statement.",
+          "testString":
+            "getUserInput => assert( getUserInput('index').toString().includes('switch') && getUserInput('index').toString().includes('case') && getUserInput('index').toString().includes('default'), 'The <code>authReducer</code> function should handle multiple action types with a <code>switch</code> statement.');"
         }
       ],
       "solutions": [
@@ -458,36 +494,52 @@
       },
       "tests": [
         {
-          "text": "Calling the function <code>loginUser</code> should return an object with <code>type</code> property set to the string <code>LOGIN</code>.",
-          "testString": "assert(loginUser().type === 'LOGIN', 'Calling the function <code>loginUser</code> should return an object with <code>type</code> property set to the string <code>LOGIN</code>.');"
+          "text":
+            "Calling the function <code>loginUser</code> should return an object with <code>type</code> property set to the string <code>LOGIN</code>.",
+          "testString":
+            "assert(loginUser().type === 'LOGIN', 'Calling the function <code>loginUser</code> should return an object with <code>type</code> property set to the string <code>LOGIN</code>.');"
         },
         {
-          "text": "Calling the function <code>logoutUser</code> should return an object with <code>type</code> property set to the string <code>LOGOUT</code>.",
-          "testString": "assert(logoutUser().type === 'LOGOUT', 'Calling the function <code>logoutUser</code> should return an object with <code>type</code> property set to the string <code>LOGOUT</code>.');"
+          "text":
+            "Calling the function <code>logoutUser</code> should return an object with <code>type</code> property set to the string <code>LOGOUT</code>.",
+          "testString":
+            "assert(logoutUser().type === 'LOGOUT', 'Calling the function <code>logoutUser</code> should return an object with <code>type</code> property set to the string <code>LOGOUT</code>.');"
         },
         {
-          "text": "The store should be initialized with an object with property <code>login</code> set to <code>false</code>.",
-          "testString": "assert(store.getState().authenticated === false, 'The store should be initialized with an object with property <code>login</code> set to <code>false</code>.');"
+          "text":
+            "The store should be initialized with an object with property <code>login</code> set to <code>false</code>.",
+          "testString":
+            "assert(store.getState().authenticated === false, 'The store should be initialized with an object with property <code>login</code> set to <code>false</code>.');"
         },
         {
-          "text": "Dispatching <code>loginUser</code> should update the <code>login</code> property in the store state to <code>true</code>.",
-          "testString": "assert((function() {  const initialState = store.getState(); store.dispatch(loginUser()); const afterLogin = store.getState(); return initialState.authenticated === false && afterLogin.authenticated === true })(), 'Dispatching <code>loginUser</code> should update the <code>login</code> property in the store state to <code>true</code>.');"
+          "text":
+            "Dispatching <code>loginUser</code> should update the <code>login</code> property in the store state to <code>true</code>.",
+          "testString":
+            "assert((function() {  const initialState = store.getState(); store.dispatch(loginUser()); const afterLogin = store.getState(); return initialState.authenticated === false && afterLogin.authenticated === true })(), 'Dispatching <code>loginUser</code> should update the <code>login</code> property in the store state to <code>true</code>.');"
         },
         {
-          "text": "Dispatching <code>logoutUser</code> should update the <code>login</code> property in the store state to <code>false</code>.",
-          "testString": "assert((function() {  store.dispatch(loginUser()); const loggedIn = store.getState(); store.dispatch(logoutUser()); const afterLogout = store.getState(); return loggedIn.authenticated === true && afterLogout.authenticated === false })(), 'Dispatching <code>logoutUser</code> should update the <code>login</code> property in the store state to <code>false</code>.');"
+          "text":
+            "Dispatching <code>logoutUser</code> should update the <code>login</code> property in the store state to <code>false</code>.",
+          "testString":
+            "assert((function() {  store.dispatch(loginUser()); const loggedIn = store.getState(); store.dispatch(logoutUser()); const afterLogout = store.getState(); return loggedIn.authenticated === true && afterLogout.authenticated === false })(), 'Dispatching <code>logoutUser</code> should update the <code>login</code> property in the store state to <code>false</code>.');"
         },
         {
-          "text": "The <code>authReducer</code> function should handle multiple action types with a switch statement.",
-          "testString": "getUserInput => assert((function() { return typeof authReducer === 'function' && getUserInput('index').toString().includes('switch') && getUserInput('index').toString().includes('case') && getUserInput('index').toString().includes('default') })(), 'The <code>authReducer</code> function should handle multiple action types with a switch statement.');"
+          "text":
+            "The <code>authReducer</code> function should handle multiple action types with a switch statement.",
+          "testString":
+            "getUserInput => assert((function() { return typeof authReducer === 'function' && getUserInput('index').toString().includes('switch') && getUserInput('index').toString().includes('case') && getUserInput('index').toString().includes('default') })(), 'The <code>authReducer</code> function should handle multiple action types with a switch statement.');"
         },
         {
-          "text": "<code>LOGIN</code> and <code>LOGOUT</code> should be declared as <code>const</code> values and should be assigned strings of <code>LOGIN</code>and <code>LOGOUT</code>.",
-          "testString": "getUserInput => assert((function() {  const noWhiteSpace = getUserInput('index').toString().replace(/\\s/g,''); return (noWhiteSpace.includes('constLOGIN=\\'LOGIN\\'') || noWhiteSpace.includes('constLOGIN=\"LOGIN\"')) && (noWhiteSpace.includes('constLOGOUT=\\'LOGOUT\\'') || noWhiteSpace.includes('constLOGOUT=\"LOGOUT\"')) })(), '<code>LOGIN</code> and <code>LOGOUT</code> should be declared as <code>const</code> values and should be assigned strings of <code>LOGIN</code>and <code>LOGOUT</code>.');"
+          "text":
+            "<code>LOGIN</code> and <code>LOGOUT</code> should be declared as <code>const</code> values and should be assigned strings of <code>LOGIN</code>and <code>LOGOUT</code>.",
+          "testString":
+            "getUserInput => assert((function() {  const noWhiteSpace = getUserInput('index').toString().replace(/\\s/g,''); return (noWhiteSpace.includes('constLOGIN=\\'LOGIN\\'') || noWhiteSpace.includes('constLOGIN=\"LOGIN\"')) && (noWhiteSpace.includes('constLOGOUT=\\'LOGOUT\\'') || noWhiteSpace.includes('constLOGOUT=\"LOGOUT\"')) })(), '<code>LOGIN</code> and <code>LOGOUT</code> should be declared as <code>const</code> values and should be assigned strings of <code>LOGIN</code>and <code>LOGOUT</code>.');"
         },
         {
-          "text": "The action creators and the reducer should reference the <code>LOGIN</code> and <code>LOGOUT</code> constants.",
-          "testString": "getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').toString().replace(/\\s/g,''); return noWhiteSpace.includes('caseLOGIN:') && noWhiteSpace.includes('caseLOGOUT:') && noWhiteSpace.includes('type:LOGIN') && noWhiteSpace.includes('type:LOGOUT') })(), 'The action creators and the reducer should reference the <code>LOGIN</code> and <code>LOGOUT</code> constants.');"
+          "text":
+            "The action creators and the reducer should reference the <code>LOGIN</code> and <code>LOGOUT</code> constants.",
+          "testString":
+            "getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').toString().replace(/\\s/g,''); return noWhiteSpace.includes('caseLOGIN:') && noWhiteSpace.includes('caseLOGOUT:') && noWhiteSpace.includes('type:LOGIN') && noWhiteSpace.includes('type:LOGOUT') })(), 'The action creators and the reducer should reference the <code>LOGIN</code> and <code>LOGOUT</code> constants.');"
         }
       ],
       "solutions": [
@@ -512,9 +564,7 @@
           "key": "indexjsx",
           "ext": "jsx",
           "name": "index",
-          "head": [
-            "count = 0;"
-          ],
+          "head": ["count = 0;"],
           "contents": [
             "const ADD = 'ADD';",
             "",
@@ -548,16 +598,22 @@
       },
       "tests": [
         {
-          "text": "Dispatching the <code>ADD</code> action on the store should increment the state by <code>1</code>.",
-          "testString": "assert((function() { const initialState = store.getState(); store.dispatch({ type: 'ADD' }); const newState = store.getState(); return newState === (initialState + 1); })(), 'Dispatching the <code>ADD</code> action on the store should increment the state by <code>1</code>.');"
+          "text":
+            "Dispatching the <code>ADD</code> action on the store should increment the state by <code>1</code>.",
+          "testString":
+            "assert((function() { const initialState = store.getState(); store.dispatch({ type: 'ADD' }); const newState = store.getState(); return newState === (initialState + 1); })(), 'Dispatching the <code>ADD</code> action on the store should increment the state by <code>1</code>.');"
         },
         {
-          "text": "There should be a listener function subscribed to the store using <code>store.subscribe</code>.",
-          "testString": "getUserInput => assert(getUserInput('index').includes('store.subscribe('), 'There should be a listener function subscribed to the store using <code>store.subscribe</code>.');"
+          "text":
+            "There should be a listener function subscribed to the store using <code>store.subscribe</code>.",
+          "testString":
+            "getUserInput => assert(getUserInput('index').includes('store.subscribe('), 'There should be a listener function subscribed to the store using <code>store.subscribe</code>.');"
         },
         {
-          "text": "The callback to <code>store.subscribe</code> should also increment the global <code>count</code> variable as the store is updated.",
-          "testString": "assert(store.getState() === count, 'The callback to <code>store.subscribe</code> should also increment the global <code>count</code> variable as the store is updated.');"
+          "text":
+            "The callback to <code>store.subscribe</code> should also increment the global <code>count</code> variable as the store is updated.",
+          "testString":
+            "assert(store.getState() === count, 'The callback to <code>store.subscribe</code> should also increment the global <code>count</code> variable as the store is updated.');"
         }
       ],
       "solutions": [
@@ -576,7 +632,7 @@
         "When the state of your app begins to grow more complex, it may be tempting to divide state into multiple pieces. Instead, remember the first principle of Redux: all app state is held in a single state object in the store. Therefore, Redux provides reducer composition as a solution for a complex state model. You define multiple reducers to handle different pieces of your application's state, then compose these reducers together into one root reducer. The root reducer is then passed into the Redux <code>createStore()</code> method.",
         "In order to let us combine multiple reducers together, Redux provides the <code>combineReducers()</code> method. This method accepts an object as an argument in which you define properties which associate keys to specific reducer functions. The name you give to the keys will be used by Redux as the name for the associated piece of state.",
         "Typically, it is a good practice to create a reducer for each piece of application state when they are distinct or unique in some way. For example, in a note-taking app with user authentication, one reducer could handle authentication while another handles the text and notes that the user is submitting. For such an application, we might write the <code>combineReducers()</code> method like this:",
-        "<blockquote>const rootReducer = Redux.combineReducers({<br>  auth: authenticationReducer,<br>  notes: notesReducer<br>});</blockquote>",
+        "<blockquote>const rootReducer = Redux.combineReducers({<br>&nbsp;&nbsp;auth: authenticationReducer,<br>&nbsp;&nbsp;notes: notesReducer<br>});</blockquote>",
         "Now, the key <code>notes</code> will contain all of the state associated with our notes and handled by our <code>notesReducer</code>. This is how multiple reducers can be composed to manage more complex application state. In this example, the state held in the Redux store would then be a single object containing <code>auth</code> and <code>notes</code> properties.",
         "<hr>",
         "There are <code>counterReducer()</code> and <code>authReducer()</code> functions provided in the code editor, along with a Redux store. Finish writing the <code>rootReducer()</code> function using the <code>Redux.combineReducers()</code> method. Assign <code>counterReducer</code> to a key called <code>count</code> and <code>authReducer</code> to a key called <code>auth</code>."
@@ -630,20 +686,28 @@
       },
       "tests": [
         {
-          "text": "The <code>counterReducer</code> should increment and decrement the <code>state</code>.",
-          "testString": "assert((function() { const initalState = store.getState().count; store.dispatch({type: INCREMENT}); store.dispatch({type: INCREMENT}); const firstState = store.getState().count; store.dispatch({type: DECREMENT}); const secondState = store.getState().count; return firstState === initalState + 2 && secondState === firstState - 1  })(), 'The <code>counterReducer</code> should increment and decrement the <code>state</code>.');"
+          "text":
+            "The <code>counterReducer</code> should increment and decrement the <code>state</code>.",
+          "testString":
+            "assert((function() { const initalState = store.getState().count; store.dispatch({type: INCREMENT}); store.dispatch({type: INCREMENT}); const firstState = store.getState().count; store.dispatch({type: DECREMENT}); const secondState = store.getState().count; return firstState === initalState + 2 && secondState === firstState - 1  })(), 'The <code>counterReducer</code> should increment and decrement the <code>state</code>.');"
         },
         {
-          "text": "The <code>authReducer</code> should toggle the <code>state</code> of <code>authenticated</code> between <code>true</code> and <code>false</code>.",
-          "testString": "assert((function() {  store.dispatch({type: LOGIN}); const loggedIn = store.getState().auth.authenticated; store.dispatch({type: LOGOUT}); const loggedOut = store.getState().auth.authenticated; return loggedIn === true && loggedOut === false  })(), 'The <code>authReducer</code> should toggle the <code>state</code> of <code>authenticated</code> between <code>true</code> and <code>false</code>.');"
+          "text":
+            "The <code>authReducer</code> should toggle the <code>state</code> of <code>authenticated</code> between <code>true</code> and <code>false</code>.",
+          "testString":
+            "assert((function() {  store.dispatch({type: LOGIN}); const loggedIn = store.getState().auth.authenticated; store.dispatch({type: LOGOUT}); const loggedOut = store.getState().auth.authenticated; return loggedIn === true && loggedOut === false  })(), 'The <code>authReducer</code> should toggle the <code>state</code> of <code>authenticated</code> between <code>true</code> and <code>false</code>.');"
         },
         {
-          "text": "The store <code>state</code> should have two keys: <code>count</code>, which holds a number, and <code>auth</code>, which holds an object. The <code>auth</code> object should have a property of <code>authenticated</code>, which holds a boolean.",
-          "testString": "assert((function() { const state = store.getState(); return typeof state.auth === 'object' && typeof state.auth.authenticated === 'boolean' && typeof state.count === 'number' })(), 'The store <code>state</code> should have two keys: <code>count</code>, which holds a number, and <code>auth</code>, which holds an object. The <code>auth</code> object should have a property of <code>authenticated</code>, which holds a boolean.');"
+          "text":
+            "The store <code>state</code> should have two keys: <code>count</code>, which holds a number, and <code>auth</code>, which holds an object. The <code>auth</code> object should have a property of <code>authenticated</code>, which holds a boolean.",
+          "testString":
+            "assert((function() { const state = store.getState(); return typeof state.auth === 'object' && typeof state.auth.authenticated === 'boolean' && typeof state.count === 'number' })(), 'The store <code>state</code> should have two keys: <code>count</code>, which holds a number, and <code>auth</code>, which holds an object. The <code>auth</code> object should have a property of <code>authenticated</code>, which holds a boolean.');"
         },
         {
-          "text": "The <code>rootReducer</code> should be a function that combines the <code>counterReducer</code> and the <code>authReducer</code>.",
-          "testString": "getUserInput => assert((function() {  const noWhiteSpace = getUserInput('index').replace(/\\s/g,''); return typeof rootReducer === 'function' && noWhiteSpace.includes('Redux.combineReducers')  })(), 'The <code>rootReducer</code> should be a function that combines the <code>counterReducer</code> and the <code>authReducer</code>.');"
+          "text":
+            "The <code>rootReducer</code> should be a function that combines the <code>counterReducer</code> and the <code>authReducer</code>.",
+          "testString":
+            "getUserInput => assert((function() {  const noWhiteSpace = getUserInput('index').replace(/\\s/g,''); return typeof rootReducer === 'function' && noWhiteSpace.includes('Redux.combineReducers')  })(), 'The <code>rootReducer</code> should be a function that combines the <code>counterReducer</code> and the <code>authReducer</code>.');"
         }
       ],
       "solutions": [
@@ -701,12 +765,16 @@
       },
       "tests": [
         {
-          "text": "The action creator <code>addNoteText</code> should return an object with keys <code>type</code> and <code>text</code>.",
-          "testString": "assert((function() { const addNoteFn = addNoteText('__TEST__NOTE'); return addNoteFn.type === ADD_NOTE && addNoteFn.text === '__TEST__NOTE' })(), 'The action creator <code>addNoteText</code> should return an object with keys <code>type</code> and <code>text</code>.');"
+          "text":
+            "The action creator <code>addNoteText</code> should return an object with keys <code>type</code> and <code>text</code>.",
+          "testString":
+            "assert((function() { const addNoteFn = addNoteText('__TEST__NOTE'); return addNoteFn.type === ADD_NOTE && addNoteFn.text === '__TEST__NOTE' })(), 'The action creator <code>addNoteText</code> should return an object with keys <code>type</code> and <code>text</code>.');"
         },
         {
-          "text": "Dispatching an action of type <code>ADD_NOTE</code> with the <code>addNoteText</code> action creator should update the <code>state</code> to the string passed to the action creator.",
-          "testString": "assert((function() { const initialState = store.getState(); store.dispatch(addNoteText('__TEST__NOTE')); const newState = store.getState(); return initialState !== newState && newState === '__TEST__NOTE' })(), 'Dispatching an action of type <code>ADD_NOTE</code> with the <code>addNoteText</code> action creator should update the <code>state</code> to the string passed to the action creator.');"
+          "text":
+            "Dispatching an action of type <code>ADD_NOTE</code> with the <code>addNoteText</code> action creator should update the <code>state</code> to the string passed to the action creator.",
+          "testString":
+            "assert((function() { const initialState = store.getState(); store.dispatch(addNoteText('__TEST__NOTE')); const newState = store.getState(); return initialState !== newState && newState === '__TEST__NOTE' })(), 'Dispatching an action of type <code>ADD_NOTE</code> with the <code>addNoteText</code> action creator should update the <code>state</code> to the string passed to the action creator.');"
         }
       ],
       "solutions": [
@@ -788,24 +856,33 @@
       },
       "tests": [
         {
-          "text": "The <code>requestingData</code> action creator should return an object of type equal to the value of <code>REQUESTING_DATA</code>.",
-          "testString": "assert(requestingData().type === REQUESTING_DATA, 'The <code>requestingData</code> action creator should return an object of type equal to the value of <code>REQUESTING_DATA</code>.');"
+          "text":
+            "The <code>requestingData</code> action creator should return an object of type equal to the value of <code>REQUESTING_DATA</code>.",
+          "testString":
+            "assert(requestingData().type === REQUESTING_DATA, 'The <code>requestingData</code> action creator should return an object of type equal to the value of <code>REQUESTING_DATA</code>.');"
         },
         {
-          "text": "The <code>receivedData</code> action creator should return an object of type equal to the value of <code>RECEIVED_DATA</code>.",
-          "testString": "assert(receivedData('data').type === RECEIVED_DATA, 'The <code>receivedData</code> action creator should return an object of type equal to the value of <code>RECEIVED_DATA</code>.');"
+          "text":
+            "The <code>receivedData</code> action creator should return an object of type equal to the value of <code>RECEIVED_DATA</code>.",
+          "testString":
+            "assert(receivedData('data').type === RECEIVED_DATA, 'The <code>receivedData</code> action creator should return an object of type equal to the value of <code>RECEIVED_DATA</code>.');"
         },
         {
           "text": "<code>asyncDataReducer</code> should be a function.",
-          "testString": "assert(typeof asyncDataReducer === 'function', '<code>asyncDataReducer</code> should be a function.');"
+          "testString":
+            "assert(typeof asyncDataReducer === 'function', '<code>asyncDataReducer</code> should be a function.');"
         },
         {
-          "text": "Dispatching the requestingData action creator should update the store <code>state</code> property of fetching to <code>true</code>.",
-          "testString": "assert((function() { const initialState = store.getState(); store.dispatch(requestingData()); const reqState = store.getState(); return initialState.fetching === false && reqState.fetching === true })(), 'Dispatching the requestingData action creator should update the store <code>state</code> property of fetching to <code>true</code>.');"
+          "text":
+            "Dispatching the requestingData action creator should update the store <code>state</code> property of fetching to <code>true</code>.",
+          "testString":
+            "assert((function() { const initialState = store.getState(); store.dispatch(requestingData()); const reqState = store.getState(); return initialState.fetching === false && reqState.fetching === true })(), 'Dispatching the requestingData action creator should update the store <code>state</code> property of fetching to <code>true</code>.');"
         },
         {
-          "text": "Dispatching <code>handleAsync</code> should dispatch the data request action and then dispatch the received data action after a delay.",
-          "testString": "assert((function() { const noWhiteSpace = handleAsync.toString().replace(/\\s/g,''); return noWhiteSpace.includes('dispatch(requestingData())') === true && noWhiteSpace.includes('dispatch(receivedData(data))') === true })(), 'Dispatching <code>handleAsync</code> should dispatch the data request action and then dispatch the received data action after a delay.');"
+          "text":
+            "Dispatching <code>handleAsync</code> should dispatch the data request action and then dispatch the received data action after a delay.",
+          "testString":
+            "assert((function() { const noWhiteSpace = handleAsync.toString().replace(/\\s/g,''); return noWhiteSpace.includes('dispatch(requestingData())') === true && noWhiteSpace.includes('dispatch(receivedData(data))') === true })(), 'Dispatching <code>handleAsync</code> should dispatch the data request action and then dispatch the received data action after a delay.');"
         }
       ],
       "solutions": [
@@ -848,28 +925,39 @@
       },
       "tests": [
         {
-          "text": "The action creator <code>incAction</code> should return an action object with <code>type</code> equal to the value of <code>INCREMENT</code>",
-          "testString": "assert(incAction().type ===INCREMENT, 'The action creator <code>incAction</code> should return an action object with <code>type</code> equal to the value of <code>INCREMENT</code>');"
+          "text":
+            "The action creator <code>incAction</code> should return an action object with <code>type</code> equal to the value of <code>INCREMENT</code>",
+          "testString":
+            "assert(incAction().type ===INCREMENT, 'The action creator <code>incAction</code> should return an action object with <code>type</code> equal to the value of <code>INCREMENT</code>');"
         },
         {
-          "text": "The action creator <code>decAction</code> should return an action object with <code>type</code> equal to the value of <code>DECREMENT</code>",
-          "testString": "assert(decAction().type === DECREMENT, 'The action creator <code>decAction</code> should return an action object with <code>type</code> equal to the value of <code>DECREMENT</code>');"
+          "text":
+            "The action creator <code>decAction</code> should return an action object with <code>type</code> equal to the value of <code>DECREMENT</code>",
+          "testString":
+            "assert(decAction().type === DECREMENT, 'The action creator <code>decAction</code> should return an action object with <code>type</code> equal to the value of <code>DECREMENT</code>');"
         },
         {
-          "text": "The Redux store should initialize with a <code>state</code> of 0.",
-          "testString": "assert(store.getState() === 0, 'The Redux store should initialize with a <code>state</code> of 0.');"
+          "text":
+            "The Redux store should initialize with a <code>state</code> of 0.",
+          "testString":
+            "assert(store.getState() === 0, 'The Redux store should initialize with a <code>state</code> of 0.');"
         },
         {
-          "text": "Dispatching <code>incAction</code> on the Redux store should increment the <code>state</code> by 1.",
-          "testString": "assert((function() { const initialState = store.getState(); store.dispatch(incAction()); const incState = store.getState(); return initialState + 1 === incState })(), 'Dispatching <code>incAction</code> on the Redux store should increment the <code>state</code> by 1.');"
+          "text":
+            "Dispatching <code>incAction</code> on the Redux store should increment the <code>state</code> by 1.",
+          "testString":
+            "assert((function() { const initialState = store.getState(); store.dispatch(incAction()); const incState = store.getState(); return initialState + 1 === incState })(), 'Dispatching <code>incAction</code> on the Redux store should increment the <code>state</code> by 1.');"
         },
         {
-          "text": "Dispatching <code>decAction</code> on the Redux store should decrement the <code>state</code> by 1.",
-          "testString": "assert((function() { const initialState = store.getState(); store.dispatch(decAction()); const decState = store.getState(); return initialState - 1 === decState })(), 'Dispatching <code>decAction</code> on the Redux store should decrement the <code>state</code> by 1.');"
+          "text":
+            "Dispatching <code>decAction</code> on the Redux store should decrement the <code>state</code> by 1.",
+          "testString":
+            "assert((function() { const initialState = store.getState(); store.dispatch(decAction()); const decState = store.getState(); return initialState - 1 === decState })(), 'Dispatching <code>decAction</code> on the Redux store should decrement the <code>state</code> by 1.');"
         },
         {
           "text": "<code>counterReducer</code> should be a function",
-          "testString": "assert(typeof counterReducer === 'function', '<code>counterReducer</code> should be a function');"
+          "testString":
+            "assert(typeof counterReducer === 'function', '<code>counterReducer</code> should be a function');"
         }
       ],
       "solutions": [
@@ -933,16 +1021,22 @@
       },
       "tests": [
         {
-          "text": "The Redux store should exist and initialize with a state equal to the <code>todos</code> array in the code editor.",
-          "testString": "assert((function() { const todos = [ 'Go to the store', 'Clean the house', 'Cook dinner', 'Learn to code' ]; const initialState = store.getState(); return Array.isArray(initialState) && initialState.join(',') === todos.join(','); })(), 'The Redux store should exist and initialize with a state equal to the <code>todos</code> array in the code editor.');"
+          "text":
+            "The Redux store should exist and initialize with a state equal to the <code>todos</code> array in the code editor.",
+          "testString":
+            "assert((function() { const todos = [ 'Go to the store', 'Clean the house', 'Cook dinner', 'Learn to code' ]; const initialState = store.getState(); return Array.isArray(initialState) && initialState.join(',') === todos.join(','); })(), 'The Redux store should exist and initialize with a state equal to the <code>todos</code> array in the code editor.');"
         },
         {
-          "text": "<code>addToDo</code> and <code>immutableReducer</code> both should be functions.",
-          "testString": "assert(typeof addToDo === 'function' && typeof immutableReducer === 'function', '<code>addToDo</code> and <code>immutableReducer</code> both should be functions.');"
+          "text":
+            "<code>addToDo</code> and <code>immutableReducer</code> both should be functions.",
+          "testString":
+            "assert(typeof addToDo === 'function' && typeof immutableReducer === 'function', '<code>addToDo</code> and <code>immutableReducer</code> both should be functions.');"
         },
         {
-          "text": "Dispatching an action of type <code>ADD_TO_DO</code> on the Redux store should add a <code>todo</code> item and should NOT mutate state.",
-          "testString": "assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch(addToDo('__TEST__TO__DO__')); const finalState = store.getState(); const expectedState = [ 'Go to the store', 'Clean the house', 'Cook dinner', 'Learn to code', '__TEST__TO__DO__' ]; return( isFrozen && DeepEqual(finalState, expectedState)); })(), 'Dispatching an action of type <code>ADD_TO_DO</code> on the Redux store should add a <code>todo</code> item and should NOT mutate state.');"
+          "text":
+            "Dispatching an action of type <code>ADD_TO_DO</code> on the Redux store should add a <code>todo</code> item and should NOT mutate state.",
+          "testString":
+            "assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch(addToDo('__TEST__TO__DO__')); const finalState = store.getState(); const expectedState = [ 'Go to the store', 'Clean the house', 'Cook dinner', 'Learn to code', '__TEST__TO__DO__' ]; return( isFrozen && DeepEqual(finalState, expectedState)); })(), 'Dispatching an action of type <code>ADD_TO_DO</code> on the Redux store should add a <code>todo</code> item and should NOT mutate state.');"
         }
       ],
       "solutions": [
@@ -995,20 +1089,27 @@
       },
       "tests": [
         {
-          "text": "The Redux store should exist and initialize with a state equal to <code>[Do not mutate state!]</code>.",
-          "testString": "assert((function() { const initialState = store.getState(); return ( Array.isArray(initialState) === true && initialState[0] === 'Do not mutate state!'); })(), 'The Redux store should exist and initialize with a state equal to <code>[Do not mutate state!]</code>.');"
+          "text":
+            "The Redux store should exist and initialize with a state equal to <code>[Do not mutate state!]</code>.",
+          "testString":
+            "assert((function() { const initialState = store.getState(); return ( Array.isArray(initialState) === true && initialState[0] === 'Do not mutate state!'); })(), 'The Redux store should exist and initialize with a state equal to <code>[Do not mutate state!]</code>.');"
         },
         {
-          "text": "<code>addToDo</code> and <code>immutableReducer</code> both should be functions.",
-          "testString": "assert(typeof addToDo === 'function' && typeof immutableReducer === 'function', '<code>addToDo</code> and <code>immutableReducer</code> both should be functions.');"
+          "text":
+            "<code>addToDo</code> and <code>immutableReducer</code> both should be functions.",
+          "testString":
+            "assert(typeof addToDo === 'function' && typeof immutableReducer === 'function', '<code>addToDo</code> and <code>immutableReducer</code> both should be functions.');"
         },
         {
-          "text": "Dispatching an action of type <code>ADD_TO_DO</code> on the Redux store should add a <code>todo</code> item and should NOT mutate state.",
-          "testString": "assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch(addToDo('__TEST__TO__DO__')); const finalState = store.getState(); const expectedState = [ 'Do not mutate state!', '__TEST__TO__DO__' ]; return( isFrozen && DeepEqual(finalState, expectedState)); })(), 'Dispatching an action of type <code>ADD_TO_DO</code> on the Redux store should add a <code>todo</code> item and should NOT mutate state.');"
+          "text":
+            "Dispatching an action of type <code>ADD_TO_DO</code> on the Redux store should add a <code>todo</code> item and should NOT mutate state.",
+          "testString":
+            "assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch(addToDo('__TEST__TO__DO__')); const finalState = store.getState(); const expectedState = [ 'Do not mutate state!', '__TEST__TO__DO__' ]; return( isFrozen && DeepEqual(finalState, expectedState)); })(), 'Dispatching an action of type <code>ADD_TO_DO</code> on the Redux store should add a <code>todo</code> item and should NOT mutate state.');"
         },
         {
           "text": "The spread operator should be used to return new state.",
-          "testString": "getUserInput => assert(getUserInput('index').includes('...state'), 'The spread operator should be used to return new state.');"
+          "testString":
+            "getUserInput => assert(getUserInput('index').includes('...state'), 'The spread operator should be used to return new state.');"
         }
       ],
       "solutions": [
@@ -1059,16 +1160,22 @@
       },
       "tests": [
         {
-          "text": "The Redux store should exist and initialize with a state equal to <code>[0,1,2,3,4,5]</code>",
-          "testString": "assert((function() { const initialState = store.getState(); return (Array.isArray(initialState) === true && DeepEqual(initialState, [0, 1, 2, 3, 4, 5])); })(), 'The Redux store should exist and initialize with a state equal to <code>[0,1,2,3,4,5]</code>');"
+          "text":
+            "The Redux store should exist and initialize with a state equal to <code>[0,1,2,3,4,5]</code>",
+          "testString":
+            "assert((function() { const initialState = store.getState(); return (Array.isArray(initialState) === true && DeepEqual(initialState, [0, 1, 2, 3, 4, 5])); })(), 'The Redux store should exist and initialize with a state equal to <code>[0,1,2,3,4,5]</code>');"
         },
         {
-          "text": "<code>removeItem</code> and <code>immutableReducer</code> both should be functions.",
-          "testString": "assert(typeof removeItem === 'function' && typeof immutableReducer === 'function', '<code>removeItem</code> and <code>immutableReducer</code> both should be functions.');"
+          "text":
+            "<code>removeItem</code> and <code>immutableReducer</code> both should be functions.",
+          "testString":
+            "assert(typeof removeItem === 'function' && typeof immutableReducer === 'function', '<code>removeItem</code> and <code>immutableReducer</code> both should be functions.');"
         },
         {
-          "text": "Dispatching the <code>removeItem</code> action creator should remove items from the state and should NOT mutate state.",
-          "testString": "assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch(removeItem(3)); const state_1 = store.getState(); store.dispatch(removeItem(2)); const state_2 = store.getState(); store.dispatch(removeItem(0)); store.dispatch(removeItem(0)); store.dispatch(removeItem(0)); const state_3 = store.getState(); return isFrozen && DeepEqual(state_1, [0, 1, 2, 4, 5]) && DeepEqual(state_2, [0, 1, 4, 5]) && DeepEqual(state_3, [5]); })(), 'Dispatching the <code>removeItem</code> action creator should remove items from the state and should NOT mutate state.');"
+          "text":
+            "Dispatching the <code>removeItem</code> action creator should remove items from the state and should NOT mutate state.",
+          "testString":
+            "assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch(removeItem(3)); const state_1 = store.getState(); store.dispatch(removeItem(2)); const state_2 = store.getState(); store.dispatch(removeItem(0)); store.dispatch(removeItem(0)); store.dispatch(removeItem(0)); const state_3 = store.getState(); return isFrozen && DeepEqual(state_1, [0, 1, 2, 4, 5]) && DeepEqual(state_2, [0, 1, 4, 5]) && DeepEqual(state_3, [5]); })(), 'Dispatching the <code>removeItem</code> action creator should remove items from the state and should NOT mutate state.');"
         }
       ],
       "solutions": [
@@ -1127,20 +1234,28 @@
       },
       "tests": [
         {
-          "text": "The Redux store should exist and initialize with a state that is equivalent to the <code>defaultState</code> object declared on line 1.",
-          "testString": "assert((function() { const expectedState = { user: 'CamperBot', status: 'offline', friends: '732,982', community: 'freeCodeCamp' }; const initialState = store.getState(); return DeepEqual(expectedState, initialState); })(), 'The Redux store should exist and initialize with a state that is equivalent to the <code>defaultState</code> object declared on line 1.');"
+          "text":
+            "The Redux store should exist and initialize with a state that is equivalent to the <code>defaultState</code> object declared on line 1.",
+          "testString":
+            "assert((function() { const expectedState = { user: 'CamperBot', status: 'offline', friends: '732,982', community: 'freeCodeCamp' }; const initialState = store.getState(); return DeepEqual(expectedState, initialState); })(), 'The Redux store should exist and initialize with a state that is equivalent to the <code>defaultState</code> object declared on line 1.');"
         },
         {
-          "text": "<code>wakeUp</code> and <code>immutableReducer</code> both should be functions.",
-          "testString": "assert(typeof wakeUp === 'function' && typeof immutableReducer === 'function', '<code>wakeUp</code> and <code>immutableReducer</code> both should be functions.');"
+          "text":
+            "<code>wakeUp</code> and <code>immutableReducer</code> both should be functions.",
+          "testString":
+            "assert(typeof wakeUp === 'function' && typeof immutableReducer === 'function', '<code>wakeUp</code> and <code>immutableReducer</code> both should be functions.');"
         },
         {
-          "text": "Dispatching an action of type <code>ONLINE</code> should update the property <code>status</code> in state to <code>online</code> and should NOT mutate state.",
-          "testString": "assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch({type: 'ONLINE'}); const finalState = store.getState(); const expectedState = { user: 'CamperBot', status: 'online', friends: '732,982', community: 'freeCodeCamp' }; return isFrozen && DeepEqual(finalState, expectedState); })(), 'Dispatching an action of type <code>ONLINE</code> should update the property <code>status</code> in state to <code>online</code> and should NOT mutate state.');"
+          "text":
+            "Dispatching an action of type <code>ONLINE</code> should update the property <code>status</code> in state to <code>online</code> and should NOT mutate state.",
+          "testString":
+            "assert((function() { const initialState = store.getState(); const isFrozen = DeepFreeze(initialState); store.dispatch({type: 'ONLINE'}); const finalState = store.getState(); const expectedState = { user: 'CamperBot', status: 'online', friends: '732,982', community: 'freeCodeCamp' }; return isFrozen && DeepEqual(finalState, expectedState); })(), 'Dispatching an action of type <code>ONLINE</code> should update the property <code>status</code> in state to <code>online</code> and should NOT mutate state.');"
         },
         {
-          "text": "<code>Object.assign</code> should be used to return new state.",
-          "testString": "getUserInput => assert(getUserInput('index').includes('Object.assign'), '<code>Object.assign</code> should be used to return new state.');"
+          "text":
+            "<code>Object.assign</code> should be used to return new state.",
+          "testString":
+            "getUserInput => assert(getUserInput('index').includes('Object.assign'), '<code>Object.assign</code> should be used to return new state.');"
         }
       ],
       "solutions": [
@@ -1152,4 +1267,4 @@
       "redux": true
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/challenges/04-data-visualization/data-visualization-with-d3.json b/challenges/04-data-visualization/data-visualization-with-d3.json
index 7eead6f4e..a1dcc56c9 100644
--- a/challenges/04-data-visualization/data-visualization-with-d3.json
+++ b/challenges/04-data-visualization/data-visualization-with-d3.json
@@ -21,35 +21,43 @@
         "The <code>append()</code> method takes an argument for the element you want to add to the document. It appends an HTML node to a selected item, and returns a handle to that node.",
         "The <code>text()</code> method either sets the text of the selected node, or gets the current text. To set the value, you pass a string as an argument inside the parentheses of the method.",
         "Here's an example that selects an unordered list, appends a list item, and adds text:",
-        "<blockquote>d3.select(\"ul\")<br>    .append(\"li\")<br>    .text(\"Very important item\");</blockquote>",
+        "<blockquote>d3.select(\"ul\")<br>&nbsp;&nbsp;.append(\"li\")<br>&nbsp;&nbsp;.text(\"Very important item\");</blockquote>",
         "D3 allows you to chain several methods together with periods to perform a number of actions in a row.",
         "<hr>",
         "Use the <code>select</code> method to select the <code>body</code> tag in the document. Then <code>append</code> an <code>h1</code> tag to it, and add the text \"Learning D3\" into the <code>h1</code> element."
       ],
       "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
           "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), 'Your code should access the <code>d3</code> object.');"
         },
         {
           "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), 'Your code should use the <code>select</code> method.');"
         },
         {
           "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), 'Your code should use the <code>append</code> method.');"
         },
         {
           "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), 'Your code should use the <code>text</code> method.');"
         }
       ],
       "solutions": [],
@@ -95,16 +103,20 @@
       ],
       "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.');"
+          "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.');"
         },
         {
           "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), 'Your code should access the <code>d3</code> object.');"
         },
         {
           "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), 'Your code should use the <code>selectAll</code> method.');"
         }
       ],
       "solutions": [],
@@ -152,7 +164,7 @@
         "A common workflow pattern is to create a new element in the document for each piece of data in the set. D3 has the <code>enter()</code> method for this purpose.",
         "When <code>enter()</code> is combined with the <code>data()</code> method, it looks at the selected elements from the page and compares them to the number of data items in the set. If there are fewer elements than data items, it creates the missing elements.",
         "Here is an example that selects a <code>ul</code> element and creates a new list item based on the number of entries in the array:",
-        "<blockquote>&lt;body&gt;<br>  &lt;ul&gt;&lt;/ul&gt;<br>  &lt;script&gt;<br>    const dataset = [\"a\", \"b\", \"c\"];<br>    d3.select(\"ul\").selectAll(\"li\")<br>      .data(dataset)<br>      .enter()<br>      .append(\"li\")<br>      .text(\"New item\");<br>  &lt;/script&gt;<br>&lt;/body&gt;</blockquote>",
+        "<blockquote>&lt;body&gt;<br>&nbsp;&nbsp;&lt;ul&gt;&lt;/ul&gt;<br>&nbsp;&nbsp;&lt;script&gt;<br>&nbsp;&nbsp;&nbsp;&nbsp;const dataset = [\"a\", \"b\", \"c\"];<br>&nbsp;&nbsp;&nbsp;&nbsp;d3.select(\"ul\").selectAll(\"li\")<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.data(dataset)<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.enter()<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.append(\"li\")<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.text(\"New item\");<br>&nbsp;&nbsp;&lt;/script&gt;<br>&lt;/body&gt;</blockquote>",
         "It may seem confusing to select elements that don't exist yet. This code is telling D3 to first select the <code>ul</code> on the page. Next, select all list items, which returns an empty selection. Then the <code>data()</code> method reviews the dataset and runs the following code three times, once for each item in the array. The <code>enter()</code> method sees there are no <code>li</code> elements on the page, but it needs 3 (one for each piece of data in <code>dataset</code>). New <code>li</code> elements are appended to the <code>ul</code> and have the text \"New item\".",
         "<hr>",
         "Select the <code>body</code> node, then select all <code>h2</code> elements. Have D3 create and append an <code>h2</code> tag for each item in the <code>dataset</code> array. The text in the <code>h2</code> should say \"New Title\". Your code should use the <code>data()</code> and <code>enter()</code> methods."
@@ -160,19 +172,24 @@
       "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, 'Your document should have 9 <code>h2</code> elements.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
           "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), 'Your code should use the <code>data()</code> method.');"
         },
         {
           "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), 'Your code should use the <code>enter()</code> method.');"
         }
       ],
       "solutions": [],
@@ -224,39 +241,49 @@
       "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\", 'The first <code>h2</code> should have the 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\", 'The second <code>h2</code> should have the 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\", 'The third <code>h2</code> should have the 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\", 'The fourth <code>h2</code> should have the 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\", 'The fifth <code>h2</code> should have the 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\", 'The sixth <code>h2</code> should have the 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\".');"
+          "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\".');"
         },
         {
           "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\", 'The eighth <code>h2</code> should have the 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\", 'The ninth <code>h2</code> should have the text \"9 USD\".');"
         }
       ],
       "solutions": [],
@@ -308,12 +335,15 @@
       ],
       "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.');"
+          "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.');"
         },
         {
           "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), 'Your code should use the <code>style()</code> method.');"
         }
       ],
       "solutions": [],
@@ -360,7 +390,7 @@
       "description": [
         "D3 is about visualization and presentation of data. It's likely you'll want to change the styling of elements based on the data. You can use a callback function in the <code>style()</code> method to change the styling for different elements.",
         "For example, you may want to color a data point blue if has a value less than 20, and red otherwise. You can use a callback function in the <code>style()</code> method and include the conditional logic. The callback function uses the <code>d</code> parameter to represent the data point:",
-        "<blockquote>selection.style(\"color\", (d) => {<br>  /* Logic that returns the color based on a condition */<br>});</blockquote>",
+        "<blockquote>selection.style(\"color\", (d) => {<br>&nbsp;&nbsp;/* Logic that returns the color based on a condition */<br>});</blockquote>",
         "The <code>style()</code> method is not limited to setting the <code>color</code> - it can be used with other CSS properties as well.",
         "<hr>",
         "Add the <code>style()</code> method to the code in the editor to set the <code>color</code> of the <code>h2</code> elements conditionally. Write the callback function so if the data value is less than 20, it returns \"red\", otherwise it returns \"green\".",
@@ -368,40 +398,58 @@
       ],
       "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         }
       ],
       "solutions": [],
@@ -454,12 +502,15 @@
       ],
       "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>.');"
+          "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>.');"
         },
         {
           "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), 'Your code should use the <code>attr()</code> method.');"
         }
       ],
       "solutions": [],
@@ -521,40 +572,58 @@
       ],
       "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         }
       ],
       "solutions": [],
@@ -616,40 +685,58 @@
       ],
       "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         }
       ],
       "solutions": [],
@@ -715,15 +802,20 @@
       "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, 'Your document should have 1 <code>svg</code> element.');"
         },
         {
-          "text": "The <code>svg</code> element should have a <code>width</code> attribute set to 500.",
-          "testString": "assert($('svg').attr('width') == '500', 'The <code>svg</code> element should have a <code>width</code> attribute set to 500.');"
+          "text":
+            "The <code>svg</code> element should have a <code>width</code> attribute set to 500.",
+          "testString":
+            "assert($('svg').attr('width') == '500', 'The <code>svg</code> element should have a <code>width</code> attribute set to 500.');"
         },
         {
-          "text": "The <code>svg</code> element should have a <code>height</code> attribute set to 100.",
-          "testString": "assert($('svg').attr('height') == '100', 'The <code>svg</code> element should have a <code>height</code> attribute set to 100.');"
+          "text":
+            "The <code>svg</code> element should have a <code>height</code> attribute set to 100.",
+          "testString":
+            "assert($('svg').attr('height') == '100', 'The <code>svg</code> element should have a <code>height</code> attribute set to 100.');"
         }
       ],
       "solutions": [],
@@ -783,23 +875,32 @@
       "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, 'Your document should have 1 <code>rect</code> element.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         }
       ],
       "solutions": [],
@@ -848,7 +949,7 @@
       "description": [
         "The last challenge added only one rectangle to the <code>svg</code> element to represent a bar. Here, you'll combine what you've learned so far about <code>data()</code>, <code>enter()</code>, and SVG shapes to create and append a rectangle for each data point in <code>dataset</code>.",
         "A previous challenge showed the format for how to create and append a <code>div</code> for each item in <code>dataset</code>:",
-        "<blockquote>d3.select(\"body\").selectAll(\"div\")<br>  .data(dataset)<br>  .enter()<br>  .append(\"div\")</blockquote>",
+        "<blockquote>d3.select(\"body\").selectAll(\"div\")<br>&nbsp;&nbsp;.data(dataset)<br>&nbsp;&nbsp;.enter()<br>&nbsp;&nbsp;.append(\"div\")</blockquote>",
         "There are a few differences working with <code>rect</code> elements instead of <code>divs</code>. The <code>rects</code> must be appended to an <code>svg</code> element, not directly to the <code>body</code>. Also, you need to tell D3 where to place each <code>rect</code> within the <code>svg</code> area. The bar placement will be covered in the next challenge.",
         "<hr>",
         "Use the <code>data()</code>, <code>enter()</code>, and <code>append()</code> methods to create and append a <code>rect</code> for each item in <code>dataset</code>. The bars should display all on top of each other, this will be fixed in the next challenge."
@@ -856,19 +957,23 @@
       "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, 'Your document should have 9 <code>rect</code> elements.');"
         },
         {
           "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), 'Your code should use the <code>data()</code> method.');"
         },
         {
           "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), 'Your code should use the <code>enter()</code> method.');"
         },
         {
           "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), 'Your code should use the <code>append()</code> method.');"
         }
       ],
       "solutions": [],
@@ -925,7 +1030,7 @@
         "The placement of a rectangle is handled by the <code>x</code> and <code>y</code> attributes. They tell D3 where to start drawing the shape in the <code>svg</code> area. The last challenge set them each to 0, so every bar was placed in the upper-left corner.",
         "For a bar chart, all of the bars should sit on the same vertical level, which means the <code>y</code> value stays the same (at 0) for all bars. The <code>x</code> value, however, needs to change as you add new bars. Remember that larger <code>x</code> values push items farther to the right. As you go through the array elements in <code>dataset</code>, the x value should increase.",
         "The <code>attr()</code> method in D3 accepts a callback function to dynamically set that attribute. The callback function takes two arguments, one for the data point itself (usually <code>d</code>) and one for the index of the data point in the array. The second argument for the index is optional. Here's the format:",
-        "<blockquote>selection.attr(\"property\", (d, i) => {<br>  /* <br>  * d is the data point value<br>  * i is the index of the data point in the array<br>  */<br>})</blockquote>",
+        "<blockquote>selection.attr(\"property\", (d, i) => {<br>&nbsp;&nbsp;/* <br>&nbsp;&nbsp;* d is the data point value<br>&nbsp;&nbsp;* i is the index of the data point in the array<br>&nbsp;&nbsp;*/<br>})</blockquote>",
         "It's important to note that you do NOT need to write a <code>for</code> loop or use <code>forEach()</code> to iterate over the items in the data set. Recall that the <code>data()</code> method parses the data set, and any method that's chained after <code>data()</code> is run once for each item in the data set.",
         "<hr>",
         "Change the <code>x</code> attribute callback function so it returns the index times 30.",
@@ -933,40 +1038,58 @@
       ],
       "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         }
       ],
       "solutions": [],
@@ -1024,47 +1147,65 @@
       ],
       "description": [
         "The height of each bar can be set to the value of the data point in the array, similar to how the <code>x</code> value was set dynamically.",
-        "<blockquote>selection.attr(\"property\", (d, i) => {<br>  /* <br>  * d is the data point value<br>  * i is the index of the data point in the array<br>  */<br>})</blockquote>",
+        "<blockquote>selection.attr(\"property\", (d, i) => {<br>&nbsp;&nbsp;/* <br>&nbsp;&nbsp;* d is the data point value<br>&nbsp;&nbsp;* i is the index of the data point in the array<br>&nbsp;&nbsp;*/<br>})</blockquote>",
         "<hr>",
         "Change the callback function for the <code>height</code> attribute to return the data value times 3.",
         "<strong>Note</strong><br>Remember that multiplying all data points by the same constant scales the data (like zooming in). It helps to see the differences between bar values in this example."
       ],
       "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         }
       ],
       "solutions": [],
@@ -1132,40 +1273,58 @@
       ],
       "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         }
       ],
       "solutions": [],
@@ -1230,7 +1389,8 @@
       "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)\", 'The bars should all have a <code>fill</code> color of navy.');"
         }
       ],
       "solutions": [],
@@ -1295,40 +1455,58 @@
       ],
       "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         }
       ],
       "solutions": [],
@@ -1396,12 +1574,16 @@
       ],
       "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         }
       ],
       "solutions": [],
@@ -1473,8 +1655,10 @@
       ],
       "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>.');"
+          "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>.');"
         }
       ],
       "solutions": [],
@@ -1553,43 +1737,62 @@
       "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, 'Your code should have 9 <code>title</code> elements.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         }
       ],
       "solutions": [],
@@ -1669,7 +1872,8 @@
       "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, 'Your code should have 10 <code>circle</code> elements.');"
         }
       ],
       "solutions": [],
@@ -1741,47 +1945,68 @@
       "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, 'Your code should have 10 <code>circle</code> elements.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         }
       ],
       "solutions": [],
@@ -1857,47 +2082,68 @@
       "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, 'Your code should have 10 <code>text</code> elements.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         }
       ],
       "solutions": [],
@@ -1982,15 +2228,19 @@
       "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', 'The text in the <code>h2</code> should be 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), 'Your code should use the <code>scaleLinear()</code> method.');"
         },
         {
-          "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.');"
+          "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.');"
         }
       ],
       "solutions": [],
@@ -2047,23 +2297,30 @@
       "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), 'Your code should use the <code>domain()</code> method.');"
         },
         {
-          "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>.');"
+          "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>.');"
         },
         {
           "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), 'Your code should use the <code>range()</code> method.');"
         },
         {
-          "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>.');"
+          "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>.');"
         },
         {
           "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', 'The text in the <code>h2</code> should be -102.');"
         }
       ],
       "solutions": [],
@@ -2099,7 +2356,8 @@
     },
     {
       "id": "587d7fac367417b2b2512bdc",
-      "title": "Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset",
+      "title":
+        "Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset",
       "required": [
         {
           "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
@@ -2121,11 +2379,13 @@
       "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', 'The text in the <code>h2</code> should be 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.')"
+          "testString":
+            "assert(code.match(/\\.max/g), 'Your code should use the <code>max()</code> method.')"
         }
       ],
       "solutions": [],
@@ -2172,7 +2432,7 @@
         "Given a complex data set, one priority is to set the scale so the visualization fits the SVG container's width and height. You want all the data plotted inside the SVG canvas so it's visible on the web page.",
         "The example below sets the x-axis scale for scatter plot data. The <code>domain()</code> method passes information to the scale about the raw data values for the plot. The <code>range()</code> method gives it information about the actual space on the web page for the visualization.",
         "In the example, the domain goes from 0 to the maximum in the set. It uses the <code>max()</code> method with a callback function based on the x values in the arrays. The range uses the SVG canvas' width (<code>w</code>), but it includes some padding, too. This puts space between the scatter plot dots and the edge of the SVG canvas.",
-        "<blockquote>const dataset = [<br>                  [ 34,    78 ],<br>                  [ 109,   280 ],<br>                  [ 310,   120 ],<br>                  [ 79,    411 ],<br>                  [ 420,   220 ],<br>                  [ 233,   145 ],<br>                  [ 333,   96 ],<br>                  [ 222,   333 ],<br>                  [ 78,    320 ],<br>                  [ 21,    123 ]<br>                ];<br>const w = 500;<br>const h = 500;<br><br>// Padding between the SVG canvas boundary and the plot<br>const padding = 30;<br>const xScale = d3.scaleLinear()<br>                 .domain([0, d3.max(dataset, (d) => d[0])])<br>                 .range([padding, w - padding]);</blockquote>",
+        "<blockquote>const dataset = [<br>&nbsp;&nbsp;[ 34,    78 ],<br>&nbsp;&nbsp;[ 109,   280 ],<br>&nbsp;&nbsp;[ 310,   120 ],<br>&nbsp;&nbsp;[ 79,    411 ],<br>&nbsp;&nbsp;[ 420,   220 ],<br>&nbsp;&nbsp;[ 233,   145 ],<br>&nbsp;&nbsp;[ 333,   96 ],<br>&nbsp;&nbsp;[ 222,   333 ],<br>&nbsp;&nbsp;[ 78,    320 ],<br>&nbsp;&nbsp;[ 21,    123 ]<br>];<br>const w = 500;<br>const h = 500;<br><br>// Padding between the SVG canvas boundary and the plot<br>const padding = 30;<br>const xScale = d3.scaleLinear()<br>&nbsp;&nbsp;.domain([0, d3.max(dataset, (d) => d[0])])<br>&nbsp;&nbsp;.range([padding, w - padding]);</blockquote>",
         "The padding may be confusing at first. Picture the x-axis as a horizontal line from 0 to 500 (the width value for the SVG canvas). Including the padding in the <code>range()</code> method forces the plot to start at 30 along that line (instead of 0), and end at 470 (instead of 500).",
         "<hr>",
         "Use the <code>yScale</code> variable to create a linear y-axis scale. The domain should start at zero and go to the maximum y value in the set. The range should use the SVG height (<code>h</code>) and include padding.",
@@ -2181,15 +2441,20 @@
       "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', 'The text in the <code>h2</code> should be 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>.');"
+          "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>.');"
         },
         {
-          "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>.');"
+          "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>.');"
         }
       ],
       "solutions": [],
@@ -2260,7 +2525,7 @@
       "description": [
         "With the scales set up, it's time to map the scatter plot again. The scales are like processing functions that turn the x and y raw data into values that fit and render correctly on the SVG canvas. They keep the data within the screen's plotting area.",
         "You set the coordinate attribute values for an SVG shape with the scaling function. This includes <code>x</code> and <code>y</code> attributes for <code>rect</code> or <code>text</code> elements, or <code>cx</code> and <code>cy</code> for <code>circles</code>. Here's an example:",
-        "<blockquote>shape<br>  .attr(\"x\", (d) => xScale(d[0]))</blockquote>",
+        "<blockquote>shape<br>&nbsp;&nbsp;.attr(\"x\", (d) => xScale(d[0]))</blockquote>",
         "Scales set shape coordinate attributes to place the data points onto the SVG canvas. You don't need to apply scales when you display the actual data value, for example, in the <code>text()</code> method for a tooltip or label.",
         "<hr>",
         "Use <code>xScale</code> and <code>yScale</code> to position both the <code>circle</code> and <code>text</code> shapes onto the SVG canvas. For the <code>circles</code>, apply the scales to set the <code>cx</code> and <code>cy</code> attributes. Give them a radius of 5 units, too.",
@@ -2269,91 +2534,133 @@
       "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, 'Your code should have 10 <code>circle</code> elements.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
           "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, 'Your code should have 10 <code>text</code> elements.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         }
       ],
       "solutions": [],
@@ -2444,7 +2751,7 @@
         "Unlike <code>rect</code>, <code>circle</code>, and <code>text</code>, an axis is just a straight line when it's rendered. Because it is a simple shape, using <code>g</code> works.",
         "The last step is to apply a <code>transform</code> attribute to position the axis on the SVG canvas in the right place. Otherwise, the line would render along the border of SVG canvas and wouldn't be visible.",
         "SVG supports different types of <code>transforms</code>, but positioning an axis needs <code>translate</code>. When it's applied to the <code>g</code> element, it moves the whole group over and down by the given amounts. Here's an example:",
-        "<blockquote>const xAxis = d3.axisBottom(xScale);<br><br>svg.append(\"g\")<br>   .attr(\"transform\", \"translate(0, \" + (h - padding) + \")\")<br>   .call(xAxis);</blockquote>",
+        "<blockquote>const xAxis = d3.axisBottom(xScale);<br><br>svg.append(\"g\")<br>&nbsp;&nbsp; .attr(\"transform\", \"translate(0, \" + (h - padding) + \")\")<br>&nbsp;&nbsp; .call(xAxis);</blockquote>",
         "The above code places the x-axis at the bottom of the SVG canvas. Then it's passed as an argument to the <code>call()</code> method.",
         "The y-axis works is the same way, except the <code>translate</code> argument is in the form (x, 0). Because <code>translate</code> is a string in the <code>attr()</code> method above, you can use concatenation to include variable values for its arguments.",
         "<hr>",
@@ -2452,16 +2759,21 @@
       ],
       "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.');"
+          "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.');"
         },
         {
-          "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(1).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).');"
+          "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(1).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).');"
         },
         {
           "text": "Your code should call the <code>yAxis</code>.",
-          "testString": "assert(code.match(/\\.call\\(yAxis\\)/g), 'Your code should call the <code>yAxis</code>.');"
+          "testString":
+            "assert(code.match(/\\.call\\(yAxis\\)/g), 'Your code should call the <code>yAxis</code>.');"
         }
       ],
       "solutions": [],
@@ -2544,4 +2856,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/challenges/04-data-visualization/json-apis-and-ajax.json b/challenges/04-data-visualization/json-apis-and-ajax.json
index 3d96f97dd..37dfe43c2 100644
--- a/challenges/04-data-visualization/json-apis-and-ajax.json
+++ b/challenges/04-data-visualization/json-apis-and-ajax.json
@@ -5,7 +5,8 @@
   "helpRoom": "Help",
   "required": [
     {
-      "link": "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"
+      "link":
+        "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"
     }
   ],
   "challenges": [
@@ -22,12 +23,15 @@
       ],
       "tests": [
         {
-          "text": "Your code should use the <code>document.getElementById</code> method to select the <code>getMessage</code> element.",
-          "testString": "assert(code.match(/document\\.getElementById\\(\\s*?('|\")getMessage\\1\\s*?\\)/g), 'Your code should use the <code>document.getElementById</code> method to select the <code>getMessage</code> element.');"
+          "text":
+            "Your code should use the <code>document.getElementById</code> method to select the <code>getMessage</code> element.",
+          "testString":
+            "assert(code.match(/document\\.getElementById\\(\\s*?('|\")getMessage\\1\\s*?\\)/g), 'Your code should use the <code>document.getElementById</code> method to select the <code>getMessage</code> element.');"
         },
         {
           "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', 'Your code should add an <code>onclick</code> event handler.');"
         }
       ],
       "solutions": [],
@@ -103,8 +107,10 @@
       ],
       "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>innerHTML</code> to the given string.",
-          "testString": "assert(code.match(/document\\.getElementsByClassName\\(\\s*?('|\")message\\1\\s*?\\)\\[0\\]\\.innerHTML\\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>innerHTML</code> to the given string.');"
+          "text":
+            "Your code should use the <code>document.getElementsByClassName</code> method to select the element with class <code>message</code> and set its <code>innerHTML</code> to the given string.",
+          "testString":
+            "assert(code.match(/document\\.getElementsByClassName\\(\\s*?('|\")message\\1\\s*?\\)\\[0\\]\\.innerHTML\\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>innerHTML</code> to the given string.');"
         }
       ],
       "solutions": [],
@@ -180,7 +186,7 @@
         "These properties and their values are often referred to as \"key-value pairs\".",
         "However, JSON transmitted by APIs are sent as <code>bytes</code>, and your application receives it as a <code>string</code>. These can be converted into JavaScript objects, but they are not JavaScript objects by default. The <code>JSON.parse</code> method parses the string and constructs the JavaScript object described by it.",
         "You can request the JSON from freeCodeCamp's Cat Photo API. Here's the code you can put in your click event to do this:",
-        "<blockquote>req=new XMLHttpRequest();<br>req.open(\"GET\",'/json/cats.json',true);<br>req.send();<br>req.onload=function(){<br>  json=JSON.parse(req.responseText);<br>  document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json);<br>};</blockquote>",
+        "<blockquote>req=new XMLHttpRequest();<br>req.open(\"GET\",'/json/cats.json',true);<br>req.send();<br>req.onload=function(){<br>&nbsp;&nbsp;json=JSON.parse(req.responseText);<br>&nbsp;&nbsp;document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json);<br>};</blockquote>",
         "Here's a review of what each piece is doing. The JavaScript <code>XMLHttpRequest</code> object has a number of properties and methods that are used to transfer data. First, an instance of the <code>XMLHttpRequest</code> object is created and saved in the <code>req</code> variable.",
         "Next, the <code>open</code> method initializes a request - this example is requesting data from an API, therefore is a \"GET\" request. The second argument for <code>open</code> is the URL of the API you are requesting data from. The third argument is a Boolean value where <code>true</code> makes it an asynchronous request.",
         "The <code>send</code> method sends the request. Finally, the <code>onload</code> event handler parses the returned data and applies the <code>JSON.stringify</code> method to convert the JavaScript object into a string. This string is then inserted as the message text.",
@@ -190,27 +196,38 @@
       "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), 'Your code should create a new <code>XMLHttpRequest</code>.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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*?{/g), 'Your code should have an <code>onload</code> event handler set to a function.');"
+          "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*?{/g), 'Your code should have an <code>onload</code> event handler set to a function.');"
         },
         {
-          "text": "Your code should use the <code>JSON.parse</code> method to parse the <code>responseText</code>.",
-          "testString": "assert(code.match(/JSON\\.parse\\(.*\\.responseText\\)/g), 'Your code should use the <code>JSON.parse</code> method to parse the <code>responseText</code>.');"
+          "text":
+            "Your code should use the <code>JSON.parse</code> method to parse the <code>responseText</code>.",
+          "testString":
+            "assert(code.match(/JSON\\.parse\\(.*\\.responseText\\)/g), 'Your code should use the <code>JSON.parse</code> method to parse the <code>responseText</code>.');"
         },
         {
-          "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\\.getElementsByClassName\\(\\s*?('|\")message\\1\\s*?\\)\\[0\\]\\.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.');"
+          "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\\.getElementsByClassName\\(\\s*?('|\")message\\1\\s*?\\)\\[0\\]\\.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.');"
         }
       ],
       "solutions": [],
@@ -294,8 +311,10 @@
       ],
       "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.');"
+          "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.');"
         }
       ],
       "solutions": [],
@@ -376,24 +395,30 @@
         "First, declare an html variable with <code>var html = \"\";</code>.",
         "Then, loop through the JSON, adding HTML to the variable that wraps the key names in <code>strong</code> tags, followed by the value. When the loop is finished, you render it.",
         "Here's the code that does this:",
-        "<blockquote>json.forEach(function(val) {</br>  var keys = Object.keys(val);</br>  html += \"&lt;div class = 'cat'&gt;\";</br>  keys.forEach(function(key) {</br>    html += \"&lt;strong&gt;\" + key + \"&lt;/strong&gt;: \" + val[key] + \"&lt;br&gt;\";</br>  });</br>  html += \"&lt;/div&gt;&lt;br&gt;\";</br>});</blockquote>",
+        "<blockquote>json.forEach(function(val) {</br>&nbsp;&nbsp;var keys = Object.keys(val);</br>&nbsp;&nbsp;html += \"&lt;div class = 'cat'&gt;\";</br>&nbsp;&nbsp;keys.forEach(function(key) {</br>&nbsp;&nbsp;&nbsp;&nbsp;html += \"&lt;strong&gt;\" + key + \"&lt;/strong&gt;: \" + val[key] + \"&lt;br&gt;\";</br>&nbsp;&nbsp;});</br>&nbsp;&nbsp;html += \"&lt;/div&gt;&lt;br&gt;\";</br>});</blockquote>",
         "<hr>",
         "Add a <code>forEach</code> method to loop over the JSON data and create the HTML elements to display it.",
         "Here is some example JSON",
-        "<blockquote>[</br>  {</br>    \"id\":0,</br>    \"imageLink\":\"https://s3.amazonaws.com/freecodecamp/funny-cat.jpg\",</br>    \"altText\":\"A white cat wearing a green helmet shaped melon on its head. \",</br>    \"codeNames\":[</br>      \"Juggernaut\",</br>      \"Mrs. Wallace\",</br>      \"Buttercup\"</br>    ]</br>  }</br>]</blockquote>"
+        "<blockquote>[</br>&nbsp;&nbsp;{</br>&nbsp;&nbsp;&nbsp;&nbsp;\"id\":0,</br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"imageLink\":\"https://s3.amazonaws.com/freecodecamp/funny-cat.jpg\",</br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"altText\":\"A white cat wearing a green helmet shaped melon on its head. \",</br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\"codeNames\":[ \"Juggernaut\", \"Mrs. Wallace\", \"Buttercup\"</br>&nbsp;&nbsp;&nbsp;&nbsp;]</br>&nbsp;&nbsp;}</br>]</blockquote>"
       ],
       "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');"
+          "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');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         }
       ],
       "solutions": [],
@@ -480,8 +505,10 @@
       ],
       "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.');"
+          "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.');"
         }
       ],
       "solutions": [],
@@ -565,14 +592,15 @@
         "If you don't want to render every cat photo you get from the freeCodeCamp Cat Photo API, you can pre-filter the JSON before looping through it.",
         "Given that the JSON data is stored in an array, you can use the <code>filter</code> method to filter out the cat whose \"id\" key has a value of 1.",
         "Here's the code to do this:",
-        "<blockquote>json = json.filter(function(val) {<br>  return (val.id !== 1);<br>});</blockquote>",
+        "<blockquote>json = json.filter(function(val) {<br>&nbsp;&nbsp;return (val.id !== 1);<br>});</blockquote>",
         "<hr>",
         "Add code to <code>filter</code> the json data to remove the cat with the \"id\" value of 1."
       ],
       "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), 'Your code should use the <code>filter</code> method.');"
         }
       ],
       "solutions": [],
@@ -661,27 +689,35 @@
         "You will see a prompt to allow or block this site from knowing your current location. The challenge can be completed either way, as long as the code is correct.",
         "By selecting allow, you will see the text on the output phone change to your latitude and longitude.",
         "Here's code that does this:",
-        "<blockquote>if (navigator.geolocation){<br>  navigator.geolocation.getCurrentPosition(function(position) {<br>    document.getElementById('data').innerHTML=\"latitude: \"+ position.coords.latitude +  \"&lt;br&gt;longitude: \" +  position.coords.longitude;<br>  });<br>}</blockquote>",
+        "<blockquote>if (navigator.geolocation){<br>&nbsp;&nbsp;navigator.geolocation.getCurrentPosition(function(position) {<br>&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById('data').innerHTML=\"latitude: \"+ position.coords.latitude +  \"&lt;br&gt;longitude: \" +  position.coords.longitude;<br>&nbsp;&nbsp;});<br>}</blockquote>",
         "First, it checks if the <code>navigator.geolocation</code> object exists. If it does, the <code>getCurrentPosition</code> method on that object is called, which initiates an asynchronous request for the user's position. If the request is successful, the callback function in the method runs. This function accesses the <code>position</code> object's values for latitude and longitude using dot notation and updates the HTML.",
         "<hr>",
         "Add the example code inside the <code>script</code> tags to check a user's current location and insert it into the HTML."
       ],
       "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "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.');"
+          "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.');"
         }
       ],
       "solutions": [],
@@ -717,7 +753,7 @@
       "description": [
         "In the previous examples, you received data from an external resource. You can also send data to an external resource, as long as that resource supports AJAX requests and you know the URL.",
         "JavaScript's <code>XMLHttpRequest</code> method is also used to post data to a server. Here's an example:",
-        "<blockquote>req=new XMLHttpRequest();<br>req.open(\"POST\",url,true);<br>req.setRequestHeader('Content-Type','text/plain');<br>req.onreadystatechange=function(){<br>  if(req.readyState==4 && req.status==200){<br>    document.getElementsByClassName('message')[0].innerHTML=req.responseText;<br>  }<br>};<br>req.send(userName);</blockquote>",
+        "<blockquote>req=new XMLHttpRequest();<br>req.open(\"POST\",url,true);<br>req.setRequestHeader('Content-Type','text/plain');<br>req.onreadystatechange=function(){<br>&nbsp;&nbsp;if(req.readyState==4 && req.status==200){<br>&nbsp;&nbsp;&nbsp;&nbsp;document.getElementsByClassName('message')[0].innerHTML=req.responseText;<br>&nbsp;&nbsp;}<br>};<br>req.send(userName);</blockquote>",
         "You've seen several of these methods before. Here the <code>open</code> method initializes the request as a \"POST\" to the given URL of the external resource, and uses the <code>true</code> Boolean to make it asynchronous.",
         "The <code>setRequestHeader</code> method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the <code>open</code> method, but before the <code>send</code> method. The two parameters are the name of the header and the value to set as the body of that header.",
         "Next, the <code>onreadystatechange</code> event listener handles a change in the state of the request. A <code>readyState</code> of 4 means the operation is complete, and a <code>status</code> of 200 means it was a successful request. The document's HTML can be updated.",
@@ -728,27 +764,37 @@
       "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), 'Your code should create a new <code>XMLHttpRequest</code>.');"
         },
         {
-          "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.');"
+          "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.');"
         },
         {
-          "text": "Your code should use the <code>setRequestHeader</code> method.",
-          "testString": "assert(code.match(/\\.setRequestHeader\\(\\s*?('|\")Content-Type\\1\\s*?,\\s*?('|\")text\\/plain\\2\\s*?\\)/g), 'Your code should use the <code>setRequestHeader</code> method.');"
+          "text":
+            "Your code should use the <code>setRequestHeader</code> method.",
+          "testString":
+            "assert(code.match(/\\.setRequestHeader\\(\\s*?('|\")Content-Type\\1\\s*?,\\s*?('|\")text\\/plain\\2\\s*?\\)/g), 'Your code should use the <code>setRequestHeader</code> method.');"
         },
         {
-          "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 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 inner HTML to the <code>responseText</code>.",
-          "testString": "assert(code.match(/document\\.getElementsByClassName\\(\\s*?('|\")message\\1\\s*?\\)\\[0\\]\\.innerHTML\\s*?=\\s*?.+?\\.responseText/g), 'Your code should get the element with class <code>message</code> and change its inner HTML to the <code>responseText</code>.');"
+          "text":
+            "Your code should get the element with class <code>message</code> and change its inner HTML to the <code>responseText</code>.",
+          "testString":
+            "assert(code.match(/document\\.getElementsByClassName\\(\\s*?('|\")message\\1\\s*?\\)\\[0\\]\\.innerHTML\\s*?=\\s*?.+?\\.responseText/g), 'Your code should get the element with class <code>message</code> and change its inner HTML to the <code>responseText</code>.');"
         },
         {
           "text": "Your code should use the <code>send</code> method.",
-          "testString": "assert(code.match(/\\.send\\(\\s*?userName\\s*?\\)/g), 'Your code should use the <code>send</code> method.');"
+          "testString":
+            "assert(code.match(/\\.send\\(\\s*?userName\\s*?\\)/g), 'Your code should use the <code>send</code> method.');"
         }
       ],
       "solutions": [],
@@ -819,4 +865,4 @@
       }
     }
   ]
-}
\ No newline at end of file
+}