diff --git a/challenges/01-responsive-web-design/basic-css.json b/challenges/01-responsive-web-design/basic-css.json index 859c66073e1..0d1de62862a 100644 --- a/challenges/01-responsive-web-design/basic-css.json +++ b/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: padding, margin, and border.", "An element's padding controls the amount of space between the element's content and its border.", - "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 padding than the green box.", - "When you increase the green box's padding, it will increase the distance between the text padding 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 padding than the blue box.", + "When you increase the blue box's padding, it will increase the distance between the text padding and the border around it.", "
", - "Change the padding of your green box to match that of your red box." + "Change the padding of your blue box to match that of your red box." ], "challengeSeed": [ "", @@ -1824,11 +1824,11 @@ "", "
", "
padding
", - "
padding
", + "
padding
", "
" ], "tests": [ - "assert($(\".green-box\").css(\"padding-top\") === \"20px\", 'message: Your green-box class should give elements 20px of padding.');" + "assert($(\".blue-box\").css(\"padding-top\") === \"20px\", 'message: Your blue-box class should give elements 20px of padding.');" ], "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: padding, margin und border.", "padding kontrolliert den Raum oder Abstand zwischen dem Inhalt eines Elements und dessen Rahmen – border", - "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 padding 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 padding hat als die blaue Box.", "
", - "Ändere das padding der grünen Box um es an die rote Box anzugleichen." + "Ändere das padding 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 margin controls the amount of space between an element's border 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 margin than the green box, making it appear smaller.", - "When you increase the green box's margin, 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 margin than the blue box, making it appear smaller.", + "When you increase the blue box's margin, it will increase the distance between its border and surrounding elements.", "
", - "Change the margin of the green box to match that of the red box." + "Change the margin of the blue box to match that of the red box." ], "challengeSeed": [ "", "
margin
", "", "
", "
padding
", - "
padding
", + "
padding
", "
" ], "tests": [ - "assert($(\".green-box\").css(\"padding-top\") === \"40px\", 'message: Your green-box class should give the top of the elements 40px of padding.');", - "assert($(\".green-box\").css(\"padding-right\") === \"20px\", 'message: Your green-box class should give the right of the elements 20px of padding.');", - "assert($(\".green-box\").css(\"padding-bottom\") === \"20px\", 'message: Your green-box class should give the bottom of the elements 20px of padding.');", - "assert($(\".green-box\").css(\"padding-left\") === \"40px\", 'message: Your green-box class should give the left of the elements 40px of padding.');" + "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'message: Your blue-box class should give the top of the elements 40px of padding.');", + "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'message: Your blue-box class should give the right of the elements 20px of padding.');", + "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'message: Your blue-box class should give the bottom of the elements 20px of padding.');", + "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'message: Your blue-box class should give the left of the elements 40px of padding.');" ], "type": "waypoint", "challengeType": 0, @@ -2139,7 +2139,7 @@ "Manchmal wirst du einem Element auf jeder Seite unterschiedliche Innenabstände – also padding – geben wollen.", "CSS erlaubt dir den Innenabstand - padding - eines Elements auf allen Seiten einzeln mit den Eigenschaften padding-top, padding-right, padding-bottom und padding-left zu steuern.", "
", - "Verleihe der grünen Box einen Innenabstand – padding – von 40px auf der oberen und linken Seite, aber nur 20px auf der unteren und rechten Seite." + "Verleihe der blauen Box einen Innenabstand – padding – von 40px auf der oberen und linken Seite, aber nur 20px 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 margin on each of its sides.", "CSS allows you to control the margin of an element on all four sides with margin-top, margin-right, margin-bottom, and margin-left properties.", "
", - "Give the green box a margin of 40px on its top and left side, but only 20px on its bottom and right side." + "Give the blue box a margin of 40px on its top and left side, but only 20px on its bottom and right side." ], "challengeSeed": [ "", "
margin
", "", "
", "
padding
", - "
padding
", + "
padding
", "
" ], "tests": [ - "assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'message: Your green-box class should give the top of elements 40px of margin.');", - "assert($(\".green-box\").css(\"margin-right\") === \"20px\", 'message: Your green-box class should give the right of elements 20px of margin.');", - "assert($(\".green-box\").css(\"margin-bottom\") === \"20px\", 'message: Your green-box class should give the bottom of elements 20px of margin.');", - "assert($(\".green-box\").css(\"margin-left\") === \"40px\", 'message: Your green-box class should give the left of elements 40px of margin.');" + "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'message: Your blue-box class should give the top of elements 40px of margin.');", + "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'message: Your blue-box class should give the right of elements 20px of margin.');", + "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'message: Your blue-box class should give the bottom of elements 20px of margin.');", + "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'message: Your blue-box class should give the left of elements 40px of margin.');" ], "type": "waypoint", "challengeType": 0, @@ -2233,7 +2233,7 @@ "Manchmal wirst du einem Element auf jeder Seite einen unterschiedlichen Außenabstand - margin - geben wollen.", "CSS erlaubt dir ebenfalls den Außenabstand - margin - eines Elements auf jeder Seite einzeln mit den Eigenschaften margin-top, margin-right, margin-bottom und margin-left zu steuern.", "
", - "Gib der grünen Box einen Außenabstand – margin – von 40px auf der oberen und linken Seite, aber nur 20px auf der unteren und rechten Seite." + "Gib der blauen Box einen Außenabstand – margin – von 40px auf der oberen und linken Seite, aber nur 20px auf der unteren und rechten Seite." ] }, "es": { @@ -2273,7 +2273,7 @@ "padding: 10px 20px 10px 20px;", "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.", "
", - "Use Clockwise Notation to give the \".green-box\" class a padding of 40px on its top and left side, but only 20px on its bottom and right side." + "Use Clockwise Notation to give the \".blue-box\" class a padding of 40px on its top and left side, but only 20px on its bottom and right side." ], "challengeSeed": [ "", "
margin
", "", "
", "
padding
", - "
padding
", + "
padding
", "
" ], "tests": [ - "assert($(\".green-box\").css(\"padding-top\") === \"40px\", 'message: Your green-box class should give the top of elements 40px of padding.');", - "assert($(\".green-box\").css(\"padding-right\") === \"20px\", 'message: Your green-box class should give the right of elements 20px of padding.');", - "assert($(\".green-box\").css(\"padding-bottom\") === \"20px\", 'message: Your green-box class should give the bottom of elements 20px of padding.');", - "assert($(\".green-box\").css(\"padding-left\") === \"40px\", 'message: Your green-box class should give the left of elements 40px of padding.');", - "assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), 'message: You should use the clockwise notation to set the padding of green-box class.');" + "assert($(\".blue-box\").css(\"padding-top\") === \"40px\", 'message: Your blue-box class should give the top of elements 40px of padding.');", + "assert($(\".blue-box\").css(\"padding-right\") === \"20px\", 'message: Your blue-box class should give the right of elements 20px of padding.');", + "assert($(\".blue-box\").css(\"padding-bottom\") === \"20px\", 'message: Your blue-box class should give the bottom of elements 20px of padding.');", + "assert($(\".blue-box\").css(\"padding-left\") === \"40px\", 'message: Your blue-box class should give the left of elements 40px of padding.');", + "assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), 'message: You should use the clockwise notation to set the padding of blue-box class.');" ], "type": "waypoint", "challengeType": 0, @@ -2327,7 +2327,7 @@ "padding: 10px 20px 10px 20px;", "Diese vier Werte funktionieren wie eine Uhr: oben, rechts, unten und links. Sie bewirken exakt dasselbe wie die seitenspezifischen Anweisungen.", "
", - "Gib der Klasse \".green-box\" mit einer Notation im Uhrzeigersinn einen Innenabstand – padding – von 40px auf der oberen und linken Seite, aber nur 20px auf der unteren und rechten Seite." + "Gib der Klasse \".blue-box\" mit einer Notation im Uhrzeigersinn einen Innenabstand – padding – von 40px auf der oberen und linken Seite, aber nur 20px auf der unteren und rechten Seite." ] }, "es": { @@ -2337,7 +2337,7 @@ "padding: 10px 20px 10px 20px;", "Estos cuatro valores funcionan como un reloj: arriba, derecha, abajo, izquierda, y producirán exactamente el mismo resultado de las cuatro instrucciones de relleno.", "
", - "Usa la notación en sentido horario para dar a la clase \".green-box\" un relleno de 40px en las partes superior e izquierda, pero sólo 20px en su parte inferior y al lado derecho ." + "Usa la notación en sentido horario para dar a la clase \".blue-box\" un relleno de 40px en las partes superior e izquierda, pero sólo 20px en su parte inferior y al lado derecho ." ] }, "pt-br": { @@ -2347,7 +2347,7 @@ "padding: 10px 20px 10px 20px;", "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.", "
", - "Use a notação em sentido horário para dar para a classe \".green-box\" um preenchimento de 40px nas partes superior e esquerda, mas de apenas 20px em sua parte inferior e ao lado direito." + "Use a notação em sentido horário para dar para a classe \".blue-box\" um preenchimento de 40px nas partes superior e esquerda, mas de apenas 20px em sua parte inferior e ao lado direito." ] }, "ru": { @@ -2357,7 +2357,7 @@ "padding: 10px 20px 10px 20px;", "Установка значений работает по часовой стрелке: сверху, справа, снизу, слева, и приводит к ровно такому же результату, как и использование других инструкций.", "
", - "Используйте систему ссылок по часовой стрелке для установки для класса \".green-box\" значения отступа содержимого padding равное 40px сверху и слева, но только 20px снизу и справа." + "Используйте систему ссылок по часовой стрелке для установки для класса \".blue-box\" значения отступа содержимого padding равное 40px сверху и слева, но только 20px снизу и справа." ] } } @@ -2371,7 +2371,7 @@ "margin: 10px 20px 10px 20px;", "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.", "
", - "Use Clockwise Notation to give the element with the green-box class a margin of 40px on its top and left side, but only 20px on its bottom and right side." + "Use Clockwise Notation to give the element with the blue-box class a margin of 40px on its top and left side, but only 20px on its bottom and right side." ], "challengeSeed": [ "", "
margin
", "", "
", "
padding
", - "
padding
", + "
padding
", "
" ], "tests": [ - "assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'message: Your green-box class should give the top of elements 40px of margin.');", - "assert($(\".green-box\").css(\"margin-right\") === \"20px\", 'message: Your green-box class should give the right of elements 20px of margin.');", - "assert($(\".green-box\").css(\"margin-bottom\") === \"20px\", 'message: Your green-box class should give the bottom of elements 20px of margin.');", - "assert($(\".green-box\").css(\"margin-left\") === \"40px\", 'message: Your green-box class should give the left of elements 40px of margin.');" + "assert($(\".blue-box\").css(\"margin-top\") === \"40px\", 'message: Your blue-box class should give the top of elements 40px of margin.');", + "assert($(\".blue-box\").css(\"margin-right\") === \"20px\", 'message: Your blue-box class should give the right of elements 20px of margin.');", + "assert($(\".blue-box\").css(\"margin-bottom\") === \"20px\", 'message: Your blue-box class should give the bottom of elements 20px of margin.');", + "assert($(\".blue-box\").css(\"margin-left\") === \"40px\", 'message: Your blue-box class should give the left of elements 40px of margin.');" ], "type": "waypoint", "challengeType": 0, @@ -2425,7 +2425,7 @@ "margin: 10px 20px 10px 20px;", "Diese vier Werte funktionieren wieder wie eine Uhr: oben, rechts, unten und links. Sie bewirken exakt das Gleiche wie die seitenspezifischen Anweisungen.", "
", - "Nutze die Notation im Uhrzeigersinn – auch Clockwise Notation genannt – um dem Element mit der Klasse green-box 40px Außenabstand auf der oberen und linken Seite, aber nur 20px auf der unteren und rechten Seite zu verleihen." + "Nutze die Notation im Uhrzeigersinn – auch Clockwise Notation genannt – um dem Element mit der Klasse blue-box 40px Außenabstand auf der oberen und linken Seite, aber nur 20px auf der unteren und rechten Seite zu verleihen." ] }, "es": { @@ -2436,7 +2436,7 @@ "margin: 10px 20px 10px 20px;", "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.", "
", - "Usa notación en sentido horario para dar al elemento con la clase green-box un margen de 40px en las partes superior e izquierda, pero sólo 20px en su parte inferior y al lado derecho ." + "Usa notación en sentido horario para dar al elemento con la clase blue-box un margen de 40px en las partes superior e izquierda, pero sólo 20px en su parte inferior y al lado derecho ." ] }, "pt-br": { @@ -2447,7 +2447,7 @@ "margin: 10px 20px 10px 20px;", "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.", "
", - "Use a notação em sentido horário para dar para a classe \".green-box\" uma margem de 40px nas partes superior e esquerda, mas de apenas 20px em sua parte inferior e ao lado direito." + "Use a notação em sentido horário para dar para a classe \".blue-box\" uma margem de 40px nas partes superior e esquerda, mas de apenas 20px em sua parte inferior e ao lado direito." ] }, "ru": { @@ -2458,7 +2458,7 @@ "margin: 10px 20px 10px 20px;", "Установка значений работает по часовой стрелке: сверху, справа, снизу, слева, и приводит к ровно такому же результату, как и использование других инструкций.", "
", - "Используйте систему ссылок по часовой стрелке для установки для класса green-box значения отступа margin равное 40px сверху и слева, но только 20px снизу и справа." + "Используйте систему ссылок по часовой стрелке для установки для класса blue-box значения отступа margin равное 40px сверху и слева, но только 20px снизу и справа." ] } }