fix: blockquote-formatting-in-challenges (#17590)

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 @@
       }
     }
   ]
-}
+}