Updated simple challenges for colorblinds (#15602)

* Update Challenge for color-blindness 

To do : Translate for Ru, Es and pt-br
Done : Corrected the challenge + translation in German done.

* Corrected color for color-blindness in simple challenges

To do : Translate in ru, pt-br and es
Done: code correction + de translation

* Fix a bug and update some translations

challenges/01-responsive-web-design/basic-css.json

@@ -1786,10 +1786,10 @@
         "You may have already noticed this, but all HTML elements are essentially little rectangles.",
         "Three important properties control the space that surrounds each HTML element: <code>padding</code>, <code>margin</code>, and <code>border</code>.",
         "An element's <code>padding</code> controls the amount of space between the element's content and its <code>border</code>.",
-        "Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more <code>padding</code> than the green box.",
-        "When you increase the green box's <code>padding</code>, it will increase the distance between the text <code>padding</code> and the border around it.",
+        "Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has more <code>padding</code> than the blue box.",
+        "When you increase the blue box's <code>padding</code>, it will increase the distance between the text <code>padding</code> and the border around it.",
         "<hr>",
-        "Change the <code>padding</code> of your green box to match that of your red box."
+        "Change the <code>padding</code> of your blue box to match that of your red box."
       ],
       "challengeSeed": [
         "<style>",
@@ -1815,8 +1815,8 @@
         "    padding: 20px;",
         "  }",
         "",
-        "  .green-box {",
-        "    background-color: green;",
+        "  .blue-box {",
+        "    background-color: blue;",
         "    padding: 10px;",
         "  }",
         "</style>",
@@ -1824,11 +1824,11 @@
         "",
         "<div class=\"box yellow-box\">",
         "  <h5 class=\"box red-box\">padding</h5>",
-        "  <h5 class=\"box green-box\">padding</h5>",
+        "  <h5 class=\"box blue-box\">padding</h5>",
         "</div>"
       ],
       "tests": [
-        "assert($(\".green-box\").css(\"padding-top\") === \"20px\", 'message: Your <code>green-box</code> class should give elements <code>20px</code> of <code>padding</code>.');"
+        "assert($(\".blue-box\").css(\"padding-top\") === \"20px\", 'message: Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.');"
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -1840,9 +1840,9 @@
             "Du hast vielleicht schon bemerkt, dass alle HTML Elemente im Prinzip kleine Rechtecke sind.",
             "Drei wichtige CSS-Eigenschaften beeinflussen den Platz den jedes HTML Element umgibt: <code>padding</code>, <code>margin</code> und <code>border</code>.",
             "<code>padding</code> kontrolliert den Raum oder Abstand zwischen dem Inhalt eines Elements und dessen Rahmen – <code>border</code>",
-            "Wir sehen in diesem Beispiel, dass sich die grüne Box und die rote Box innerhalb der gelben Box befinden. Beachte, dass die rote Box mehr <code>padding</code> hat als die grüne Box.",
+            "Wir sehen in diesem Beispiel, dass sich die blaue Box und die rote Box innerhalb der gelben Box befinden. Beachte, dass die rote Box mehr <code>padding</code> hat als die blaue Box.",
             "<hr>",
-            "Ändere das <code>padding</code> der grünen Box um es an die rote Box anzugleichen."
+            "Ändere das <code>padding</code> der blauen Box um es an die rote Box anzugleichen."
           ]
         },
         "es": {
@@ -1891,10 +1891,10 @@
       "title": "Adjust the Margin of an Element",
       "description": [
         "An element's <code>margin</code> controls the amount of space between an element's <code>border</code> and surrounding elements.",
-        "Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more <code>margin</code> than the green box, making it appear smaller.",
-        "When you increase the green box's <code>margin</code>, it will increase the distance between its border and surrounding elements.",
+        "Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has more <code>margin</code> than the blue box, making it appear smaller.",
+        "When you increase the blue box's <code>margin</code>, it will increase the distance between its border and surrounding elements.",
         "<hr>",
-        "Change the <code>margin</code> of the green box to match that of the red box."
+        "Change the <code>margin</code> of the blue box to match that of the red box."
       ],
       "challengeSeed": [
         "<style>",
@@ -1921,8 +1921,8 @@
         "    margin: 20px;",
         "  }",
         "",
-        "  .green-box {",
-        "    background-color: green;",
+        "  .blue-box {",
+        "    background-color: blue;",
         "    padding: 20px;",
         "    margin: 10px;",
         "  }",
@@ -1931,11 +1931,11 @@
         "",
         "<div class=\"box yellow-box\">",
         "  <h5 class=\"box red-box\">padding</h5>",
-        "  <h5 class=\"box green-box\">padding</h5>",
+        "  <h5 class=\"box blue-box\">padding</h5>",
         "</div>"
       ],
       "tests": [
-        "assert($(\".green-box\").css(\"margin-top\") === \"20px\", 'message: Your <code>green-box</code> class should give elements <code>20px</code> of <code>margin</code>.');"
+        "assert($(\".blue-box\").css(\"margin-top\") === \"20px\", 'message: Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.');"
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -1944,10 +1944,10 @@
           "title": "Passe den Außenabstand eines Elements an",
           "description": [
             "<code>margin</code> kontrolliert den Abstand zwischen dem Rahmen - <code>border</code> - eines Elements und den benachbarten Elementen.",
-            "In diesem Beispiel sehen wir die grüne und die rote Box die sich beide innerhalb der gelben Box befinden. Beachte, dass die rote Box mehr <code>margin</code> aufweist als die grüne Box, wodurch sie kleiner wirkt.",
-            "Wenn du den Außenabstand – <code>margin</code> – der grünen Box erhöhst, wird sich der Abstand zwischen ihrem Rahmen und den benachbarten Elementen vergrößern.",
+            "In diesem Beispiel sehen wir die blaue und die rote Box die sich beide innerhalb der gelben Box befinden. Beachte, dass die rote Box mehr <code>margin</code> aufweist als die blaue Box, wodurch sie kleiner wirkt.",
+            "Wenn du den Außenabstand – <code>margin</code> – der blauen Box erhöhst, wird sich der Abstand zwischen ihrem Rahmen und den benachbarten Elementen vergrößern.",
             "<hr>",
-            "Gleiche den Außenabstand – <code>margin</code> der grünen Box dem der roten Box an."
+            "Gleiche den Außenabstand – <code>margin</code> der blauen Box dem der roten Box an."
           ]
         },
         "es": {
@@ -1990,7 +1990,7 @@
         "If you set an element's <code>margin</code> to a negative value, the element will grow larger.",
         "<hr>",
         "Try to set the <code>margin</code> to a negative value like the one for the red box.",
-        "Change the <code>margin</code> of the green box to <code>-15px</code>, so it fills the entire horizontal width of the yellow box around it."
+        "Change the <code>margin</code> of the blue box to <code>-15px</code>, so it fills the entire horizontal width of the yellow box around it."
       ],
       "challengeSeed": [
         "<style>",
@@ -2017,8 +2017,8 @@
         "    margin: -15px;",
         "  }",
         "",
-        "  .green-box {",
-        "    background-color: green;",
+        "  .blue-box {",
+        "    background-color: blue;",
         "    padding: 20px;",
         "    margin: 20px;",
         "  }",
@@ -2026,11 +2026,11 @@
         "",
         "<div class=\"box yellow-box\">",
         "  <h5 class=\"box red-box\">padding</h5>",
-        "  <h5 class=\"box green-box\">padding</h5>",
+        "  <h5 class=\"box blue-box\">padding</h5>",
         "</div>"
       ],
       "tests": [
-        "assert($(\".green-box\").css(\"margin-top\") === \"-15px\", 'message: Your <code>green-box</code> class should give elements <code>-15px</code> of <code>margin</code>.');"
+        "assert($(\".blue-box\").css(\"margin-top\") === \"-15px\", 'message: Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.');"
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -2042,7 +2042,7 @@
             "Wenn du dem Außenabstand - <code>margin</code> - eines Elements einen negativen Wert zuweist, wird das Element größer.",
             "<hr>",
             "Versuche den Außenabstand - <code>margin</code> - auf einen negativen Wert, wie bei der roten Box, zu setzen.",
-            "Ändere den Außenabstand – <code>margin</code> – der grünen Box auf <code>-15px</code>, damit sie die gelbe Box horizontal ausfüllt."
+            "Ändere den Außenabstand – <code>margin</code> – der blauen Box auf <code>-15px</code>, damit sie die gelbe Box horizontal ausfüllt."
           ]
         },
         "es": {
@@ -2084,7 +2084,7 @@
         "Sometimes you will want to customize an element so that it has different <code>padding</code> on each of its sides.",
         "CSS allows you to control the <code>padding</code> of an element on all four sides with <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> properties.",
         "<hr>",
-        "Give the green box a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
+        "Give the blue box a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
       ],
       "challengeSeed": [
         "<style>",
@@ -2113,22 +2113,22 @@
         "    padding-left: 40px;",
         "  }",
         "",
-        "  .green-box {",
-        "    background-color: green;",
+        "  .blue-box {",
+        "    background-color: blue;",
         "  }",
         "</style>",
         "<h5 class=\"injected-text\">margin</h5>",
         "",
         "<div class=\"box yellow-box\">",
         "  <h5 class=\"box red-box\">padding</h5>",
-        "  <h5 class=\"box green-box\">padding</h5>",
+        "  <h5 class=\"box blue-box\">padding</h5>",
         "</div>"
       ],
       "tests": [
-        "assert($(\".green-box\").css(\"padding-top\") === \"40px\", 'message: Your <code>green-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.');",
-        "assert($(\".green-box\").css(\"padding-right\") === \"20px\", 'message: Your <code>green-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.');",
-        "assert($(\".green-box\").css(\"padding-bottom\") === \"20px\", 'message: Your <code>green-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.');",
-        "assert($(\".green-box\").css(\"padding-left\") === \"40px\", 'message: Your <code>green-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.');"
+        "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'message: Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.');",
+        "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'message: Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.');",
+        "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'message: Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.');",
+        "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'message: Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.');"
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -2139,7 +2139,7 @@
             "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.",
             "<hr>",
-            "Verleihe der grünen Box einen Innenabstand – <code>padding</code> – von <code>40px</code> auf der oberen und linken Seite, aber nur <code>20px</code> auf der unteren und rechten Seite."
+            "Verleihe der blauen Box einen Innenabstand – <code>padding</code> – von <code>40px</code> auf der oberen und linken Seite, aber nur <code>20px</code> auf der unteren und rechten Seite."
           ]
         },
         "es": {
@@ -2178,7 +2178,7 @@
         "Sometimes you will want to customize an element so that it has a different <code>margin</code> on each of its sides.",
         "CSS allows you to control the <code>margin</code> of an element on all four sides with <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> properties.",
         "<hr>",
-        "Give the green box a <code>margin</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
+        "Give the blue box a <code>margin</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
       ],
       "challengeSeed": [
         "<style>",
@@ -2207,22 +2207,22 @@
         "    margin-left: 40px;",
         "  }",
         "",
-        "  .green-box {",
-        "    background-color: green;",
+        "  .blue-box {",
+        "    background-color: blue;",
         "  }",
         "</style>",
         "<h5 class=\"injected-text\">margin</h5>",
         "",
         "<div class=\"box yellow-box\">",
         "  <h5 class=\"box red-box\">padding</h5>",
-        "  <h5 class=\"box green-box\">padding</h5>",
+        "  <h5 class=\"box blue-box\">padding</h5>",
         "</div>"
       ],
       "tests": [
-        "assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'message: Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.');",
-        "assert($(\".green-box\").css(\"margin-right\") === \"20px\", 'message: Your <code>green-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.');",
-        "assert($(\".green-box\").css(\"margin-bottom\") === \"20px\", 'message: Your <code>green-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.');",
-        "assert($(\".green-box\").css(\"margin-left\") === \"40px\", 'message: Your <code>green-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.');"
+        "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'message: Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.');",
+        "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'message: Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.');",
+        "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'message: Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.');",
+        "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'message: Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.');"
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -2233,7 +2233,7 @@
             "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.",
             "<hr>",
-            "Gib der grünen Box einen Außenabstand – <code>margin</code> – von <code>40px</code> auf der oberen und linken Seite, aber nur <code>20px</code> auf der unteren und rechten Seite."
+            "Gib der blauen Box einen Außenabstand – <code>margin</code> – von <code>40px</code> auf der oberen und linken Seite, aber nur <code>20px</code> auf der unteren und rechten Seite."
           ]
         },
         "es": {
@@ -2273,7 +2273,7 @@
         "<code>padding: 10px 20px 10px 20px;</code>",
         "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.",
         "<hr>",
-        "Use Clockwise Notation to give the \".green-box\" class a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
+        "Use Clockwise Notation to give the \".blue-box\" class a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
       ],
       "challengeSeed": [
         "<style>",
@@ -2299,23 +2299,23 @@
         "    padding: 20px 40px 20px 40px;",
         "  }",
         "",
-        "  .green-box {",
-        "    background-color: green;",
+        "  .blue-box {",
+        "    background-color: blue;",
         "  }",
         "</style>",
         "<h5 class=\"injected-text\">margin</h5>",
         "",
         "<div class=\"box yellow-box\">",
         "  <h5 class=\"box red-box\">padding</h5>",
-        "  <h5 class=\"box green-box\">padding</h5>",
+        "  <h5 class=\"box blue-box\">padding</h5>",
         "</div>"
       ],
       "tests": [
-        "assert($(\".green-box\").css(\"padding-top\") === \"40px\", 'message: Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.');",
-        "assert($(\".green-box\").css(\"padding-right\") === \"20px\", 'message: Your <code>green-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.');",
-        "assert($(\".green-box\").css(\"padding-bottom\") === \"20px\", 'message: Your <code>green-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.');",
-        "assert($(\".green-box\").css(\"padding-left\") === \"40px\", 'message: Your <code>green-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.');",
-        "assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), 'message: You should use the clockwise notation to set the padding of <code>green-box</code> class.');"
+        "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'message: Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.');",
+        "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'message: Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.');",
+        "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'message: Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.');",
+        "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'message: Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.');",
+        "assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), 'message: You should use the clockwise notation to set the padding of <code>blue-box</code> class.');"
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -2327,7 +2327,7 @@
             "<code>padding: 10px 20px 10px 20px;</code>",
             "Diese vier Werte funktionieren wie eine Uhr: oben, rechts, unten und links. Sie bewirken exakt dasselbe wie die seitenspezifischen Anweisungen.",
             "<hr>",
-            "Gib der Klasse \".green-box\" mit einer Notation im Uhrzeigersinn einen Innenabstand – <code>padding</code> – von <code>40px</code> auf der oberen und linken Seite, aber nur <code>20px</code> auf der unteren und rechten Seite."
+            "Gib der Klasse \".blue-box\" mit einer Notation im Uhrzeigersinn einen Innenabstand – <code>padding</code> – von <code>40px</code> auf der oberen und linken Seite, aber nur <code>20px</code> auf der unteren und rechten Seite."
           ]
         },
         "es": {
@@ -2337,7 +2337,7 @@
             "<code>padding: 10px 20px 10px 20px;</code>",
             "Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones de relleno.",
             "<hr>",
-            "Usa la notación en sentido horario para dar a la clase \"<code>.green-box</code>\" un relleno de <code>40px</code> en las partes superior e izquierda, pero sólo <code>20px</code> en su parte inferior y al lado derecho ."
+            "Usa la notación en sentido horario para dar a la clase \"<code>.blue-box</code>\" un relleno de <code>40px</code> en las partes superior e izquierda, pero sólo <code>20px</code> en su parte inferior y al lado derecho ."
           ]
         },
         "pt-br": {
@@ -2347,7 +2347,7 @@
             "<code>padding: 10px 20px 10px 20px;</code>",
             "Estes quatro valores funcionam como um relógio: cima, direita, baixo e esquerda, e produzirão o mesmo resultado das quatro instruções de preenchimento.",
             "<hr>",
-            "Use a <code>notação em sentido horário</code> para dar para a classe \"<code>.green-box</code>\" um preenchimento de <code>40px</code> nas partes superior e esquerda, mas de apenas <code>20px</code> em sua parte inferior e ao lado direito."
+            "Use a <code>notação em sentido horário</code> para dar para a classe \"<code>.blue-box</code>\" um preenchimento de <code>40px</code> nas partes superior e esquerda, mas de apenas <code>20px</code> em sua parte inferior e ao lado direito."
           ]
         },
         "ru": {
@@ -2357,7 +2357,7 @@
             "<code>padding: 10px 20px 10px 20px;</code>",
             "Установка значений работает по часовой стрелке: сверху, справа, снизу, слева, и приводит к ровно такому же результату, как и использование других инструкций.",
             "<hr>",
-            "Используйте систему ссылок по часовой стрелке для установки для класса \".green-box\" значения отступа содержимого <code>padding</code> равное <code>40px</code> сверху и слева, но только <code>20px</code> снизу и справа."
+            "Используйте систему ссылок по часовой стрелке для установки для класса \".blue-box\" значения отступа содержимого <code>padding</code> равное <code>40px</code> сверху и слева, но только <code>20px</code> снизу и справа."
           ]
         }
       }
@@ -2371,7 +2371,7 @@
         "<code>margin: 10px 20px 10px 20px;</code>",
         "These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.",
         "<hr>",
-        "Use <code>Clockwise Notation</code> to give the element with the <code>green-box</code> class a margin of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
+        "Use <code>Clockwise Notation</code> to give the element with the <code>blue-box</code> class a margin of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
       ],
       "challengeSeed": [
         "<style>",
@@ -2397,22 +2397,22 @@
         "    margin: 20px 40px 20px 40px;",
         "  }",
         "",
-        "  .green-box {",
-        "    background-color: green;",
+        "  .blue-box {",
+        "    background-color: blue;",
         "  }",
         "</style>",
         "<h5 class=\"injected-text\">margin</h5>",
         "",
         "<div class=\"box yellow-box\">",
         "  <h5 class=\"box red-box\">padding</h5>",
-        "  <h5 class=\"box green-box\">padding</h5>",
+        "  <h5 class=\"box blue-box\">padding</h5>",
         "</div>"
       ],
       "tests": [
-        "assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'message: Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.');",
-        "assert($(\".green-box\").css(\"margin-right\") === \"20px\", 'message: Your <code>green-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.');",
-        "assert($(\".green-box\").css(\"margin-bottom\") === \"20px\", 'message: Your <code>green-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.');",
-        "assert($(\".green-box\").css(\"margin-left\") === \"40px\", 'message: Your <code>green-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.');"
+        "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'message: Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.');",
+        "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'message: Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.');",
+        "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'message: Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.');",
+        "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'message: Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.');"
       ],
       "type": "waypoint",
       "challengeType": 0,
@@ -2425,7 +2425,7 @@
             "<code>margin: 10px 20px 10px 20px;</code>",
             "Diese vier Werte funktionieren wieder wie eine Uhr: oben, rechts, unten und links. Sie bewirken exakt das Gleiche wie die seitenspezifischen Anweisungen.",
             "<hr>",
-            "Nutze die Notation im Uhrzeigersinn – auch <code>Clockwise Notation</code> genannt – um dem Element mit der Klasse <code>green-box</code> <code>40px</code> Außenabstand auf der oberen und linken Seite, aber nur <code>20px</code> auf der unteren und rechten Seite zu verleihen."
+            "Nutze die Notation im Uhrzeigersinn – auch <code>Clockwise Notation</code> genannt – um dem Element mit der Klasse <code>blue-box</code> <code>40px</code> Außenabstand auf der oberen und linken Seite, aber nur <code>20px</code> auf der unteren und rechten Seite zu verleihen."
           ]
         },
         "es": {
@@ -2436,7 +2436,7 @@
             "<code>margin: 10px 20px 10px 20px;</code>",
             "Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones que especifican el margen.",
             "<hr>",
-            "Usa <code>notación en sentido horario</code> para dar al elemento con la clase <code>green-box</code> un margen de <code>40px</code> en las partes superior e izquierda, pero sólo <code>20px</code> en su parte inferior y al lado derecho ."
+            "Usa <code>notación en sentido horario</code> para dar al elemento con la clase <code>blue-box</code> un margen de <code>40px</code> en las partes superior e izquierda, pero sólo <code>20px</code> en su parte inferior y al lado derecho ."
           ]
         },
         "pt-br": {
@@ -2447,7 +2447,7 @@
             "<code>margin: 10px 20px 10px 20px;</code>",
             "Estes quatro valores funcionam como um relógio: cima, direita, baixo e esquerda, e produzirão o mesmo resultado das quatro instruções de margem.",
             "<hr>",
-            "Use a <code>notação em sentido horário</code> para dar para a classe \"<code>.green-box</code>\" uma margem de <code>40px</code> nas partes superior e esquerda, mas de apenas <code>20px</code> em sua parte inferior e ao lado direito."
+            "Use a <code>notação em sentido horário</code> para dar para a classe \"<code>.blue-box</code>\" uma margem de <code>40px</code> nas partes superior e esquerda, mas de apenas <code>20px</code> em sua parte inferior e ao lado direito."
           ]
         },
         "ru": {
@@ -2458,7 +2458,7 @@
             "<code>margin: 10px 20px 10px 20px;</code>",
             "Установка значений работает по часовой стрелке: сверху, справа, снизу, слева, и приводит к ровно такому же результату, как и использование других инструкций.",
             "<hr>",
-            "Используйте систему ссылок по часовой стрелке для установки для класса <code>green-box</code> значения отступа <code>margin</code> равное <code>40px</code> сверху и слева, но только <code>20px</code> снизу и справа."
+            "Используйте систему ссылок по часовой стрелке для установки для класса <code>blue-box</code> значения отступа <code>margin</code> равное <code>40px</code> сверху и слева, но только <code>20px</code> снизу и справа."
           ]
         }
       }