From 91572bdaf0c8e4bf951d4974e1f21a1db120b1a0 Mon Sep 17 00:00:00 2001 From: Eric Leung Date: Tue, 26 Apr 2016 23:19:54 -0700 Subject: [PATCH] Compress and reduce redundant Hex/RGB challenges --- .../html5-and-css.json | 588 +++--------------- 1 file changed, 101 insertions(+), 487 deletions(-) diff --git a/seed/challenges/01-front-end-development-certification/html5-and-css.json b/seed/challenges/01-front-end-development-certification/html5-and-css.json index 5719312ee4516c..7368a9ed8d1995 100644 --- a/seed/challenges/01-front-end-development-certification/html5-and-css.json +++ b/seed/challenges/01-front-end-development-certification/html5-and-css.json @@ -4352,207 +4352,17 @@ "Ersetzte das Wort black in der Hintergrundfarbe deines body Elements mit dem hex code #000000." ] }, - { - "id": "bad87fee1348bd9aedf08725", - "title": "Use Hex Code to Color Elements White", - "description": [ - "0 is the lowest number in hex code, and represents a complete absence of color.", - "F is the highest number in hex code, and it represents the maximum possible brightness.", - "Let's turn our body element's background-color white by changing its hex code to #FFFFFF" - ], - "titleRU": "Используйте hex-код, чтобы сделать элементы белыми", - "descriptionRU": [ - "0 - минимальное значение в hex-коде, оно обозначает полное отсутствие цвета.", - "F - максимальное значение в hex-коде, оно обозначает максимальную возможную яркость.", - "Давайте переделаем свойство background-color нашего элемента body, чтобы фон стал белый, заменив его hex-код на #FFFFFF" - ], - "challengeSeed": [ - "" - ], - "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(255, 255, 255)\", 'message: Your body element should have the background-color of white.');", - "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#FFF(FFF)?((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the hex code for the color white instead of the word white. For example body { color: #FFFFFF; }');" - ], - "descriptionPtBR": [ - "0 é o dígito mais baixo em código hexadecimal, e representa a completa ausência de cor.", - "F é o dígito mais alto em código hexadecimal, e representa o máximo de claridade possível.", - "Vamos fazer com que a cor de fundo (background-color) em nosso elemento body seja branca, mudando seu código hexadecimal para #FFFFFF." - ], - "namePtBR": "Use Código Hexadecimal Para dar a Cor Branca a Elementos", - "type": "waypoint", - "challengeType": 0, - "titleEs": "Usa el código hexadecimal para colorear de blanco los elementos", - "descriptionEs": [ - "0 es el dígito más bajo en código hexadecimal, y representa una completa ausencia de color.", - "F es el dígito más alto en código hexadecimal, y representa el máximo brillo posible.", - "Volvamos blanco el color de fondo (background-color) de nuestro elemento body, cambiando su código hexadecimal por #FFFFFF" - ], - "titleDe": "Verwende Hexadezimal Code um Elemente Weiß zu färben", - "descriptionDe": [ - "0 ist die niedrigste Zahl in Hexadezimal Code und steht für die komplette Abwesenheit von Farbe.", - "F ist die höchste Zahl in Hexadezimal Code und steht für maximal mögliche Helligkeit.", - "Mach die Hintergrundfarbe deines body Element weiß indem du den Hexadezimal Code auf #FFFFFF änderst." - ] - }, - { - "id": "bad87fee1348bd9aedf08724", - "title": "Use Hex Code to Color Elements Red", - "description": [ - "You may be wondering why we use 6 digits to represent a color instead of just one or two. The answer is that using 6 digits gives us a huge variety.", - "How many colors are possible? 16 values and 6 positions means we have 16 to the 6th power, or more than 16 million possible colors.", - "Hex code follows the red-green-blue, or rgb format. The first two digits of hex code represent the amount of red in the color. The third and fourth digit represent the amount of green. The fifth and sixth represent the amount of blue.", - "So to get the absolute brightest red, you would just use F for the first and second digits (the highest possible value) and 0 for the third, fourth, fifth and sixth digits (the lowest possible value).", - "Make the body element's background color red by giving it the hex code value of #FF0000" - ], - "titleRU": "Используйте hex-код, чтобы сделать элементы красными", - "descriptionRU": [ - "Вы можете удивиться тому, что мы используем 6 цифр для представления цвета вместо одной или двух. Ответ заключается в том, что использование 6-ти цифр даёт нам большое разнообразие.", - "Сколько цветов возможно таким образом обозначить? 16 значений и 6 возможных положений значит, что у нас есть в распоряжении 16 в степени 6, или более 16-ти миллионов возможных цветов.", - "Hex-код соответствует модели красный-зелёный-синий, или rgb формату. Первые две цифры hex-кода обозначают количество красного в цвете. Третья и четвёртая - количество зелёного. Пятая и шестая - количество синего.", - "То есть для получения абсолютно яркого красного, вы бы использовали F в качестве первой и второй цифры (максимальное возможное значение) и 0 для третьей, четвёртой, пятой и шестой цифр (минимальное возможное значение).", - "Сделайте цвет фона элемента body красным, присвоив его соответствующему свойству значение hex-кода равное #FF0000" - ], - "challengeSeed": [ - "" - ], - "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'message: Give your body element the background-color of red.');", - "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#((F00)|(FF0000))((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the hex code for the color red instead of the word red. For example body { color: #FF0000; }');" - ], - "descriptionPtBR": [ - "Talvez você esteja se perguntando o motivo para usar 6 dígitos para representar uma cor ao invés de apenas um ou dois. Este motivo é que ao usar 6 dígitos, temos acesso a uma enorme variedade de cores.", - "Para que você tenha uma ideia, ter 16 valores e 6 posições significa que temos 16 elevado a 6. Isso dá um total de mais de 16 milhões de cores possíveis.", - "Os códigos hexadecimais seguem o formato vermelho-verde-azul (red-green-blue), ou formato rgb. Os dois primeiros dígitos do código hexadecimal representam a quantidade de vermelho na cor. O terceiro e o quarto representam a quantidade de verde. Já o quinto e o sexto representam a quantidade de azul.", - "Sendo assim, para conseguir um vermelho brilhante, basta que você use F (o dígito mais alto possível) para o primeiro e o segundo dígitos, e 0 (o dígito mais baixo possível) para o terceiro, quarto, quinto e sexto dígito.", - "Faça com que a cor de fundo (background-color) do elemento body seja vermelho, ao dar o código hexadecimal #FF0000." - ], - "namePtBR": "Use Código Hexadecimal Para dar a Cor Vermelha a Elementos", - "type": "waypoint", - "challengeType": 0, - "titleEs": "Usa el código hexadecimal para colorear de rojo los elementos", - "descriptionEs": [ - "Te puedes estar preguntando por qué usamos 6 dígitos para representar un color en lugar de sólo uno o dos. La respuesta es que el uso de 6 dígitos nos da una enorme variedad. ", - "¿Cuántos colores son posibles? 16 valores y 6 posiciones significa que tenemos 16 a la sexta potencia, o más de 16 millones de colores posibles. ", - "Los códigos hexadecimales siguen el formato rojo-verde-azul (red-green-blue) o formato rgb. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representan la cantidad de azul .", - "Así que para conseguir el rojo absolutamente más brillante, basta que uses F para el primer y segundo dígitos (el valor más alto posible) y 0 para el tercero, cuarto, quinto y sexto dígitos (el valor más bajo posible).", - "Haz que el color de fondo (background-color) del elemento body sea rojo dándole el código hexadecimal #FF0000" - ], - "titleDe": "Verwende Hexadezimal Code um Elemente rot zu färben", - "descriptionDe": [ - "Du wunderst dich vielleicht warum wir 6 Ziffern verwenden um Farben darzustellen anstatt nur eine oder zwei. Die Antwort ist, dass uns 6 Ziffern eine enorme Vielfalt geben.", - "Wieviele Farben sind möglich? 16 Werte und 6 Positionen bedeuted dass wir 16 hoch 6, oder mehr als 16 Millionen mögliche Farben zur Verfügung haben.", - "Hexadezimal Code folgt der Rot-Grün-Blau, oder rgb, Schreibweise. Die ersten zwei Ziffern des Hexadezimal Code geben die Menge an Rot in der Farbe an. Die dritte und vierte Ziffer die Menge an Grün. Die fünfte und sechste die Menge an Blau.", - "Um also das absolut hellste Rot zu bekommen, würdest du F (der höchstmögliche Wert) für die erste und zweite und 0 (der niedrigstmögliche Wert) für die dritte, vierte, fünfte und sechste Ziffer verwenden.", - "Ändere die Hintergrundfarbe des body Elements zu Rot indem du ihm den Hexadezimal Code #FF0000 gibst." - ] - }, - { - "id": "bad87fee1348bd9aedf08723", - "title": "Use Hex Code to Color Elements Green", - "description": [ - "Remember that hex code follows the red-green-blue, or rgb format. The first two digits of hex code represent the amount of red in the color. The third and fourth digit represent the amount of green. The fifth and sixth represent the amount of blue.", - "So to get the absolute brightest green, you would just use F for the third and fourth digits (the highest possible value) and 0 for all the other digits (the lowest possible value).", - "Make the body element's background color green by giving it the hex code value of #00FF00" - ], - "titleRU": "Используйте hex-код, чтобы сделать элементы зелёными", - "descriptionRU": [ - "Помните, что hex-код соответствует модели красный-зелёный-синий, или rgb формату. Первые две цифры hex-кода обозначают количество красного в цвете. Третья и четвёртая - количество зелёного. Пятая и шестая - количество синего.", - "То есть для получения абсолютно яркого зелёного, вы бы использовали F в качестве третьей и четвёртой цифры (максимальное возможное значение) и 0 для первой, второй, пятой и шестой цифр (минимальное возможное значение).", - "Сделайте цвет фона элемента body зелёным, присвоив его соответствующему свойству значение hex-кода равное #00FF00" - ], - "challengeSeed": [ - "" - ], - "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(0, 255, 0)\", 'message: Give your body element the background-color of green.');", - "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#((0F0)|(00FF00))((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the hex code for the color green instead of the word green. For example body { color: #00FF00; }');" - ], - "descriptionPtBR": [ - "Relembre que códigos hexadecimais seguem o formato vermelho-verde-azul (red-green-blue), ou formato rgb. Os dois primeiros dígitos do código hexadecimal representam a quantidade de vermelho na cor. O terceiro e o quarto representam a quantidade de verde. Já o quinto e o sexto representam a quantidade de azul.", - "Sendo assim, para conseguir um verde brilhante, basta que você use F (o dígito mais alto possível) para o terceiro e o quarto dígito, e 0 (o dígito mais baixo possível) para todos os outros dígitos.", - "Faça com que a cor de fundo (background-color) do elemento body seja verde ao dar o código hexadecimal #00FF00." - ], - "namePtBR": "Use Código Hexadecimal para dar a Cor Verde a Elementos", - "type": "waypoint", - "challengeType": 0, - "titleEs": "Usa el código hexadecimal para colorear de verde los elementos", - "descriptionEs": [ - "Recuerda que el código hexadecimal sigue el formato rojo-verde-azul o rgb. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representan la cantidad de azul.", - "Así que para conseguir el verde absoluto más brillante, sólo debes usar F en el tercer y cuarto dígitos (el valor más alto posible) y 0 para todos los otros dígitos (el valor más bajo posible). ", - "Haz que el color de fondo (background-color) del elemento body sea verde, dándole el código hexadecimal #00FF00" - ], - "titleDe": "Verwende Hexadezimal Code um Elemente grün zu färben", - "descriptionDe": [ - "Vergiss nicht, hex code folgt der Rot-Grün-Blau, oder rgb, Schreibweise. Die ersten zwei Ziffern des Hexadezimal Code stehen für die Menge an Rot in der Farbe. Die dritte und vierte Ziffer stehen für die Menge an Grün. Die fünfte und sechste für die Menge an Blau.", - "Um also das absolut hellste Grün zu bekommen, musst du F (der größtmögliche Wert) für die dritte und vierte und 0 (der niedrigste Wert) für alle anderen Ziffern verwenden.", - "Mach die Hintergrundfarbe des body Elements grün indem du ihm den Hexadezimal Code #00FF00 gibst." - ] - }, - { - "id": "bad87fee1348bd9aedf08722", - "title": "Use Hex Code to Color Elements Blue", - "description": [ - "Hex code follows the red-green-blue, or rgb format. The first two digits of hex code represent the amount of red in the color. The third and fourth digit represent the amount of green. The fifth and sixth represent the amount of blue.", - "So to get the absolute brightest blue, we use F for the fifth and sixth digits (the highest possible value) and 0 for all the other digits (the lowest possible value).", - "Make the body element's background color blue by giving it the hex code value of #0000FF" - ], - "titleRU": "Используйте hex-код, чтобы сделать элементы синими", - "descriptionRU": [ - "Помните, что hex-код соответствует модели красный-зелёный-синий, или rgb формату. Первые две цифры hex-кода обозначают количество красного в цвете. Третья и четвёртая - количество зелёного. Пятая и шестая - количество синего.", - "То есть для получения абсолютно яркого синего, вы бы использовали F в качестве пятой и шустой цифры (максимальное возможное значение) и 0 для первой, второй, третьей и четвёртой цифр (мин��мальное возможное значение).", - "Сделайте цвет фона элемента body синим, присвоив его соответствующему свойству значение hex-кода равное #0000FF" - ], - "challengeSeed": [ - "" - ], - "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 255)\", 'message: Give your body element the background-color of blue.');", - "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#((00F)|(0000FF))((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the hex code for the color blue instead of the word blue. For example body { color: #0000FF; }');" - ], - "descriptionPtBR": [ - "Relembre que códigos hexadecimais seguem o formato vermelho-verde-azul (red-green-blue), ou formato rgb. Os dois primeiros dígitos do código hexadecimal representam a quantidade de vermelho na cor. O terceiro e o quarto representam a quantidade de verde. Já o quinto e o sexto representam a quantidade de azul.", - "Para conseguir o azul mais brilhante, utilizamos F (o dígito mais alto possível) no quinto e no sexto dígito, e 0 (o dígito mais baixo possível) para todos os outros dígitos.", - "Faça com que a cor de fundo (background-color) do elemento body seja azul usando o código hexadecimal #0000FF." - ], - "namePtBR": "Use Código Hexadecimal para dar a Cor Azul a Elementos", - "type": "waypoint", - "challengeType": 0, - "titleEs": "Usa el código hexadecimal para colorear de azul los elementos", - "descriptionEs": [ - "Los códigos hexadecimales siguen el formato rojo-verde-azul o rgb. Los dos primeros dígitos del código hexadecimal representan la cantidad de rojo en el color. El tercer y cuarto dígitos representan la cantidad de verde. El quinto y sexto representan la cantidad de azul .", - "Así que para conseguir el azul absoluto más brillante, utilizamos F para la quinta y sexta cifras (el valor más alto posible) y 0 para todos los otros dígitos (el valor más bajo posible ). ", - "Haz que el color de fondo (background-color) del elemento body sea azul, dándole el código hexadecimal #0000FF" - ], - "titleDe": "Verwende Hexadezimal Code um Elemente blau zu färben", - "descriptionDe": [ - "Hexadezimal Code folgt der Rot-Grün-Blau, oder rgb, Schreibweise. Die ersten zwei Ziffern stehen für die Menge an Rot in der Farbe. Die dritte und vierte Ziffer repräsentiert die Menge an Grün. Die fünfte und sechste steht für die Menge an Blau.", - "Um also das hellste Blau zu bekommen, verwenden wir F (größtmöglicher Wert) für die fünfte und sechste und 0 (der niedrigste Wert) für alle anderen Ziffern.", - "Mach die Hintergrundfarbe des body Elements blau indem du den Hexadezimal Code mit dem Wert #0000FF verwendest." - ] - }, { "id": "bad87fee1348bd9aedf08721", "title": "Use Hex Code to Mix Colors", "description": [ - "From these three pure colors (red, green and blue), we can create 16 million other colors.", - "For example, orange is pure red, mixed with some green, and no blue.", - "Make the body element's background color orange by giving it the hex code value of #FFA500" + "To review, hex codes use 6 hexadecimal digits to represent colors, two each for red (R), green (G), and blue (B) components.", + "From these three pure colors (red, green, and blue), we can vary the amounts of each to create over 16 million other colors!", + "For example, orange is pure red, mixed with some green, and no blue. In hex code, this translates to being #FFA500.", + "The digit 0 is the lowest number in hex code, and represents a complete absence of color.", + "The digit F is the highest number in hex code, and represents the maximum possible brightness.", + "Replace the color words in our style element with their correct hex codes.", + "
ColorHex Code
Dodger Blue#2998E4
Green#00FF00
Orange#FFA500
Red#FF0000
" ], "titleRU": "Используйте hex-код, чтобы смешивать цвета", "descriptionRU": [ @@ -4562,14 +4372,37 @@ ], "challengeSeed": [ "" + " .green-text {", + " color: black;", + " }", + " .dodger-blue-text {", + " color: black;", + " }", + " .orange-text {", + " color: black;", + " }", + "", + "", + "

I am red!

", + "", + "

I am green!

", + "", + "

I am dodger blue!

", + "", + "

I am orange!

" ], "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(255, 165, 0)\", 'message: Give your body element the background-color of orange.');", - "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#FFA500((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the hex code for the color orange instead of the word orange. For example body { color: #FFA500; }');" + "assert($('.red-text').css('color') === 'rgb(255, 0, 0)', 'message: Give your h1 element with the text I am red! the color red.');", + "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?#FF0000\\s*?;\\s*?}/gi), 'message: Use the hex code for the color red instead of the word red.');", + "assert($('.green-text').css('color') === 'rgb(0, 255, 0)', 'message: Give your h1 element with the text I am green! the color green.');", + "assert(code.match(/\\.green-text\\s*?{\\s*?color:\\s*?#00FF00\\s*?;\\s*?}/gi), 'message: Use the hex code for the color green instead of the word green.');", + "assert($('.dodger-blue-text').css('color') === 'rgb(41, 152, 228)', 'message: Give your h1 element with the text I am dodger blue! the color dodger blue.');", + "assert(code.match(/\\.dodger-blue-text\\s*?{\\s*?color:\\s*?#2998E4\\s*?;\\s*?}/gi), 'message: Use the hex code for the color dodger blue instead of the word dodgerblue.');", + "assert($('.orange-text').css('color') === 'rgb(255, 165, 0)', 'message: Give your h1 element with the text I am orange! the color orange.');", + "assert(code.match(/\\.orange-text\\s*?{\\s*?color:\\s*?#FFA500\\s*?;\\s*?}/gi), 'message: Use the hex code for the color orange instead of the word orange.');" ], "descriptionPtBR": [ "A partir dessas três cores puras (vermelho, verde e azul), podemos criar 16 milhões de cores.", @@ -4592,101 +4425,15 @@ "Gib dem body Element eine orange Hintergrundfarbe indem du den Hexadezimal Code #FFA500 verwendest." ] }, - { - "id": "bad87fee1348bd9aede08720", - "title": "Use Hex Code to Color Elements Gray", - "description": [ - "From these three pure colors (red, green and blue), we can create 16 million other colors.", - "We can also create different shades of gray by evenly mixing all three colors.", - "Make the body element's background color gray by giving it the hex code value of #808080" - ], - "titleRU": "Используйте hex-код, чтобы сделать элементы серыми", - "descriptionRU": [ - "Из этих трёх чистых цветов (красного, зелёного и синего), мы можем создать 16 миллионов других цветов.", - "Также мы можем создавать различные оттенки серого смешивая равномерно все три цвета.", - "Сделайте цвет фона элемента body серым, присвоив его соответствующему свойству значение hex-кода равное #808080" - ], - "challengeSeed": [ - "" - ], - "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(128, 128, 128)\", 'message: Give your body element the background-color of gray.');", - "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#808080((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use the hex code the color gray instead of the word gray. For example body { color: #808080; }');" - ], - "descriptionPtBR": [ - "A partir dessas três cores puras (vermelho, verde e azul), podemos criar 16 milhões de cores.", - "Também podemos criar tons de cinza diferentes ao misturar essas três cores.", - "Faça com que a cor de fundo do elemento body seja cinza, usando o código hexadecimal #808080." - ], - "namePtBR": "Use Código Hexadecimal dar a Cor Cinza a Elementos", - "type": "waypoint", - "challengeType": 0, - "titleEs": "Usa el código hexadecimal para colorear de gris los elementos", - "descriptionEs": [ - "A partir de estos tres colores puros (rojo, verde y azul), podemos crear 16 millones de colores.", - "También podemos crear diferentes tonos de gris mezclando uniformemente los tres colores.", - "Haz que el color de fondo del elemento body sea gris, dándole el código hexadecimal #808080" - ], - "titleDe": "Verwende Hexadezimal Code um Elemente grau zu färben", - "descriptionDe": [ - "Mit diesen drei puren Farben (Rot, Grün und Blau) können wir 16 Millionen andere Farben erzeugen.", - "Wir können auch verschiedene Grautöne erzeugen indem wir alle drei Farben in gleichen Teilen mischen.", - "Gib dem body Element eine graue Hintergrundfarbe indem du den Hexadezimal Code #808080 verwendest." - ] - }, - { - "id": "bad87fee1348bd9aedf08720", - "title": "Use Hex Code for Specific Shades of Gray", - "description": [ - "We can also create other shades of gray by evenly mixing all three colors. We can go very close to true black.", - "Make the body element's background color a dark gray by giving it the hex code value of #111111" - ], - "titleRU": "Используйте hex-код для получения определённого оттенка серого", - "descriptionRU": [ - "Также мы можем создавать другие оттенки серого равномерным смешением всех трёх цветов. Так мы можем добраться почти до абсолютно чёрного.", - "Сделайте цвет фона элемента body тёмно-серым, присвоив его соответствующему свойству значение hex-кода равное #111111" - ], - "challengeSeed": [ - "" - ], - "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(17, 17, 17)\", 'message: Give your body element the background-color of a dark gray.');", - "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#111(111)?((\\s*})|(;[\\s\\S]*?}))/gi), 'message: Use hex code to make a dark gray. For example body { color: #111111; }');" - ], - "descriptionPtBR": [ - "Também podemos criar tons de cinza diferentes ao misturar essas três cores. Podemos chegar muito perto de um fundo completamente preto.", - "Faça com que a cor de fundo do elemento body seja cinza escuro através do código hexadecimal #111111." - ], - "namePtBR": "Use Código Hexadecimal dar Tons de Cinza a Elementos", - "type": "waypoint", - "challengeType": 0, - "titleEs": "Usa el código hexadecimal para colorear con tonos de gris", - "descriptionEs": [ - "También podemos crear otros tonos de gris mezclando uniformemente los tres colores. Podemos ir muy cerca del verdadero negro. ", - "Haz que el color de fondo del elemento body sea gris oscuro dandole el código hexadecimal #111111" - ], - "titleDe": "Verwende Hexadezimal Code für spezifische Grautöne", - "descriptionDe": [ - "Wir können auch andere Grautöne erzeugen indem wir alle drei Farben gleichmäßig mischen. Damit können wir uns an echtes Schwarz annähern.", - "Gib dem body Element eine dunkelgraue Hintergrundfarbe indem du den Hexadezimal Code #111111 verwendest." - ] - }, { "id": "bad87fee1348bd9aedf08719", "title": "Use Abbreviated Hex Code", "description": [ "Many people feel overwhelmed by the possibilities of more than 16 million colors. And it's difficult to remember hex code. Fortunately, you can shorten it.", - "For example, red, which is #FF0000 in hex code, can be shortened to #F00. That is, one digit for red, one digit for green, one digit for blue.", + "For example, red's hex code #FF0000 can be shortened to #F00. This shortened form gives one digit for red, one digit for green, and one digit for blue.", "This reduces the total number of possible colors to around 4,000. But browsers will interpret #FF0000 and #F00 as exactly the same color.", - "Go ahead, try using #F00 to turn the body element's background-color red." + "Go ahead, try using the abbreviated hex codes to color the correct elements.", + "
ColorShort Hex Code
Cyan#0FF
Green#0F0
Red#F00
Fuchsia#F0F
" ], "titleRU": "Используйте аббревиатуры hex-кода", "descriptionRU": [ @@ -4697,14 +4444,37 @@ ], "challengeSeed": [ "" + " .fuchsia-text {", + " color: #000000;", + " }", + " .cyan-text {", + " color: #000000;", + " }", + " .green-text {", + " color: #000000;", + " }", + "", + "", + "

I am red!

", + "", + "

I am fuchsia!

", + "", + "

I am cyan!

", + "", + "

I am green!

" ], "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'message: Give your body element the background-color of red.');", - "assert(code.match(/body\\s*{(([\\s\\S]*;\\s*?)|\\s*?)background.*\\s*:\\s*?#F00((\\s*})|(\\s*;[\\s\\S]*?}))/gi), 'message: Use abbreviated hex code instead of a six-character hex code. For example body { color: #F00; }');" + "assert($('.red-text').css('color') === 'rgb(255, 0, 0)', 'message: Give your h1 element with the text I am red! the color red.');", + "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?#F00\\s*?;\\s*?}/gi), 'message: Use the abbreviate hex code for the color red instead of the hex code #FF0000.');", + "assert($('.green-text').css('color') === 'rgb(0, 255, 0)', 'message: Give your h1 element with the text I am green! the color green.');", + "assert(code.match(/\\.green-text\\s*?{\\s*?color:\\s*?#0F0\\s*?;\\s*?}/gi), 'message: Use the abbreviated hex code for the color green instead of the hex code #00FF00.');", + "assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)', 'message: Give your h1 element with the text I am cyan! the color cyan.');", + "assert(code.match(/\\.cyan-text\\s*?{\\s*?color:\\s*?#0FF\\s*?;\\s*?}/gi), 'message: Use the abbreviated hex code for the color cyan instead of the hex code #00FFFF.');", + "assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)', 'message: Give your h1 element with the text I am fuchsia! the color fuchsia.');", + "assert(code.match(/\\.fuchsia-text\\s*?{\\s*?color:\\s*?#F0F\\s*?;\\s*?}/gi), 'message: Use the abbreviated hex code for the color fuchsia instead of the hex code #FF00FF.');" ], "descriptionPtBR": [ "Muitas pessoas se sentem confusas com as possibilidades de mais de 16 milhões de cores. Além disso, é difícil lembrar de códigos hexadecimais. Por sorte, podemos abreviá-lo.", @@ -4734,13 +4504,13 @@ "id": "bad87fee1348bd9aede08718", "title": "Use RGB values to Color Elements", "description": [ - "Another way you can represent colors in CSS is by using rgb values.", + "Another way you can represent colors in CSS is by using RGB values.", "The RGB value for black looks like this:", "rgb(0, 0, 0)", "The RGB value for white looks like this:", "rgb(255, 255, 255)", - "Instead of using six hexadecimal digits like you do with hex code, with rgb you specify the brightness of each color with a number between 0 and 255.", - "If you do the math, 16 times 16 is 256 total values. So rgb, which starts counting from zero, has the exact same number of possible values as hex code.", + "Instead of using six hexadecimal digits like you do with hex code, with RGB 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 RGB, which starts counting from zero, has the exact same number of possible values as hex code.", "Let's replace the hex code in our body element's background color with the RGB value for black: rgb(0, 0, 0)" ], "titleRU": "Используйте формат RGB для придания цвета элементам", @@ -4762,8 +4532,8 @@ "" ], "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'message: Your body element should have a black background.');", - "assert(code.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'message: Use rgb to give your body element the background-color of black. For example body { background-color: rgb(0, 0, 0); }');" + "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 0)\", 'message: Your body element should have an black background.');", + "assert(code.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'message: Use rgb to give your body element a color of black. For example body { background-color: rgb(255, 165, 0); }');" ], "descriptionPtBR": [ "Outra forma em que você pode representar cores em CSS é utilizando valores rgb.", @@ -4799,186 +4569,6 @@ "Anstatt sechs Hexadezimalziffern zu verwenden, legst du mit rgb die Helligkeit jeder einzelner Farbe mit einer Zahl zwischen 0 und 255 fest.", "Wenn du nachrechnest, 16 mal 16 ist 256 Werte. Also hat rgb, das mit Null hochzuzählen beginnt, die gleiche Anzahl an möglichen Farben wie Hexadezimal Code.", "Ersetzte jetzt den Hexadezimal Code der Hintergrundfarbe deines body Elements mit dem RGB Wert für Schwarz: rgb(0, 0, 0)" - - ] - }, - { - "id": "bad88fee1348bd9aedf08726", - "title": "Use RGB to Color Elements White", - "description": [ - "The RGB value for black looks like this:", - "rgb(0, 0, 0)", - "The RGB value for white looks like this:", - "rgb(255, 255, 255)", - "Instead of using six hexadecimal digits like you do with hex code, with rgb you specify the brightness of each color with a number between 0 and 255.", - "Change the body element's background color from the RGB value for black to the rgb value for white: rgb(255, 255, 255)" - ], - "titleRU": "Используйте формат RGB, чтобы сделать элементы белыми", - "descriptionRU": [ - "Значение RGB для чёрного цвета выглядит следующим образом:", - "rgb(0, 0, 0)", - "Значение RGB для белого выглядит так:", - "rgb(255, 255, 255)", - "Вместо использования шести шестнадцатиразрядных цифр, как вы делаете, когда применяете hex-код, применяя rgb вы указываете значение яркости каждого цвета в диапазоне от 0 до 255.", - "Измените цвет фона элемента body со значения соответствующего чёрному в формате RGB на значение соответствующее белому: rgb(255, 255, 255)" - ], - "challengeSeed": [ - "" - ], - "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(255, 255, 255)\", 'message: Your body should have a white background.');", - "assert(code.match(/rgb\\s*\\(\\s*255\\s*,\\s*255\\s*,\\s*255\\s*\\)/ig), 'message: Use rgb to give your body element the background-color of white. For example body { background-color: rgb(255, 255 , 255); }');" - ], - "descriptionPtBR": [ - "O valor RGB para preto é assim:", - "rgb(0, 0, 0)", - "O valor RGB para branco é assim:", - "rgb(255, 255, 255)", - "Ao invés de utilizar 6 dígitos hexadecimais, com rgb você especifica o brilho de cada cor com um número entre 0 e 255.", - "Substitua o código hexadecimal da cor de fundo do nosso elemento body que possui o valor RGB para preto, pelo valor rgb para branco: rgb(255, 255, 255)." - ], - "namePtBR": "Use Valores RGB para Dar a Cor Branca a Elementos", - "type": "waypoint", - "challengeType": 0, - "titleEs": "Usa RGB para colorear de blanco los elementos", - "descriptionEs": [ - "El valor RGB para el negro, luce así:", - "rgb(0, 0, 0)", - "El valor RGB para el blanco, se ve así:", - "rgb(255, 255, 255)", - "En lugar de utilizar seis dígitos hexadecimales, con rgb especificas el brillo de cada color con un número entre 0 y 255.", - "Cambia el color de fondo del elemento body del valor RGB para el negro al valor rgb para el blanco: rgb(255, 255, 255)" - ], - "titleDe": "Verwende RGB Werte um Elemente weiß zu färben", - "descriptionDe": [ - "Der RGB Wert für Schwarz sieht so aus:", - "rgb(0, 0, 0)", - "Der RGB Wert für Weiß sieht so aus:", - "rgb(255, 255, 255)", - "Anstatt sechs Hexadezimalziffern zu verwenden, legst du mit rgb die Helligkeit jeder einzelner Farbe mit einer Zahl zwischen 0 und 255 fest.", - "Ändere die Hintergrundfarbe des body Elements vom RGB Wert für Schwarz zum rgb Wert für Weiß: rgb(255, 255, 255)" - ] - }, - { - "id": "bad89fee1348bd9aedf08724", - "title": "Use RGB to Color Elements Red", - "description": [ - "Just like with hex code, you can represent different colors in RGB by using combinations of different values.", - "These values follow the pattern of RGB: the first number represents red, the second number represents green, and the third number represents blue.", - "Change the body element's background color to the RGB value red: rgb(255, 0, 0)" - ], - "titleRU": "Используйте формат RGB, чтобы сделать элементы красными", - "descriptionRU": [ - "Также как и в hex-коде, вы можете представлять различные цвета в формате RGB с помощью комбинаций различных значений.", - "Эти значения соответствуют модели RGB: первое число - красный, второе - зелёный, третье - синий.", - "Измените цвет фона элемента body на значение в формате RGB соответствующее красному: rgb(255, 0, 0)" - ], - "challengeSeed": [ - "" - ], - "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'message: Your body should have a red background.');", - "assert(code.match(/rgb\\s*\\(\\s*255\\s*,\\s*0\\s*,\\s*0\\s*\\)/ig), 'message: Use rgb to give your body element the background-color of red. For example body { background-color: rgb(255, 0, 0); }');" - ], - "descriptionPtBR": [ - "Da mesma forma que com códigos em hexadecimal, você pode representar cores diferentes em RGB através do uso de combinações com diferentes valores.", - "Esses valores seguem o padrão de RGB: O primeiro número representa vermelho, o segundo representa verde, e o terceiro representa azul.", - "Mude a cor de fundo do elemento body para vermelho usando seu valor RGB: rgb(255, 0, 0)." - ], - "namePtBR": "Use Valores RBG para Dar a Cor Vermelha a Elementos", - "type": "waypoint", - "challengeType": 0, - "titleEs": "Usa RGB para colorear de rojo los elementos", - "descriptionEs": [ - "Al igual que con el código hexadecimal, puedes representar diferentes colores en RGB mediante el uso de combinaciones de diferentes valores.", - "Estos valores siguen el patrón de RGB: el primer número representa rojo, el segundo número representa el verde, y el tercer número representa azul.", - "Cambia el color de fondo del elemento body al rojo usando su valor RGB: rgb(255, 0, 0)" - ], - "titleDe": "Verwende RGB um Elemente rot zu färben", - "descriptionDe": [ - "Wie auch beim Hexadezimal Code, kannst du verschiedene Farben in RGB durch die Kombination von verschiedenen Werten festlegen.", - "Diese Werte folgen dem Muster von RGB: die erste Zahl steht für Rot, die zweite für Grün und die dritte für Blau.", - "Ändere die Hintergrundfarbe des body ELements zum RGB Wert für Rot: rgb(255, 0, 0)" - ] - }, - { - "id": "bad80fee1348bd9aedf08723", - "title": "Use RGB to Color Elements Green", - "description": [ - "Now change the body element's background color to the rgb value green: rgb(0, 255, 0)" - ], - "titleRU": "Используйте формат RGB, чтобы сделать элементы зелёными", - "descriptionRU": [ - "Теперь измените цвет фона элемента body на значение rgb соответствующее зелёному: rgb(0, 255, 0)" - ], - "challengeSeed": [ - "" - ], - "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(0, 255, 0)\", 'message: Your body element should have a green background.');", - "assert(code.match(/rgb\\s*\\(\\s*0\\s*,\\s*255\\s*,\\s*0\\s*\\)/ig), 'message: Use rgb to give your body element the background-color of green. For example body { background-color: rgb(0, 255, 0); }');" - ], - "descriptionPtBR": [ - "Agora, mude a cor de fundo do elemento body para verde usando seu valor RGB: rgb (0, 255, 0)." - ], - "namePtBR": "Use Valores RBG para Dar a Cor Verde a Elementos", - "type": "waypoint", - "challengeType": 0, - "titleEs": "Usa RGB para colorear de verde los elementos", - "descriptionEs": [ - "Ahora cambia el color de fondo del elemento body a verde usando su valor RGB: rgb (0, 255, 0)" - ], - "titleDe": "Verwende RGB um Elemente grün zu färben", - "descriptionDe": [ - "Jetzt ändere die Hintergrundfarbe des body Elements zum rgb Wert von Grün: rgb(0, 255, 0)" - ] - }, - { - "id": "bad81fee1348bd9aedf08722", - "title": "Use RGB to Color Elements Blue", - "description": [ - "Change the body element's background color to the RGB value blue: rgb(0, 0, 255)" - ], - "titleRU": "Используйте формат RGB, чтобы сделать элементы синими", - "descriptionRU": [ - "Измените цвет фона элемента body на значение в формате RGB соответствующее синему: rgb(0, 0, 255)" - ], - "challengeSeed": [ - "" - ], - "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(0, 0, 255)\", 'message: Your body element should have a blue background.');", - "assert(code.match(/rgb\\s*\\(\\s*0\\s*,\\s*0\\s*,\\s*255\\s*\\)/ig), 'message: Use rgb to give your body element the background-color of blue. For example body { background-color: rgb(0, 0, 255); }');" - ], - "descriptionPtBR": [ - "Agora, mude a cor de fundo do elemento body para azul usando seu valor RGB: rgb(0, 0, 255)." - ], - "namePtBR": "Use Valores RBG para Dar a Cor Azul a Elementos", - "type": "waypoint", - "challengeType": 0, - "titleEs": "Usa RGB para colorear de azul los elementos", - "descriptionEs": [ - "Cambia el color de fondo del elemento body a azul usando su valor RGB: rgb(0, 0, 255)" - ], - "titleDe": "Verwende RGB um Elemente Blau zu färben", - "descriptionDe": [ - "Ändere die Hintergrundfarbe des body Elements zum RGB Wert von Blau: rgb(0, 0, 255)" ] }, { @@ -4986,7 +4576,8 @@ "title": "Use RGB to Mix Colors", "description": [ "Just like with hex code, you can mix colors in RGB by using combinations of different values.", - "Change the body element's background color to the RGB value orange: rgb(255, 165, 0)" + "Replace the color words in our style element with their correct RGB values.", + "
ColorRGB
Bluergb(0, 0, 255)
Redrgb(255, 0, 0)
Orchidrgb(218, 112, 214)
Siennargb(160, 82, 45)
" ], "titleRU": "Используйте формат RGB, чтобы смешивать цвета", "descriptionRU": [ @@ -4995,14 +4586,37 @@ ], "challengeSeed": [ "" + " .orchid-text {", + " color: #000000;", + " }", + " .sienna-text {", + " color: #000000;", + " }", + " .blue-text {", + " color: #000000;", + " }", + "", + "", + "

I am red!

", + "", + "

I am orchid!

", + "", + "

I am sienna!

", + "", + "

I am blue!

" ], "tests": [ - "assert($(\"body\").css(\"background-color\") === \"rgb(255, 165, 0)\", 'message: Your body element should have an orange background.');", - "assert(code.match(/rgb\\s*\\(\\s*255\\s*,\\s*165\\s*,\\s*0\\s*\\)/ig), 'message: Use rgb to give your body element the background-color of orange. For example body { background-color: rgb(255, 165, 0); }');" + "assert($('.red-text').css('color') === 'rgb(255, 0, 0)', 'message: Give your h1 element with the text I am red! the color red.');", + "assert(code.match(/\\.red-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?255\\s*?,\\s*?0\\s*?,\\s*?0\\s*?\\)\\s*?;\\s*?}/gi), 'message: Use rgb for the color red.');", + "assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)', 'message: Give your h1 element with the text I am orchid! the color orchid.');", + "assert(code.match(/\\.orchid-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?218\\s*?,\\s*?112\\s*?,\\s*?214\\s*?\\)\\s*?;\\s*?}/gi), 'message: Use rgb for the color orchid.');", + "assert($('.blue-text').css('color') === 'rgb(0, 0, 255)', 'message: Give your h1 element with the text I am blue! the color blue.');", + "assert(code.match(/\\.blue-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?255\\s*?\\)\\s*?;\\s*?}/gi), 'message: Use rgb for the color blue.');", + "assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)', 'message: Give your h1 element with the text I am sienna! the color sienna.');", + "assert(code.match(/\\.sienna-text\\s*?{\\s*?color:\\s*?rgb\\(\\s*?160\\s*?,\\s*?82\\s*?,\\s*?45\\s*?\\)\\s*?;\\s*?}/gi), 'message: Use rgb for the color sienna.');" ], "descriptionPtBR": [ "Assim como com código hexadecimal, você pode misturar as cores com RGB através do uso de combinações de valores diferentes.",