chore(i18n,curriculum): update translations (#44553)

This commit is contained in:
camperbot
2021-12-22 19:36:34 +05:30
committed by GitHub
parent 52dc01760e
commit 4ced66a1fa
41 changed files with 592 additions and 335 deletions

View File

@@ -10,35 +10,35 @@ dashedName: visualize-data-with-a-bar-chart
**Objetivo:** criar um app do [CodePen.io](https://codepen.io) que possua uma funcionalidade similar a essa: <https://codepen.io/freeCodeCamp/full/GrZVaM>.
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê a elas o seu próprio estilo pessoal.
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê a elas o seu próprio estilo pessoal.
Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização D3, baseada em svg. Os testes requerem que os eixos sejam gerados usando a propriedade de eixos do D3, que geram automaticamente marcações ao longo do eixo. Essas marcações são exigidas para passar nos testes do D3 porque suas posições são usadas para determinar o alinhamento dos elementos do gráfico. Você vai encontrar informações sobre a geração de eixos em <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Os elementos DOM obrigatórios (não virtuais) são consultados no momento de cada teste. Se você usar um framework de front-end (como o Vue por exemplo), os resultados dos testes podem ser imprecisos para conteúdo dinâmico. Esperamos dar suporte a eles um dia, mas atualmente esses frameworks não são suportados para os projetos de D3.
**Especificação de usuário nº 1:** meu gráfico deve ter um título com um `id="title"` correspondente.
**História de usuário nº 1:** meu gráfico deve ter um título com um `id="title"` correspondente.
**Especificação de usuário nº 2:** meu gráfico deve ter um elemento `g` no eixo x com um `id="x-axis"` correspondente.
**História de usuário nº 2:** meu gráfico deve ter um elemento `g` no eixo x com um `id="x-axis"` correspondente.
**Especificação de usuário nº 3:** meu gráfico deve ter um elemento `g` no eixo y com um `id="y-axis"` correspondente.
**História de usuário nº 3:** meu gráfico deve ter um elemento `g` no eixo y com um `id="y-axis"` correspondente.
**Especificação de usuário nº 4:** ambos os eixos devem conter múltiplos rótulos (labels) de marcação, cada um com uma `class="tick"` correspondente.
**História de usuário nº 4:** ambos os eixos devem conter múltiplos rótulos (labels) de marcação, cada um com uma `class="tick"` correspondente.
**Especificação de usuário nº 5:** meu gráfico deve ter um elemento `rect` para cada ponto com uma classe `class="bar"` correspondente exibindo os dados.
**História de usuário nº 5:** meu gráfico deve ter um elemento `rect` para cada ponto com uma classe `class="bar"` correspondente exibindo os dados.
**Especificação de usuário nº 6:** cada barra deve ter as propriedades `data-date` e `data-gdp`, contendo os valores `date` e `GDP`, respectivamente.
**História de usuário nº 6:** cada barra deve ter as propriedades `data-date` e `data-gdp`, contendo os valores `date` e `GDP`, respectivamente.
**Especificação de usuário nº 7:** as propriedades `data-date` das barras devem corresponder à ordem fornecida pelos dados.
**História de usuário nº 7:** as propriedades `data-date` das barras devem corresponder à ordem fornecida pelos dados.
**Especificação de usuário nº 8:** as propriedades `data-gdp` das barras devem corresponder à ordem fornecida pelos dados.
**História de usuário nº 8:** as propriedades `data-gdp` das barras devem corresponder à ordem fornecida pelos dados.
**Especificação de usuário nº 9:** a altura de cada barra deve representar corretamente os dados de `GDP` correspondentes.
**História de usuário nº 9:** a altura de cada barra deve representar corretamente os dados de `GDP` correspondentes.
**Especificação de usuário nº 10:** o atributo `data-date` e sua barra correspondente devem estar alinhados com o seu valor correspondente no eixo x.
**História de usuário nº 10:** o atributo `data-date` e sua barra correspondente devem estar alinhados com o seu valor correspondente no eixo x.
**Especificação de usuário nº 11:** o atributo `data-gdp` e sua barra correspondente devem estar alinhados com o seu valor correspondente no eixo y.
**História de usuário nº 11:** o atributo `data-gdp` e sua barra correspondente devem estar alinhados com o seu valor correspondente no eixo y.
**Especificação de usuário nº 12:** eu posso passar o mouse sobre uma área e ver uma dica com uma `id="tooltip"` correspondente, que exibe mais informações sobre a área.
**História de usuário nº 12:** eu posso passar o mouse sobre uma área e ver uma dica com uma `id="tooltip"` correspondente, que exibe mais informações sobre a área.
**Especificação de usuário nº 13:** minha ferramenta de dica (tooltip) deve ter uma propriedade `data-date` que corresponda à `data-date` da área ativa.
**História de usuário nº 13:** minha ferramenta de dica (tooltip) deve ter uma propriedade `data-date` que corresponda à `data-date` da área ativa.
Aqui está o dataset de que você precisará para completar este projeto: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json`

View File

@@ -10,31 +10,31 @@ dashedName: visualize-data-with-a-choropleth-map
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/EZKqza>.
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê à página o seu próprio estilo pessoal.
Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização D3, baseada em svg. Os elementos DOM obrigatórios (não virtuais) são consultados no momento de cada teste. Se você usar um framework de front-end (como o Vue por exemplo), os resultados dos testes podem ser imprecisos para conteúdo dinâmico. Esperamos dar suporte a eles um dia, mas atualmente esses frameworks não são suportados para os projetos de D3.
**Especificação de usuário nº 1: ** meu coropleto deve ter um título com um `id="title"` correspondente.
**História de usuário nº 1: ** meu coropleto deve ter um título com um `id="title"` correspondente.
**Especificação de usuário nº 2: ** meu coropleto deve ter um elemento de descrição com uma `id="description"` correspondente.
**História de usuário nº 2: ** meu coropleto deve ter um elemento de descrição com uma `id="description"` correspondente.
**Especificação de usuário nº 3: ** meu coropleto deve ter condados com um `class="county"` correspondente que representa os dados.
**História de usuário nº 3: ** meu coropleto deve ter condados com um `class="county"` correspondente que representa os dados.
**Especificação de usuário nº 4: ** deve haver pelo menos 4 cores de preenchimento diferentes usadas para os condados.
**História de usuário nº 4: ** deve haver pelo menos 4 cores de preenchimento diferentes usadas para os condados.
**Especificação de usuário nº 5:** cada um dos meus condados devem ter propriedades `data-fips` e `data-education` contendo seus correspondentes valores de `fips` e `education`.
**História de usuário nº 5:** cada um dos meus condados devem ter propriedades `data-fips` e `data-education` contendo seus correspondentes valores de `fips` e `education`.
** Especificação de usuário nº 6: ** meu coropleto deve ter um condado para cada dado fornecido.
** História de usuário nº 6: ** meu coropleto deve ter um condado para cada dado fornecido.
**Especificação de usuário nº 7:** os condados devem ter os valores `data-fips` e `data-education` que correspondam aos dados da amostra.
**História de usuário nº 7:** os condados devem ter os valores `data-fips` e `data-education` que correspondam aos dados da amostra.
**Especificação de usuário nº 8:** meu cloropleto deve ter uma legenda com um `id="legend"` correspondente.
**História de usuário nº 8:** meu cloropleto deve ter uma legenda com um `id="legend"` correspondente.
**Especificação de usuário nº 9:** deve haver pelo menos 4 cores diferentes de preenchimento usadas para a legenda.
**História de usuário nº 9:** deve haver pelo menos 4 cores diferentes de preenchimento usadas para a legenda.
**Especificação de usuário nº 10:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
**História de usuário nº 10:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
**Especificação de usuário nº 11:** minha dica deve ter uma propriedade `data-education` que corresponde ao `data-education` da área ativa.
**História de usuário nº 11:** minha dica deve ter uma propriedade `data-education` que corresponde ao `data-education` da área ativa.
Aqui estão os conjuntos de dados de que você precisará para completar esse projeto:

View File

@@ -10,43 +10,43 @@ dashedName: visualize-data-with-a-heat-map
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/JEXgeY>.
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização D3, baseada em svg. Os elementos DOM necessários (não virtuais) são consultados no momento de cada teste. Se você usar um framework de front-end (como o Vue por exemplo), os resultados dos testes podem ser imprecisos para conteúdo dinâmico. Esperamos dar suporte a eles um dia, mas atualmente esses frameworks não são suportados para os projetos de D3.
**Especificação de usuário nº 1: ** meu mapa de calor deve ter um título com um `id="title"` correspondente.
**História de usuário nº 1: ** meu mapa de calor deve ter um título com um `id="title"` correspondente.
**Especificação de usuário nº 2: ** meu mapa de calor deve ter uma descrição com uma `id="description"` correspondente.
**História de usuário nº 2: ** meu mapa de calor deve ter uma descrição com uma `id="description"` correspondente.
**Especificação de usuário nº 3:** meu mapa de calor deve ter eixo x com um `id="x-axis"` correspondente.
**História de usuário nº 3:** meu mapa de calor deve ter eixo x com um `id="x-axis"` correspondente.
**Especificação de usuário nº 4:** meu mapa de calor deve ter eixo y com um `id="y-axis"` correspondente.
**História de usuário nº 4:** meu mapa de calor deve ter eixo y com um `id="y-axis"` correspondente.
**Especificação de usuário nº 5: ** meu mapa de calor deve ter elementos `rect` com uma `class="cell"` correspondente que representa os dados.
**História de usuário nº 5: ** meu mapa de calor deve ter elementos `rect` com uma `class="cell"` correspondente que representa os dados.
**Especificação de usuário nº 6:** deve haver pelo menos 4 cores diferentes de preenchimento usadas para as células.
**História de usuário nº 6:** deve haver pelo menos 4 cores diferentes de preenchimento usadas para as células.
**Especificação de usuário nº 7:** cada célula deve ter as propriedades `data-month`, `data-year`, `data-temp` contendo os valores de `month`, `year` e `temperature` correspondentes.
**História de usuário nº 7:** cada célula deve ter as propriedades `data-month`, `data-year`, `data-temp` contendo os valores de `month`, `year` e `temperature` correspondentes.
**Especificação de usuário nº 8:** os valores `data-month` e `data-year` de cada célula devem estar dentro do intervalo dos dados.
**História de usuário nº 8:** os valores `data-month` e `data-year` de cada célula devem estar dentro do intervalo dos dados.
**Especificação de usuário nº 9:** meu mapa de calor deve ter células que estejam alinhadas com o mês correspondente no eixo y.
**História de usuário nº 9:** meu mapa de calor deve ter células que estejam alinhadas com o mês correspondente no eixo y.
**Especificação de usuário nº 10:** meu mapa de calor deve ter células que estejam alinhadas com o ano correspondente no eixo x.
**História de usuário nº 10:** meu mapa de calor deve ter células que estejam alinhadas com o ano correspondente no eixo x.
**Especificação de usuário nº 11:** meu mapa de calor deve ter diversas etiquetas de confirmação no eixo y com o nome do mês por extenso.
**História de usuário nº 11:** meu mapa de calor deve ter diversas etiquetas de confirmação no eixo y com o nome do mês por extenso.
**Especificação de usuário nº 12:** meu mapa de calor deve ter diversas etiquetas de confirmação no eixo x com os anos entre 1754 e 2015.
**História de usuário nº 12:** meu mapa de calor deve ter diversas etiquetas de confirmação no eixo x com os anos entre 1754 e 2015.
**Especificação de usuário nº 13:** meu mapa de calor deve ter uma legenda com o `id="legend"` correspondente.
**História de usuário nº 13:** meu mapa de calor deve ter uma legenda com o `id="legend"` correspondente.
**Especificação de usuário nº 14:** minha legenda deve conter elementos `rect`.
**História de usuário nº 14:** minha legenda deve conter elementos `rect`.
**Especificação de usuário nº 15:** os elementos `rect` na legenda devem usar pelo menos 4 cores diferentes de preenchimento.
**História de usuário nº 15:** os elementos `rect` na legenda devem usar pelo menos 4 cores diferentes de preenchimento.
**Especificação de usuário nº 16:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
**História de usuário nº 16:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
**Especificação de usuário nº 17:** minha dica deve ter uma propriedade `data-year` que corresponde ao `data-year` da área ativa.
**História de usuário nº 17:** minha dica deve ter uma propriedade `data-year` que corresponde ao `data-year` da área ativa.
Aqui está o conjunto de dados de que você vai precisar para completar esse projeto: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json`

View File

@@ -10,39 +10,39 @@ dashedName: visualize-data-with-a-scatterplot-graph
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/bgpXyK>.
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização D3, baseada em svg. Os testes requerem que os eixos sejam gerados usando a propriedade de eixos do D3, que geram automaticamente marcações ao longo do eixo. Essas marcações são exigidas para passar nos testes do D3 porque suas posições são usadas para determinar o alinhamento dos elementos do gráfico. Você vai encontrar informações sobre a geração de eixos em <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Os elementos DOM necessários (não virtuais) são consultados no momento de cada teste. Se você usar um framework de front-end (como o Vue por exemplo), os resultados dos testes podem ser imprecisos para conteúdo dinâmico. Esperamos dar suporte a eles um dia, mas atualmente esses frameworks não são suportados para os projetos de D3.
**Especificação de usuário nº 1:** eu posso ver um elemento de título que tem um `id="title"` correspondente.
**História de usuário nº 1:** eu posso ver um elemento de título que tem um `id="title"` correspondente.
**Especificação de usuário nº 2:** eu posso ver um eixo x com um `id="x-axis"` correspondente.
**História de usuário nº 2:** eu posso ver um eixo x com um `id="x-axis"` correspondente.
**Especificação de usuário nº 3:** eu posso ver um eixo y com um `id="y-axis"` correspondente.
**História de usuário nº 3:** eu posso ver um eixo y com um `id="y-axis"` correspondente.
**Especificação de usuário nº 4:** eu posso ver pontos e cada um deles tem uma classe `dot`, que representa os dados a serem plotados.
**História de usuário nº 4:** eu posso ver pontos e cada um deles tem uma classe `dot`, que representa os dados a serem plotados.
**Especificação de usuário nº 5:** cada ponto deve ter as propriedades `data-xvalue` e `data-yvalue` contendo seus valores correspondentes de `x` e de `y`.
**História de usuário nº 5:** cada ponto deve ter as propriedades `data-xvalue` e `data-yvalue` contendo seus valores correspondentes de `x` e de `y`.
**Especificação de usuário nº 6:** os valores `data-xvalue` e `data-yvalue` de cada ponto devem estar dentro do intervalo factual de dados e no formato de dados correto. Para `data-xvalue`, objetos de inteiros (anos completos) ou `Date` são aceitáveis para a avaliação dos testes. Para `data-yvalue` (minutos), use objetos `Date`.
**História de usuário nº 6:** os valores `data-xvalue` e `data-yvalue` de cada ponto devem estar dentro do intervalo factual de dados e no formato de dados correto. Para `data-xvalue`, objetos de inteiros (anos completos) ou `Date` são aceitáveis para a avaliação dos testes. Para `data-yvalue` (minutos), use objetos `Date`.
**Especificação de usuário nº 7:** o `data-xvalue` e seu ponto correspondente devem estar alinhados com o ponto/valor correspondente no eixo x.
**História de usuário nº 7:** o `data-xvalue` e seu ponto correspondente devem estar alinhados com o ponto/valor correspondente no eixo x.
**Especificação de usuário nº 8:** o `data-yvalue` e seu ponto correspondente devem estar alinhados com o ponto/valor correspondente no eixo y.
**História de usuário nº 8:** o `data-yvalue` e seu ponto correspondente devem estar alinhados com o ponto/valor correspondente no eixo y.
**Especificação de usuário nº 9:** eu posso ver diversas etiquetas de confirmação no eixo y com o formato de tempo `%M:%S`.
**História de usuário nº 9:** eu posso ver diversas etiquetas de confirmação no eixo y com o formato de tempo `%M:%S`.
**Especificação de usuário nº 10:** eu posso ver diversas etiquetas de confirmação no eixo x que mostram o ano.
**História de usuário nº 10:** eu posso ver diversas etiquetas de confirmação no eixo x que mostram o ano.
**Especificação de usuário nº 11:** eu posso ver que o intervalo de etiquetas com o eixo x está dentro do intervalo factual de dados do eixo x.
**História de usuário nº 11:** eu posso ver que o intervalo de etiquetas com o eixo x está dentro do intervalo factual de dados do eixo x.
**Especificação de usuário nº 12:** eu posso ver que o intervalo de etiquetas com o eixo y está dentro do intervalo factual de dados do eixo y.
**História de usuário nº 12:** eu posso ver que o intervalo de etiquetas com o eixo y está dentro do intervalo factual de dados do eixo y.
**Especificação de usuário nº 13:** eu posso ver uma legenda que tem `id="legend"` e contém texto descritivo.
**História de usuário nº 13:** eu posso ver uma legenda que tem `id="legend"` e contém texto descritivo.
**Especificação de usuário nº 14:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
**História de usuário nº 14:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
**Especificação de usuário nº 15:** minha dica deve ter uma propriedade `data-year` que corresponde ao `data-xvalue` da área ativa.
**História de usuário nº 15:** minha dica deve ter uma propriedade `data-year` que corresponde ao `data-xvalue` da área ativa.
Aqui está o conjunto de dados de que você vai precisar para completar esse projeto: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json`

View File

@@ -10,31 +10,31 @@ dashedName: visualize-data-with-a-treemap-diagram
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/KaNGNR>.
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
Atenda às [histórias de usuário](https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio) abaixo e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização D3, baseada em svg. Os testes requerem que os eixos sejam gerados usando a propriedade de eixos do D3, que geram automaticamente marcações ao longo do eixo. Essas marcações são exigidas para passar nos testes do D3 porque suas posições são usadas para determinar o alinhamento dos elementos do gráfico. Você vai encontrar informações sobre a geração de eixos em <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Os elementos DOM necessários (não virtuais) são consultados no momento de cada teste. Se você usar um framework de front-end (como o Vue por exemplo), os resultados dos testes podem ser imprecisos para conteúdo dinâmico. Esperamos dar suporte a eles um dia, mas atualmente esses frameworks não são suportados para os projetos de D3.
**Especificação de usuário nº 1: ** meu treemap deve ter um título com um `id="title"` correspondente.
**História de usuário nº 1: ** meu treemap deve ter um título com um `id="title"` correspondente.
**Especificação de usuário nº 2: ** meu treemap deve ter uma descrição com uma `id="description"` correspondente.
**História de usuário nº 2: ** meu treemap deve ter uma descrição com uma `id="description"` correspondente.
**Especificação de usuário nº 3: ** meu treemap deve ter elementos `rect` com uma `class="tile"` que representa os dados.
**História de usuário nº 3: ** meu treemap deve ter elementos `rect` com uma `class="tile"` que representa os dados.
**Especificação de usuário nº 4:** deve haver pelo menos 4 cores diferentes de preenchimento usadas para os blocos.
**História de usuário nº 4:** deve haver pelo menos 4 cores diferentes de preenchimento usadas para os blocos.
**Especificação de usuário nº 5:** cada bloco deve ter as propriedades `data-name`, `data-category` e `data-value` contendo os valores de `name`, `category` e `value` correspondentes.
**História de usuário nº 5:** cada bloco deve ter as propriedades `data-name`, `data-category` e `data-value` contendo os valores de `name`, `category` e `value` correspondentes.
**Especificação de usuário nº 6:** a área de cada bloco deve corresponder à quantidade de `data-value`: blocos com um `data-value` maior devem ter uma área maior.
**História de usuário nº 6:** a área de cada bloco deve corresponder à quantidade de `data-value`: blocos com um `data-value` maior devem ter uma área maior.
**Especificação de usuário nº 7:** meu treemap deve ter uma legenda com o `id="legend"` correspondente.
**História de usuário nº 7:** meu treemap deve ter uma legenda com o `id="legend"` correspondente.
**Especificação de usuário nº 8:** minha legenda deve ter elementos `rect` com um `class="legend-item"` correspondente.
**História de usuário nº 8:** minha legenda deve ter elementos `rect` com um `class="legend-item"` correspondente.
**Especificação de usuário nº 9:** os elementos `rect` na legenda devem usar pelo menos 2 cores diferentes de preenchimento.
**História de usuário nº 9:** os elementos `rect` na legenda devem usar pelo menos 2 cores diferentes de preenchimento.
**Especificação de usuário nº 10:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
**História de usuário nº 10:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
**Especificação de usuário nº 11:** minha dica deve ter uma propriedade `data-value` que corresponda à `data-value` da área ativa.
**História de usuário nº 11:** minha dica deve ter uma propriedade `data-value` que corresponda à `data-value` da área ativa.
Para este projeto, você pode usar qualquer um dos seguintes conjuntos de dados: