diff --git a/seed/challenges/01-front-end-development-certification/advanced-ziplines.json b/seed/challenges/01-front-end-development-certification/advanced-ziplines.json
deleted file mode 100644
index ffa27f7fdfb5fc..00000000000000
--- a/seed/challenges/01-front-end-development-certification/advanced-ziplines.json
+++ /dev/null
@@ -1,245 +0,0 @@
-{
-  "name": "Advanced Front End Development Projects",
-  "order": 12.5,
-  "time": "150 hours",
-  "helpRoom": "HelpFrontEnd",
-  "challenges": [
-    {
-      "id": "bd7158d8c442eddfaeb5bd17",
-      "title": "Build a JavaScript Calculator",
-      "description": [
-        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/rLJZrA/' target='_blank'>https://codepen.io/freeCodeCamp/full/rLJZrA/</a>.",
-        "Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
-        "<strong>User Story:</strong> I can add, subtract, multiply and divide two numbers.",
-        "<strong>User Story:</strong> I can clear the input field with a clear button.",
-        "<strong>User Story:</strong> I can keep chaining mathematical operations together until I hit the equal button, and the calculator will tell me the correct output.",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
-        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. ",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "challengeSeed": [
-        "Drnp29SJY8w"
-      ],
-      "tests": [],
-      "type": "zipline",
-      "challengeType": 3,
-      "isRequired": true,
-      "translations": {
-        "es": {
-          "title": "Crea una calculadora JavaScript",
-          "description": [
-            "<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a esta: <a href='https://codepen.io/freeCodeCamp/full/PNKdjo/' target='_blank'>https://codepen.io/freeCodeCamp/full/PNKdjo/</a>.",
-            "<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
-            "<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que necesites. Dale tu estilo personal.",
-            "<span class='text-info'>Historia de usuario:</span> Puedo sumar, restar, multiplicar y dividir dos números.",
-            "<span class='text-info'>Historia de usuario opcional:</span> Puedo limpiar la pantalla con un botón de borrar.",
-            "<span class='text-info'>Historia de usuario opcional:</span> Puedo concatenar continuamente varias operaciones hasta que pulse el botón de igual, y la calculadora me mostrará la respuesta correcta.",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado.",
-            "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un enlace a tu CodePen. ",
-            "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        },
-        "pt-br": {
-          "title": "Construa uma calculadora JavaScript",
-          "description": [
-            "<span class='text-info'>Objetivo:</span> Construa uma aplicação em <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuja funcionalidade seja similar a esta: <a href='https://codepen.io/freeCodeCamp/full/rLJZrA/' target='_blank'>https://codepen.io/freeCodeCamp/full/rLJZrA/</a>.",
-            "<span class='text-info'>Regra #1:</span> Não veja o código do projeto de exemplo no CodePen. Encontre a sua própria forma de fazê-lo.",
-            "<span class='text-info'>Regra #2:</span> Satisfaça as seguintes <a href='https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio' target='_blank'>histórias de usuário</a>. Utilize qualquer biblioteca ou API que você precisar. Dê o seu próprio estilo pessoal.",
-            "<span class='text-info'>História de usuário:</span> Eu posso somar, subtrair, multiplicar e dividir dois números.",
-            "<span class='text-info'>História de usuário opcional:</span> Eu posso limpar o campo de entrada com um botão claro.",
-            "<span class='text-info'>História de usuário opcional:</span> Eu posso manter o encadeamento de operações matemáticas juntas até eu apertar o botão de igual, e a calculadora irá me dizer a resposta correta.",
-            "Lembre-se de utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Ler-Buscar-Perguntar</a> se você tiver dificuldades.",
-            "Quando tiver terminado, clique no botão \"Eu concluí este desafio\" e inclua um link para o seu projeto no CodePen. ",
-            "Você pode obter feedback sobre o seu projeto compartilhando-o com os seus amigos no Facebook."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7158d8c442eddfaeb5bd0f",
-      "title": "Build a Pomodoro Clock",
-      "description": [
-        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/aNyxXR/' target='_blank'>https://codepen.io/freeCodeCamp/full/aNyxXR/</a>.",
-        "Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
-        "<strong>User Story:</strong> I can start a 25 minute pomodoro, and the timer will go off once 25 minutes has elapsed.",
-        "<strong>User Story:</strong> I can reset the clock for my next pomodoro.",
-        "<strong>User Story:</strong> I can customize the length of each pomodoro.",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
-        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. ",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "challengeSeed": [
-        "lgj3nfzV0xM"
-      ],
-      "tests": [],
-      "type": "zipline",
-      "isRequired": true,
-      "challengeType": 3,
-      "translations": {
-        "es": {
-          "title": "Crea un reloj pomodoro",
-          "description": [
-            "<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/freeCodeCamp/full/aNyxXR/' target='_blank'>https://codepen.io/freeCodeCamp/full/aNyxXR/</a>.",
-            "<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
-            "<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.",
-            "<span class='text-info'>Historia de usuario:</span> Puedo iniciar un pomodoro de 25 minutos, y el cronómetro terminará cuando pasen 25 minutos.",
-            "<span class='text-info'>Historia de usuario:</span> Como usuario, puedo reiniciar el reloj para comenzar mi siguiente pomodoro.",
-            "<span class='text-info'>Historia de usuario:</span> Como usuario, puedo personalizar la longitud de cada pomodoro.",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado.",
-            "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un enlace a tu CodePen.",
-            "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        },
-        "ru": {
-          "title": "Создайте таймер Pomodoro",
-          "description": [
-            "<span class='text-info'>Задание:</span> Создайте <a href='https://codepen.io' target='_blank'>CodePen.io</a> который успешно копирует вот этот: <a href='https://codepen.io/freeCodeCamp/full/aNyxXR/' target='_blank'>https://codepen.io/freeCodeCamp/full/aNyxXR/</a>.",
-            "<span class='text-info'>Правило #1:</span> Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
-            "<span class='text-info'>Правило #2:</span> Можете использовать любые библиотеки или API, которые потребуются.",
-            "<span class='text-info'>Правило #3:</span> Воссоздайте функционал приведенного примера и не стесняйтесь добавить что-нибудь от себя.",
-            "Реализуйте следующие <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>пользовательские истории</a>, сделайте также бонусные по желанию:",
-            "<span class='text-info'>Пользовательская история:</span> В качестве пользователя, я могу запустить 25 минутную 'помидорку', по истечении которой таймер выключится.",
-            "<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу сбросить таймер для установки следующей 'помидорки'.",
-            "<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу выбирать длительность 'помидорки'.",
-            "Если что-то не получается, воспользуйтесь <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a>.",
-            "Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen. Если вы программировали с кем-то в паре, также добавьте имя вашего напарника.",
-            "Если вы хотите получить немедленную оценку вашего проекта, нажмите эту кнопку и добавьте ссылку на ваш CodePen. В противном случае мы проверим его перед тем как вы приступите к проектам для некоммерческих организаций.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
-          ]
-        },
-        "pt-br": {
-          "title": "Construa um relógio Pomodoro",
-          "description": [
-            "<strong>Objetivo:</strong> Construa uma aplicação em <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuja funcionalidade seja similar a esta: <a href='https://codepen.io/freeCodeCamp/full/aNyxXR/' target='_blank'>https://codepen.io/freeCodeCamp/full/aNyxXR/</a>.",
-            "<span class='text-info'>Regra #1:</span> Não veja o código do projeto de exemplo no CodePen. Encontre a sua própria forma de fazê-lo.",
-            "<span class='text-info'>Regra #2:</span> Satisfaça as seguintes <a href='https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio' target='_blank'>histórias de usuário</a>. Utilize qualquer biblioteca ou API que você precisar. Dê o seu próprio estilo pessoal.",
-            "<span class='text-info'>História de usuário:</span> Eu posso começar um pomodoro de 25 minutos, e o temporizador desligará quando 25 minutos tiverem passado.",
-            "<span class='text-info'>História de usuário:</span> Eu posso zerar o relógio para o meu próximo pomodoro.",
-            "Lembre-se de utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Ler-Buscar-Perguntar</a> se você tiver dificuldades.",
-            "Quando tiver terminado, clique no botão \"Eu concluí este desafio\" e inclua um link para o seu projeto no CodePen. ",
-            "Você pode obter feedback sobre o seu projeto compartilhando-o com os seus amigos no Facebook."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7158d8c442eedfaeb5bd1c",
-      "title": "Build a Tic Tac Toe Game",
-      "description": [
-        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/KzXQgy/' target='_blank'>https://codepen.io/freeCodeCamp/full/KzXQgy/</a>.",
-        "Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
-        "<strong>User Story:</strong> I can play a game of Tic Tac Toe with the computer.",
-        "<strong>User Story:</strong> My game will reset as soon as it's over so I can play again.",
-        "<strong>User Story:</strong> I can choose whether I want to play as X or O.",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
-        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen.",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "challengeSeed": [
-        "Ia69O1ZNGEg"
-      ],
-      "tests": [],
-      "type": "zipline",
-      "challengeType": 3,
-      "isRequired": true,
-      "translations": {
-        "es": {
-          "title": "Crea un juego de Tic Tac Toe",
-          "description": [
-            "<span class='text-info'>Objetivo:</span> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/freeCodeCamp/full/KzXQgy/' target='_blank'>https://codepen.io/freeCodeCamp/full/KzXQgy/</a>.",
-            "<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
-            "<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.",
-            "<span class='text-info'>Historia de usuario:</span> Puedo jugar un juego de Tic Tac Toe contra el computador.",
-            "<span class='text-info'>Historia de usuario:</span> Mi juego se reiniciará tan pronto como termine para poder jugar de nuevo.",
-            "<span class='text-info'>Historia de usuario:</span> Puedo elegir si quiero jugar como X o como O.",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado.",
-            "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un enlace a tu CodePen.",
-            "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        },
-        "pt-br": {
-          "title": "Construa um Jogo da Velha",
-          "description": [
-            "<strong>Objetivo:</strong> Construa uma aplicação em <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuja funcionalidade seja similar a esta: <a href='https://codepen.io/freeCodeCamp/full/aNyxXR/' target='_blank'>https://codepen.io/freeCodeCamp/full/aNyxXR/</a>.",
-            "<span class='text-info'>Regra #1:</span> Não veja o código do projeto de exemplo no CodePen. Encontre a sua própria forma de fazê-lo.",
-            "<span class='text-info'>Regra #2:</span> Satisfaça as seguintes <a href='https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio' target='_blank'>histórias de usuário</a>. Utilize qualquer biblioteca ou API que você precisar. Dê o seu próprio estilo pessoal.",
-            "<span class='text-info'>História de usuário:</span> Eu posso jogar o Jogo da Velha com o computador.",
-            "<span class='text-info'>História de usuário:</span> Meu jogo reiniciará assim que acabar para que eu possa jogar novamente.",
-            "<span class='text-info'>História de usuário:</span> Eu posso escolher se eu quero jogar como X ou O.",
-            "Lembre-se de utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Ler-Buscar-Perguntar</a> se você tiver dificuldades.",
-            "Quando tiver terminado, clique no botão \"Eu concluí este desafio\" e inclua um link para o seu projeto no CodePen. ",
-            "Você pode obter feedback sobre o seu projeto compartilhando-o com os seus amigos no Facebook."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7158d8c442eddfaeb5bd1c",
-      "title": "Build a Simon Game",
-      "description": [
-        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/Em-Ant/full/QbRyqq/' target='_blank'>https://codepen.io/freeCodeCamp/full/obYBjE</a>.",
-        "Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
-        "<strong>User Story:</strong> I am presented with a random series of button presses.",
-        "<strong>User Story:</strong> Each time I input a series of button presses correctly, I see the same series of button presses but with an additional step.",
-        "<strong>User Story:</strong> I hear a sound that corresponds to each button both when the series of button presses plays, and when I personally press a button.",
-        "<strong>User Story:</strong> If I press the wrong button, I am notified that I have done so, and that series of button presses starts again to remind me of the pattern so I can try again.",
-        "<strong>User Story:</strong> I can see how many steps are in the current series of button presses.",
-        "<strong>User Story:</strong> If I want to restart, I can hit a button to do so, and the game will return to a single step.",
-        "<strong>User Story:</strong> I can play in strict mode where if I get a button press wrong, it notifies me that I have done so, and the game restarts at a new random series of button presses.",
-        "<strong>User Story:</strong> I can win the game by getting a series of 20 steps correct. I am notified of my victory, then the game starts over.",
-        "<strong>Hint:</strong> Here are mp3s you can use for each button: <code>https://s3.amazonaws.com/freecodecamp/simonSound1.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound2.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound3.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound4.mp3</code>.",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
-        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen.",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "challengeSeed": [
-        "tAPut8a47bA"
-      ],
-      "tests": [],
-      "type": "zipline",
-      "challengeType": 3,
-      "isRequired": true,
-      "translations": {
-        "es": {
-          "title": "Construye un juego de Simon",
-          "description": [
-            "<span class='text-info'>Objetivo:</span> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/Em-Ant/full/QbRyqq/' target='_blank'>https://codepen.io/Em-Ant/full/QbRyqq/</a>.",
-            "<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
-            "<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.",
-            "<span class='text-info'>Historia de usuario:</span> Se me presenta una serie aleatoria de pulsaciones a botones.",
-            "<span class='text-info'>Historia de usuario:</span> Cada vez que presiono una secuencia de pulsaciones correctamente, veo que vuelve a ejecutarse la misma serie de pulsaciones con un paso adicional.",
-            "<span class='text-info'>Historia de usuario:</span> Escucho un sonido que corresponde a cada botón cuando se ejecuta una secuencia de pulsaciones, así como cuando yo presiono un botón.",
-            "<span class='text-info'>Historia de usuario:</span> Si presiono el botón equivocado, se me notifica sobre mi error, y se ejecuta de nuevo la serie correcta de pulsaciones para recordarme cuál es la secuencia correcta, tras lo cual puedo intentar de nuevo.",
-            "<span class='text-info'>Historia de usuario:</span> Puedo ver cuántos pasos hay en la serie de pulsaciones actual.",
-            "<span class='text-info'>Historia de usuario:</span> Si deseo reiniciar, puedo pulsar un botón para hacerlo, y el juego comenzará desde una secuencia con un solo paso.",
-            "<span class='text-info'>Historia de usuario:</span> Puedo jugar en modo estricto donde si presiono el botón equivocado, se me notifica de mi error, y el juego vuelve a comenzar con una nueva serie aleatoria de colores.",
-            "<span class='text-info'>Historia de usuario:</span> Puedo ganar el juego si completo 20 pasos correctos. Se me notifica sobre mi victoria, tras lo cual el juego se reinicia.",
-            "<span class='text-info'>Pista:</span> Aquí hay algunos mp3s que puedes utilizar para tus botones: <code>https://s3.amazonaws.com/freecodecamp/simonSound1.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound2.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound3.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound4.mp3</code>.",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado.",
-            "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un enlace a tu CodePen.",
-            "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        },
-        "pt-br": {
-          "title": "Construa um jogo de Simon",
-          "description": [
-            "<strong>Objetivo:</strong> Construa uma aplicação em <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuja funcionalidade seja similar a esta: <a href='https://codepen.io/freeCodeCamp/full/aNyxXR/' target='_blank'>https://codepen.io/freeCodeCamp/full/aNyxXR/</a>.",
-            "<span class='text-info'>Regra #1:</span> Não veja o código do projeto de exemplo no CodePen. Encontre a sua própria forma de fazê-lo.",
-            "<span class='text-info'>Regra #2:</span> Satisfaça as seguintes <a href='https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio' target='_blank'>histórias de usuário</a>. Utilize qualquer biblioteca ou API que você precisar. Dê o seu próprio estilo pessoal.",
-            "<span class='text-info'>História de usuário:</span> Eu sou apresentado a uma sequência aleatória de botões para presisonar.",
-            "<span class='text-info'>História de usuário:</span> Cada vez que eu pressionar uma sequência de botões corretamente, eu vejo a mesma sequência de botões, mas com um passo adicional.",
-            "<span class='text-info'>História de usuário:</span> Eu ouço um som que corresponde a cada botão quando a sequência é tocada, e quando eu, pessoalmente, pressiono cada botão.",
-            "<span class='text-info'>História de usuário:</span> Se eu pressionar o botão errado, eu sou notificado, e essa sequência de botões recomeça para que eu possa me lembrar do padrão e tentar novamente.",
-            "<span class='text-info'>História de usuário:</span> Eu posso ver quantos passos estão na sequência atual de botões para pressionar.",
-            "<span class='text-info'>História de usuário:</span> Se eu quiser reiniciar, eu posso pressionar um botão e o jogo retornará para um único passo na sequência de botões.",
-            "<span class='text-info'>História de usuário:</span> Eu posso jogar no modo rigoroso, onde se eu pressionar um botão errado, eu sou notificado e o jogo recomeça em uma nova série aleatória de botões para pressionar.",
-            "<span class='text-info'>História de usuário:</span> Eu posso ganhar o jogo pressionando uma sequência de 20 passos corretamente. Eu sou notificado da minha vitória e então o jogo recomeça.",
-            "<strong>Dica: </strong>Aqui estão alguns mp3s que você pode usar para cada botão: <code>https://s3.amazonaws.com/freecodecamp/simonSound1.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound2.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound3.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound4.mp3</code>.",
-            "Lembre-se de utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Ler-Buscar-Perguntar</a> se você tiver dificuldades.",
-            "Quando tiver terminado, clique no botão \"Eu concluí este desafio\" e inclua um link para o seu projeto no CodePen. ",
-            "Você pode obter feedback sobre o seu projeto compartilhando-o com os seus amigos no Facebook."
-          ]
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/01-front-end-development-certification/basic-ziplines.json b/seed/challenges/01-front-end-development-certification/basic-ziplines.json
deleted file mode 100644
index ca2c683885a77b..00000000000000
--- a/seed/challenges/01-front-end-development-certification/basic-ziplines.json
+++ /dev/null
@@ -1,329 +0,0 @@
-{
-  "name": "Basic Front End Development Projects",
-  "order": 5.5,
-  "time": "50 hours",
-  "helpRoom": "HelpFrontEnd",
-  "challenges": [
-    {
-      "id": "bd7158d8c442eddfbeb5bd1f",
-      "title": "Get Set for our Front End Development Projects",
-      "description": [
-        [
-          "//i.imgur.com/OAD6SJz.png",
-          "An image of a Simon game, one our front end projects.",
-          "Our front end development projects will give you a chance to apply the front end skills you've developed up to this point. We'll use a popular browser-based code editor called CodePen.",
-          ""
-        ],
-        [
-          "//i.imgur.com/WBetuBa.jpg",
-          "A programmer punching through his laptop screen in frustration.",
-          "These projects are hard. It takes most campers several days to build each project. You will get frustrated. But don't quit. This gets easier with practice.",
-          ""
-        ],
-        [
-          "//i.imgur.com/p2TpOQd.jpg",
-          "A cute dog jumping over a hurdle and winking and pointing his paw at you.",
-          "When you get stuck, just use the Read-Search-Ask methodology. Don't worry - you've got this.",
-          ""
-        ],
-        [
-          "//i.imgur.com/G1saeDt.gif",
-          "A gif showing how to create a Codepen account.",
-          "For our front end project challenges, we'll use a popular browser-based code editor called CodePen. Click the \"Open link in new tab\" button below to open CodePen's signup page. Fill out the form and click \"Sign up\". <br><div class=\"small\">Note: If you already have a CodePen account, you can skip this step by clicking \"Open link in new tab\", closing the new tab that opens, then clicking \"go to my next step\". We removed our \"skip step\" button because many people would just click it repeatedly without doing these important steps.</div>",
-          "https://codepen.io/signup/free"
-        ],
-        [
-          "//i.imgur.com/U4y9RJ1.gif",
-          "A gif showing that you can type \"hello world\" will output \"hello world\" in the preview window. You can also drag windows to resize them, and change their orientation.",
-          "In the HTML box, create an <code>h1</code> element with the text \"Hello World\". You can drag the frames around to resize them. You can also click the \"Change View\" button and change the orientation of the frames.",
-          ""
-        ],
-        [
-          "//i.imgur.com/G9KFQDL.gif",
-          "A gif showing the process of adding Bootstrap to your pen.",
-          "Click the gear in the upper left hand corner of the CSS box, then scroll down to \"Quick add\" and choose Bootstrap. Now give your <code>h1</code> element the class of <code>text-primary</code> to change its color and prove that Bootstrap is now available.",
-          ""
-        ],
-        [
-          "//i.imgur.com/m0pWik2.gif",
-          "A gif showing the process of turning off auto update preview",
-          "When using CodePen and Ajax, it is a good idea to turn off automatic preview updating so API calls are not made too often. Too many API calls can sometimes lead to temporary blockages, and may require waiting periods before they can be used again. <br> <div class=\"small\"> To disable automatic preview updating click the \"Settings\" button at the top of the page, then click the \"Behavior\" tab. At the bottom of the page, un-check \"AUTO UPDATE PREVIEW\". Now press \"Run\" at the top of the page to update the preview, and click \"Save\".</div>",
-          ""
-        ]
-      ],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "Waypoint",
-      "isRequired": false,
-      "challengeType": 7,
-      "translations": {
-        "es": {
-          "title": "Prepárate para los Proyectos de Desarrollo de Interfaces",
-          "description": [
-            [
-              "//i.imgur.com/OAD6SJz.png",
-              "Una imagen del juego Simón, uno de nuestros proyectos de interfaz.",
-              "Nuestros proyectos de desarrollo de interfaces te darán oportunidad de aplicar las habilidades con interfaces que has desarrollado hasta este momento.  Usaremos un editor de código basado en el navegador llamado CodePen.",
-              ""
-            ],
-            [
-              "//i.imgur.com/WBetuBa.jpg",
-              "Un programador frustado golpeando la pantalla de su computador.",
-              "Nuestros desafíos sobre algoritmos son difíciles.  Algunos pueden requerir muchas horas para resolverse.  Podrás frustarte, pero no te rindas. Se vuelve fácil con práctica.",
-              ""
-            ],
-            [
-              "//i.imgur.com/p2TpOQd.jpg",
-              "Un tierno perro que salta sobre un obstáculo, pica el ojo y te apunta con su pata.",
-              "Cuando te atasques, usa la metodología Leer-Buscar-Preguntar. No te preocupes -  lo tienes resuelto.",
-              ""
-            ],
-            [
-              "//i.imgur.com/G1saeDt.gif",
-              "Un gif que muestra cómo crear una cuenta en Codepen.",
-              "Para nuestros desafíos de interfaces, usaremos un editor de código basado en el navegador que es muy famoso llamado Codepen. Pulsa en el botón de abajo \"Open link in new tab\" para abrir la página de registro de CodePen. Rellena el formulario y pulsa \"Sign up\". <br><div class=\"small\">Nota: Si ya tienes una cuenta de CodePen, puedes omitir este paso pulsando \"Open link in new tab\", cierra la nueva pestaña que se abre, entonces pulsa \"go to my next step\". Eliminamos nuestro botón \"skip step\" porque mucha gente solamente pulsa el botón sin realizar estos importantes pasos.</div>",
-              "https://codepen.io/signup/free"
-            ],
-            [
-              "//i.imgur.com/U4y9RJ1.gif",
-              "Un gif que muestra que puedes escribir \"hello world\" en el editor, lo cual escribirá \"hello world\" en la ventana de vista previa. También puedes mover las ventanas para cambiar su tamaño, y cambiar su orientación.",
-              "En la ventana de HTML, crea un elemento h1 con el texto \"Hola mundo\". Puedes arrastrar los bordes de las ventanas para cambiar su tamaño. También puedes pulsar el botón de \"Change View\" para cambiar la orientación de las ventanas.",
-              ""
-            ],
-            [
-              "//i.imgur.com/G9KFQDL.gif",
-              "Un gif que muestra el proceso de agregar Bootstrap a tu proyecto.",
-              "Pulsa el engrane en la esquina superior izquierda de la ventana de CSS, luego ve hacia abajo hasta donde dice \"Quick add\" y elige Bootstrap. Ahora dale a tu elemento h1 la clase \"text-primary\" para cambiar su color y verificar que Bootstrap está activado.",
-              ""
-            ]
-          ]
-        },
-        "pt-br": {
-          "title": "Prepare-se para nossos Projetos de Desenvolvimento Front End",
-          "description": [
-            [
-              "//i.imgur.com/OAD6SJz.png",
-              "A imagem de um jogo Simon, um de nossos projetos front end.",
-              "Nossos projetos de Desenvolvimento front end vão dar a você a chance de aplicar as habilidades front end que você desenvolveu até esse ponto. Nós vamos usar um editor popular chamado CodePen que funciona direto no navegador.",
-              ""
-            ],
-            [
-              "//i.imgur.com/WBetuBa.jpg",
-              "Um programador atravessando a tela de seu laptop com um soco em frustração.",
-              "Esses projetos são difíceis. A maioria dos campistas leva alguns dias para contruir cada projeto. Você vai ficar frustrado. Mas não desista. Isso fica mais fácil com a prática.",
-              ""
-            ],
-            [
-              "//i.imgur.com/p2TpOQd.jpg",
-              "Um cachorro fofo pulando sobre um obstáculo, piscando e apontando sua pata a você.",
-              "Quando ficar travado, use a metodologia Ler-Buscar-Perguntar. Não se preocupe - você consegue.",
-              ""
-            ],
-            [
-              "//i.imgur.com/G1saeDt.gif",
-              "Um gif mostrando com criar uma conta CodePen.",
-              "Para nossos projetos front end, usaremos um popular editor de código baseado em navegador chamado CodePen. Clique no botão \"Open link in new tab\" abaixo para abrir a página de resgistro do CodePen. Preencha o formulário e clique em \"Sign up\". <br><div class=\"small\">Nota: Se você já tem uma conta CodePen, você pode pular esse passo clicando em \"Open link in new tab\", fechando a nova aba que abrir, e clicando em \"go to my next step\". Nós removemos nosso botão \"skip step\" pois muitas pessoas iam simplesmente clicar nele repetidamente sem passar por esses passos importantes.</div>",
-              "https://codepen.io/signup/free"
-            ],
-            [
-              "//i.imgur.com/U4y9RJ1.gif",
-              "Um gif mostrando que você pode digitar \"hello world\" e será mostrado \"hello world\" na janela de visualização. Você também pode arrastar janelas para redimensioná-las e mudar a orientação das mesmas.",
-              "Na caixa do HTML, crie um elemento <code>h1</code> com o texto \"Hello World\". Você pode arrastar as bordas para redimensioná-las. Você pode também clicar no botão \"Change View\" e mudar a orientação das janelas.",
-              ""
-            ],
-            [
-              "//i.imgur.com/G9KFQDL.gif",
-              "Um gif mostrando como adicionar o Bootstrap à sua pen.",
-              "Clique na engrenagem no canto superior esquerdo da caixa do CSS, então role para baixo até \"Quick add\" e escolha Bootstrap. Agora adicione ao seu elemento <code>h1</code> a classe <code>text-primary</code> para mudar sua cor e provar que o Bootstrap agora está disponível.",
-              ""
-            ],
-            [
-              "//i.imgur.com/m0pWik2.gif",
-              "Um gif mostrando o processo de desativar o update automático da janela de visualização",
-              "Ao usar CodePen e Ajax, é uma boa idea desativar o update automático da janela de visualização para que as chamadas para as APIs não sejam feitas a todo momento. Muitas chamadas para API pode levar à bloqueios temporários e podem requerer períodos de esperar para que possam ser usadas novamente. <br> <div class=\"small\"> Para desativar o update automático da janela de visualização clique no botão \"Settings\" no topo da página, então clique na aba \"Behavior\". No final da página, desmarque \"AUTO UPDATE PREVIEW\". Agora clique em \"Run\" no topo da página para atualizar a janela de visualização e clique \"Save\".</div>",
-              ""
-            ]
-          ]
-        },
-        "ru": {
-          "title": "Приготовьтесь к разработке фронтенд проектов",
-          "description": [
-            [
-              "//i.imgur.com/OAD6SJz.png",
-              "Игра Саймона - один из фронтенд проектов.",
-              "Наши фронтенд проекты дадут вам шанс применить полученные к этому моменту знания по фронтенд разработке. Мы будем использовать популярный браузерный редактор кода - CodePen.",
-              ""
-            ],
-            [
-              "//i.imgur.com/WBetuBa.jpg",
-              "Программист от отчаяния кулаком пробивает экран своего ноутбука.",
-              "Это трудные проекты. Разработка каждого занимает у большинства кэмперов несколько дней. У вас может возникнуть чувство отчаяния. Несмотря на это не сдавайтесь. С практикой этот процесс станет проще.",
-              ""
-            ],
-            [
-              "//i.imgur.com/p2TpOQd.jpg",
-              "Милый пес, прыгающий через препятствие, указывает на вас лапой и подмигивает.",
-              "Если что-то не получается, воспользуйтесь Read-Search-Ask. Не волнуйтесь - вы сможете это сделать.",
-              ""
-            ],
-            [
-              "//i.imgur.com/G1saeDt.gif",
-              "Гифка показывающая как зарегистрироваться на CodePen.",
-              "Для заданий по фронтенд разработке, мы будем использовать популярный браузерный редактор кода под названием CodePen. Откройте страницу регистрации на сайте CodePen, нажав на расположенную чуть ниже кнопку \"Open link in new tab\". Заполните форму и нажмите \"Sign up\". <br><div class=\"small\">Замечание: Если у вас уже есть аккаунт CodePen, то этот шаг можно пропустить: нажмите на кнопку \"Open link in new tab\", закройте появившуюся вкладку и затем кликните \"go to my next step\". Мы убрали кнопку \"skip step\", ввиду того что большинство людей просто нажимали бы ее несколько раз подряд и пропускали бы эти важные инструкции.</div>",
-              "https://codepen.io/signup/free"
-            ],
-            [
-              "//i.imgur.com/U4y9RJ1.gif",
-              "Гифка показывающая набор в редакторе заголовка с текстом \"hello world\", который затем отображается в окошке предпросмотра. А также указывающая как изменить размер окон редактора или поменять их расположение.",
-              "В окошке HTML создайте элемент h1 с текстом \"Hello World\". Ухватив края окон можно изменить их размер. А нажав на кнопку \"Change View\" поменять их расположение.",
-              ""
-            ],
-            [
-              "//i.imgur.com/G9KFQDL.gif",
-              "Гифка показывающая как в CodePen добавить к проекту Bootstrap.",
-              "Нажмите на звездочку в левом верхнем углу окошка CSS, найдите внизу поле \"Quick add\" и выберите в нем Bootstrap. Добавьте к элементу h1 класс \"text-primary\", чтобы изменить его цвет и удостовериться, что Bootstrap подключен.",
-              ""
-            ]
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7158d8c442eddfaeb5bd18",
-      "title": "Build a Tribute Page",
-      "description": [
-        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/NNvBQW/' target='_blank'>https://codepen.io/freeCodeCamp/full/NNvBQW/</a>.",
-        "Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries you need. Give it your own personal style.",
-        "<strong>User Story:</strong> I can view a tribute page with an image and text.",
-        "<strong>User Story:</strong> I can click on a link that will take me to an external website with further information on the topic.",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
-        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen.",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "releasedOn": "January 1, 2016",
-      "challengeSeed": [
-        "qqrnzmqCGDw"
-      ],
-      "tests": [],
-      "type": "zipline",
-      "isRequired": true,
-      "challengeType": 3,
-      "translations": {
-        "es": {
-          "title": "Construye una página Tributo",
-          "description": [
-            "<strong>Objetivo:</strong> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcionalmente sea similar a esta: <a href='https://codepen.io/freeCodeCamp/full/NNvBQW/' target='_blank'>https://codepen.io/freeCodeCamp/full/NNvBQW/</a>",
-            "<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
-            "<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería que necesites. Dale tu estilo personal.",
-            "<strong>Historia de usuario:</strong> Puedo ver una página tributo con una imagen y texto.",
-            "<strong>Historia de usuario:</strong> Puedo pulsar en un enlace que me llevará a un sitio web externo con mayor información sobre el tema.",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado.",
-            "Cuando hayas terminado, pulsa el botón \"I've completed this challenge\" e incluye un link a tu CodePen. ",
-            "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        },
-        "pt-br": {
-          "title": "Construa uma Página Tributo",
-          "description": [
-            "<strong>Objetivo:</strong> Construa uma aplicação em <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuja funcionalidade seja similar a esta: <a href='https://codepen.io/freeCodeCamp/full/NNvBQW/' target='_blank'>https://codepen.io/freeCodeCamp/full/NNvBQW/</a>.",
-            "Satisfaça as seguintes <a href='https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio' target='_blank'>histórias de usuário</a>. Utilize qualquer biblioteca ou API que você precisar. Dê o seu próprio estilo pessoal.",
-            "<strong>História de usuário:</strong> Eu posso ver uma página tributo com uma imagem e um texto.",
-            "<strong>História de usuário:</strong> Eu posso clicar em um link que vai me levar a um site externo com mais informações sobre o tópico.",
-            "Lembre-se de utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Ler-Buscar-Perguntar</a> se você tiver dificuldades.",
-            "Quando tiver terminado, clique no botão \"Eu concluí este desafio\" e inclua um link para o seu projeto no CodePen. ",
-            "Você pode obter feedback sobre o seu projeto compartilhando-o com os seus amigos no Facebook."
-          ]
-        },
-        "ru": {
-          "title": "Создайте страницу посвященную тому что вас вдохновляет",
-          "description": [
-            "<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a> которое функционально соответствует вот этому: <a href='https://codepen.io/freeCodeCamp/full/NNvBQW/' target='_blank'>https://codepen.io/freeCodeCamp/full/NNvBQW/</a>.",
-            "<strong>Правило #1:</strong> Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
-            "<strong>Правило #2:</strong> Реализуйте следующие <a href='https://ru.wikipedia.org/wiki/User_story' target='_blank'>пользовательские истории</a>. Используйте любые библиотеки, которые потребуются. Оформите приложение в вашем собственном стиле.",
-            "<strong>Пользовательская история:</strong> Я могу видеть на странице изображение и текст.",
-            "<strong>Пользовательская история:</strong> Я могу нажать на ссылку, которая ведет на внешнюю страницу с дополнительной информацией по теме.",
-            "Если что-то не получается, воспользуйтесь <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a>.",
-            "Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen.",
-            "Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7158d8c242eddfaeb5bd13",
-      "title": "Build a Personal Portfolio Webpage",
-      "description": [
-        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/YqLyXB/' target='_blank'>https://codepen.io/freeCodeCamp/full/YqLyXB/</a>.",
-        "Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries you need. Give it your own personal style.",
-        "<strong>User Story:</strong> I can access all of the portfolio webpage's content just by scrolling.",
-        "<strong>User Story:</strong> I can click different buttons that will take me to the portfolio creator's different social media pages.",
-        "<strong>User Story:</strong> I can see thumbnail images of different projects the portfolio creator has built (if you haven't built any websites before, use placeholders.)",
-        "<strong>User Story:</strong> I can navigate to different sections of the webpage by clicking buttons in the navigation.",
-        "Don't worry if you don't have anything to showcase on your portfolio yet - you will build several apps on the next few CodePen challenges, and can come back and update your portfolio later.",
-        "There are many great portfolio templates out there already. However, you should consider building your portfolio page as much as you can from the ground up. Using Bootstrap can help make this process much easier for you.",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
-        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. ",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "challengeSeed": [
-        "V72o34gY4Lw"
-      ],
-      "tests": [],
-      "type": "zipline",
-      "isRequired": true,
-      "challengeType": 3,
-      "translations": {
-        "es": {
-          "title": "Construye una página web para tu portafolio",
-          "description": [
-            "<strong>Objetivo:</strong> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/freeCodeCamp/full/QNmvEL/' target='_blank'>https://codepen.io/freeCodeCamp/full/QNmvEL/</a>.",
-            "<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
-            "<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería que necesites. Dale tu estilo personal.",
-            "<strong>Historia de usuario:</strong> Puedo acceder a todo el contenido de la página del portafolio con sólo desplazarme en la ventana.",
-            "<strong>Historia de usuario:</strong> Puedo pulsar diferentes botones que me llevarán a las páginas de las diferentes cuentas de redes sociales del creador del portafolio.",
-            "<strong>Historia de usuario:</strong> Puedo ver una imagenes en miniatura de los diferentes proyectos que el creador del portafolio ha construido (si no has construido ningún sitio web antes, usa marcadores de posición.)",
-            "<strong>Historia de usuario:</strong> Puedo navegar a las diferentes secciones de la página web pulsando botones de navegación.",
-            "No te preocupes si no tienes nada que mostrar en tu portafolio todavía - en los siguientes desafíos crearás varias aplicaciones en CodePen, así que puedes regresar luego para actualizar tu portafolio.",
-            "Hay varias plantillas buenas, pero para este desafío, tendrás que construir la página web de tu portafolio completamente por tu cuenta. Usar Bootstrap hará el trabajo mucho más fácil para ti.",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado.",
-            "Cuando hayas terminado, pulsa el botón \"I've completed this challenge\" e incluye un link a tu CodePen. ",
-            "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        },
-        "pt-br": {
-          "title": "Construa uma Página de Portfólio Pessoal",
-          "description": [
-            "<strong>Objetivo:</strong> Construa uma aplicação em <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuja funcionalidade seja similar a esta: <a href='https://codepen.io/freeCodeCamp/full/YqLyXB/' target='_blank'>https://codepen.io/freeCodeCamp/full/YqLyXB/</a>.",
-            "Satisfaça as seguintes <a href='https://pt.wikipedia.org/wiki/Hist%C3%B3ria_de_usu%C3%A1rio' target='_blank'>histórias de usuário</a>. Utilize qualquer biblioteca ou API que você precisar. Dê o seu próprio estilo pessoal.",
-            "<strong>História de usuário:</strong> Eu posso acessar todo o conteúdo da página somente rolando o scroll do mouse.",
-            "<strong>História de usuário:</strong> Eu posso clicar em diferentes botões que vão me levar a diferentes páginas de mídias sociais do criador do portfólio.",
-            "<strong>História de usuário:</strong> Eu posso ver pequenas imagens de diferentes projetos que o criador do portfólio construiu (se você não construiu nenhum site antes, use imagens genéricas.)",
-            "<strong>História de usuário:</strong> Eu navego para diferentes seções do site clicando em botões na seção de navegação.",
-            "Não se preocupe se você não tem nada para mostrar em seu portfólio ainda - você vai construir várias aplicações nos próximos desafios e depois é só voltar e atualizar seu portfólio.",
-            "Existem excelentes portfólios pela web. No entando, voce deve considerar construir sua página de portfólio do zero o máximo que você conseguir. Usar o Bootstrap pode tornar esse processo mais simples para você.",
-            "Lembre-se de utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Ler-Buscar-Perguntar</a> se você tiver dificuldades.",
-            "Quando tiver terminado, clique no botão \"Eu concluí este desafio\" e inclua um link para o seu projeto no CodePen. ",
-            "Você pode obter feedback sobre o seu projeto compartilhando-o com os seus amigos no Facebook."
-          ]
-        },
-        "ru": {
-          "title": "Создайте сайт-портфолио",
-          "description": [
-            "<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a> которое функционально соответствует вот этому: <a href='https://codepen.io/freeCodeCamp/full/QNmvEL/' target='_blank'>https://codepen.io/freeCodeCamp/full/QNmvEL/</a>.",
-            "<strong>Правило #1:</strong> Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
-            "<strong>Правило #2:</strong> Реализуйте следующие <a href='https://ru.wikipedia.org/wiki/User_story' target='_blank'>пользовательские истории</a>. Используйте любые библиотеки, которые потребуются. Оформите приложение в вашем собственном стиле.",
-            "<strong>Пользовательская история:</strong> Я могу получить доступ ко всей информации на странице просто прокрутив ее сверху вниз.",
-            "<strong>Пользовательская история:</strong> Я могу нажать на различные кнопки и перейти к социальным страницам владельца портфолио.",
-            "<strong>Пользовательская история:</strong> Я могу увидеть эскизы проектов созданных владельцем портфолио (используйте временную картинку если у вас пока нет собственных веб-страниц).",
-            "<strong>Пользовательская история:</strong> Я могу перемещаться к различным частям страницы нажимая на соответствующие навигационные кнопки.",
-            "Не переживайте если вам пока нечего показать в портфолио - вы создадите несколько веб приложений в следующих заданиях, а затем вернетесь и обновите портфолио.",
-            "В сети существует много шаблонов для портфолио, но в этом задании вам необходимо создать собственную уникальную страницу. Используя Bootstrap, сделать это будет намного проще.",
-            "Если что-то не получается, воспользуйтесь <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a>.",
-            "Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen.",
-            "Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
-          ]
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/01-front-end-development-certification/gear-up-for-success.json b/seed/challenges/01-front-end-development-certification/gear-up-for-success.json
deleted file mode 100644
index d40dc9d295c1ee..00000000000000
--- a/seed/challenges/01-front-end-development-certification/gear-up-for-success.json
+++ /dev/null
@@ -1,261 +0,0 @@
-{
-  "name": "Gear up for Success",
-  "order": 4,
-  "time": "20 minutes",
-  "challenges": [
-    {
-      "id": "573c96eac9a6be092d7830c1",
-      "title": "Join our Forum",
-      "description": [
-        [
-          "//i.imgur.com/y0XxmxQ.gif",
-          "A gif showing how you can join Free Code Camp's forum by clicking the \"sign up\" button, authenticating using GitHub, and verifying your email address.",
-          "Our forum is the best place for deep discussions about various programming resources: books, online courses, coding events, and more. You can also get help with these resources from your fellow campers. Click the button below to open up our forum, then click the \"Sign up\" button. Once you've created an account using GitHub, you'll need to confirm your email address. Now you're able to join discussions on our forum!",
-          "http://forum.freecodecamp.com/"
-        ],
-        [
-          "//i.imgur.com/GxCpl7x.gif",
-          "A gif showing how you can upload your profile picture.",
-          "We recommend that you also add a custom profile picture of your face. You can do this in the settings section of the forum.",
-          ""
-        ],
-        [
-          "//i.imgur.com/Gop2PmJ.gif",
-          "A gif showing how you can introduce yourself on our self introduction forum thread.",
-          "You can make your first forum post right now by clicking the button below to go to the introduction thread. Reply in this post with: who you are, why you're learning to code, and how you've been learning to code so far. Then feel free to explore the various discussions and jump in with your own thoughts.",
-          "http://forum.freecodecamp.com/t/welcome-please-introduce-yourself-here/1082"
-        ]
-      ],
-      "releasedOn": "May 17, 2016",
-      "challengeSeed": [],
-      "tests": [],
-      "type": "Waypoint",
-      "challengeType": 7,
-      "translations": {
-        "de": {
-          "title": "Join our Forum",
-          "description": [
-            [
-              "//i.imgur.com/y0XxmxQ.gif",
-              "A gif showing how you can join Free Code Camp's forum by clicking the \"sign up\" button, authenticating using GitHub, and verifying your email address.",
-              "Our forum is the best place for deep discussions about various programming resources: books, online courses, coding events, and more. You can also get help with these resources from your fellow campers. Click the button below to open up our forum, then click the \"Sign up\" button. Once you've created an account using GitHub, you'll need to confirm your email address. Now you're able to join discussions on our forum!",
-              "http://forum.freecodecamp.com/"
-            ],
-            [
-              "//i.imgur.com/GxCpl7x.gif",
-              "A gif showing how you can upload your profile picture.",
-              "We recommend that you also add a custom profile picture of your face. You can do this in the settings section of the forum.",
-              ""
-            ],
-            [
-              "//i.imgur.com/Gop2PmJ.gif",
-              "A gif showing how you can introduce yourself on our self introduction forum thread.",
-              "You can make your first forum post right now by clicking the button below to go to the introduction thread. Reply in this post with: who you are, why you're learning to code, and how you've been learning to code so far. Then feel free to explore the various discussions and jump in with your own thoughts.",
-              "http://forum.freecodecamp.com/t/welcome-please-introduce-yourself-here/1082"
-            ]
-          ]
-        },
-        "es": {
-          "title": "Join our Forum",
-          "description": [
-            [
-              "//i.imgur.com/y0XxmxQ.gif",
-              "A gif showing how you can join Free Code Camp's forum by clicking the \"sign up\" button, authenticating using GitHub, and verifying your email address.",
-              "Our forum is the best place for deep discussions about various programming resources: books, online courses, coding events, and more. You can also get help with these resources from your fellow campers. Click the button below to open up our forum, then click the \"Sign up\" button. Once you've created an account using GitHub, you'll need to confirm your email address. Now you're able to join discussions on our forum!",
-              "http://forum.freecodecamp.com/"
-            ],
-            [
-              "//i.imgur.com/GxCpl7x.gif",
-              "A gif showing how you can upload your profile picture.",
-              "We recommend that you also add a custom profile picture of your face. You can do this in the settings section of the forum.",
-              ""
-            ],
-            [
-              "//i.imgur.com/Gop2PmJ.gif",
-              "A gif showing how you can introduce yourself on our self introduction forum thread.",
-              "You can make your first forum post right now by clicking the button below to go to the introduction thread. Reply in this post with: who you are, why you're learning to code, and how you've been learning to code so far. Then feel free to explore the various discussions and jump in with your own thoughts.",
-              "http://forum.freecodecamp.com/t/welcome-please-introduce-yourself-here/1082"
-            ]
-          ]
-        },
-        "fr": {
-          "title": "Join our Forum",
-          "description": [
-            [
-              "//i.imgur.com/y0XxmxQ.gif",
-              "A gif showing how you can join Free Code Camp's forum by clicking the \"sign up\" button, authenticating using GitHub, and verifying your email address.",
-              "Our forum is the best place for deep discussions about various programming resources: books, online courses, coding events, and more. You can also get help with these resources from your fellow campers. Click the button below to open up our forum, then click the \"Sign up\" button. Once you've created an account using GitHub, you'll need to confirm your email address. Now you're able to join discussions on our forum!",
-              "http://forum.freecodecamp.com/"
-            ],
-            [
-              "//i.imgur.com/GxCpl7x.gif",
-              "A gif showing how you can upload your profile picture.",
-              "We recommend that you also add a custom profile picture of your face. You can do this in the settings section of the forum.",
-              ""
-            ],
-            [
-              "//i.imgur.com/Gop2PmJ.gif",
-              "A gif showing how you can introduce yourself on our self introduction forum thread.",
-              "You can make your first forum post right now by clicking the button below to go to the introduction thread. Reply in this post with: who you are, why you're learning to code, and how you've been learning to code so far. Then feel free to explore the various discussions and jump in with your own thoughts.",
-              "http://forum.freecodecamp.com/t/welcome-please-introduce-yourself-here/1082"
-            ]
-          ]
-        }
-      }
-    },
-    {
-      "id": "560ade65cb82ac38a17513c2",
-      "title": "Watch Coding Videos on our YouTube Channel",
-      "description": [
-        [
-          "//i.imgur.com/4jUhEsb.jpg",
-          "An image of Briana at the whiteboard teaching in a YouTube video.",
-          "Our community's YouTube channel features video tutorials and demos of projects that campers have built for nonprofits. We add new videos every week. The button below will take you to our YouTube channel, where you can subscribe for free.",
-          "https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ?sub_confirmation=1"
-        ]
-      ],
-      "releasedOn": "April 15, 2016",
-      "challengeSeed": [],
-      "tests": [],
-      "type": "Waypoint",
-      "challengeType": 7,
-      "translations": {
-        "de": {
-          "title": "Schaue uns auf Twitch.tv Live beim Programmieren zu",
-          "description": [
-            [
-              "//i.imgur.com/8rtyRY1.gif",
-              "Ein GIF, das dir zeigt, wie du dich bei Twitch.tv anmelden und unserem Kanal folgen kannst.",
-              "Unsere Camper programmieren oft Live auf Twitch.tv, einer populären Streaming-Website. Du kannst in weniger als einer Minute einen Account anlegen und dann dem Kanal von Free Code Camp folgen. Wenn du dem Kanal folgst, hast du die Option E-Mail Benachrichtigungen zu bekommen, sobald einer unserer Camper live geht. Dann kannst du Dutzenden Campern folgen und ihnen beim Programmieren zusehen sowie in Chats interagieren. Das ist eine lustige und lockere Art und Weise, um von anderen Personen zu lernen, wie sie ihre Projekte umsetzen.",
-              "https://twitch.tv/freecodecamp"
-            ]
-          ]
-        },
-        "es": {
-          "title": "Miranos programar en vivo por YouTube",
-          "description": [
-            [
-              "//i.imgur.com/4jUhEsb.jpg",
-              "An image of Briana at the whiteboard teaching in a YouTube video.",
-              "Our community's YouTube channel features video tutorials and demos of projects that campers have built for nonprofits. We add new videos every week. The button below will take you to our YouTube channel, where you can subscribe for free.",
-              "https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ?sub_confirmation=1"
-            ]
-          ]
-        },
-        "fr": {
-          "title": "Regarde nous coder en direct sur Twitch.tv",
-          "description": [
-            [
-              "//i.imgur.com/8rtyRY1.gif",
-              "Une gif montrant comment tu peux créer un compte sur Twitch.tv et suivre notre chaîne.",
-              "Nos campers codent fréquemment en direct sur Twitch.tv, un site de streaming populaire. Tu peux créer un compte en moins d’une minute, et suivre la chaîne de Free Code Camp. Une fois suivi, tu auras l’option de recevoir un email à chaque fois qu’un de nos campers est en direct. Et donc tu peux rejoindre plusieurs campers pour regarder et interagir sur le salon de chat. C’est une façon d’apprendre en regardant les autres coder.",
-              "https://twitch.tv/freecodecamp"
-            ]
-          ]
-        }
-      }
-    },
-    {
-      "id": "570add8ccb82ac38a17513c3",
-      "title": "Join our LinkedIn Alumni Network",
-      "description": [
-        [
-          "//i.imgur.com/vJyiXzU.gif",
-          "A gif showing how you can click the link below and fill in the necessary fields to add your Free Code Camp studies to your LinkedIn profile.",
-          "LinkedIn recognizes Free Code Camp as a university. You can gain access to our large alumni network by adding Free Code Camp to your LinkedIn profile's education section. Set your graduation date as next year. For \"Degree\", type \"Full Stack Web Development Certification\". For \"Field of study\", type \"Computer Software Engineering\". Then click \"Save Changes\".",
-          "https://www.linkedin.com/profile/edit-education?school=Free+Code+Camp"
-        ]
-      ],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "Waypoint",
-      "challengeType": 7,
-      "translations": {
-        "de": {
-          "title": "Tritt unserem LinkedIn Alumni Netzwerk bei",
-          "description": [
-            [
-              "//i.imgur.com/vJyiXzU.gif",
-              "Ein GIF, das dir zeigt, wie du den unten stehenden Link anklicken kannst und welche Felder du ausfüllen musst, damit du Free Code Camp zu deinem LinkedIn Profil hinzufügst.",
-              "LinkedIn erkennt Free Code Camp als Universität an. Du bekommst auf unser großes Alumni Netzwerk zugriff, indem du Free Code Camp zum Ausbildungsbereich deines LinkedIn Profils hinzufügst. Setze deinen Abschlusszeitpunkt auf das nächste Jahr. In das Feld \"Abschluss\" schreibe \"Full Stack Web Development Certification\". In das Feld \"Studienfach\" schreibe \"Computer Software Engineering\". Dann klicke auf den \"Speichern\" Button.",
-              "https://www.linkedin.com/profile/edit-education?school=Free+Code+Camp"
-            ]
-          ]
-        },
-        "es": {
-          "title": "Únete a nuestra red de alumnos en LinkedIn",
-          "description": [
-            [
-              "//i.imgur.com/vJyiXzU.gif",
-              "Un gif mostrando como puedes pulsar el enlace de abajo y llenar todos los campos necesarios para agregar los estudios de Free Code Camp a tu perfil de LinkedIn",
-              "LinkedIn reconoce a Free Code Camp como una universidad. Puedes obtener acceso a nuestra larga red de alumnos agregando Free Code Camp a la sección de educación de tu LinkedIn. Define tu fecha de graduación para el siguiente año. En el campo \"Grado\", escribe \"Certificación de Desarrollo Web Full Stack\". En \"Campo de estudio\", escribe \"Ingeniería de Software\". Después pulsa \"Guardar Cambios\".",
-              "https://www.linkedin.com/profile/edit-education?school=Free+Code+Camp"
-            ]
-          ]
-        },
-        "fr": {
-          "title": "Rejoignez notre réseau de lauréats sur Linkedin",
-          "description": [
-            [
-              "//i.imgur.com/vJyiXzU.gif",
-              "Une gif qui montre comment tu peux cliquer sur le lien ci-dessous et remplir les champs nécessaires pour ajouter le certificat de Free Code Camp à votre profil LinkedIn.",
-              "LinkedIn reconnait Free Code Camp comme une université. Tu peux avoir accès à notre large réseau de lauréats en ajoutant Free Code Camp à la section éducation de ton profil LinkedIn. L’année d’obtention du diplôme est la prochaine année. Pour le \"Degré\", c’est  \"Full Stack Web Development Certification\". Pour le \"Domaine d’études\", c’est \"Computer Software Engineering\". Puis sauvegardez les changements.",
-              "https://www.linkedin.com/profile/edit-education?school=Free+Code+Camp"
-            ]
-          ]
-        }
-      }
-    },
-    {
-      "id": "560add8ccb81ac38a17513c4",
-      "title": "Commit to a Goal and a Nonprofit",
-      "description": [
-        [
-          "//i.imgur.com/Og1ifsn.gif",
-          "A gif showing how you can commit to a goal for your Free Code Camp studies and pledge a monthly donation to a nonprofit to give you external motivation to reach that goal.",
-          "You can set a goal and pledge to donate to a nonprofit each month until you achieve that goal. This will give you external motivation in your quest to learn to code, as well as an opportunity to help nonprofits right away. Choose your goal, then choose a monthly donation. When you click \"commit\", the nonprofit's donation page will open in a new tab. This pledge is completely optional. It is entirely between you and the nonprofit, and no money goes to Free Code Camp. You can change your commitment or stop it at any time.",
-          "/commit"
-        ]
-      ],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "Waypoint",
-      "challengeType": 7,
-      "translations": {
-        "de": {
-          "title": "Verpflichte dich zu einem Ziel und einer gemeinnützigen Organisation",
-          "description": [
-            [
-              "//i.imgur.com/Og1ifsn.gif",
-              "Ein GIF, das dir zeigt, wie du dich einem Ziel auf Free Code Camp verpflichten kannst und versprichst, eine monatliche Spende an eine gemeinnützige Organisation zu entrichten, um externe Motivation zur Erreichung deines Ziels zu haben.",
-              "Du kannst dir ein Ziel setzen und versprechen, einer gemeinnützigen Organisation eine monatliche Spende zu entrichten, bis du dieses Ziel erreicht hast. Das gibt dir externe Motivation in deinem Bestreben programmieren zu lernen - und eröffnet von Anfang an die Gelegenheit gemeinnützigen Organisationen zu helfen. Wähle dein Ziel und dann eine monatliche Spende. Wenn du auf \"verpflichten\" klickst, öffnet sich die Spendenseite der gemeinnützigen Organisation in einem neuen Tab. Dieser Schritt ist optional, du kannst deine Verpflichtung jederzeit ändern oder stoppen.",
-              "/verpflichten"
-            ]
-          ]
-        },
-        "es": {
-          "title": "Comprométete con una meta y con una organización sin fines de lucro",
-          "description": [
-            [
-              "//i.imgur.com/Og1ifsn.gif",
-              "Un gif mostrando como te puedes comprometer con una meta para tus estudios de Free Code Camp y prometer una donación mensual a una organización sin fines de lucro para darte motivación externa de alcanzar esa meta.",
-              "Puedes poner una meta y prometer donar mensualmente a una organización sin fines de lucro hasta que alcances tu meta. Esto te dará motivación externa en tu aventura de aprender a programar, así como una oportunidad para ayudar inmediatamente a organizaciones sin fines de lucro. Elige tu meta, después elige tu donativo mensual. Cuando pulses \"commit\", la página de donación de la organización sin fines de lucro se abrirá en una nueva pestaña. Esto es completamente opcional, y puedes cambiar tu compromiso o detenerlo en cualquier momento.",
-              "/comprometerse"
-            ]
-          ]
-        },
-        "fr": {
-          "title": "Engage-toi à un but et aide une association à but non lucratif",
-          "description": [
-            [
-              "//i.imgur.com/Og1ifsn.gif",
-              "Une gif montrant comment tu peux t’engager pour atteindre ton but sur Free Code Camp et verser une somme d’argent chaque mois pour une organisation à but non lucratif qui sera une motivation externe pour atteindre ton objectif.",
-              "Tu peux définir un but et t’engager à verser une somme d’argent pour aider une organisation à but non lucratif chaque mois jusqu’à atteindre ton objectif. Cela va te donner une motivation externe dans ta journée d’apprentissage, mais aussi une opportunité pour aider ces organisations. Choisi un but, et un montant à verser. Quand tu vas cliquer sur \"commit\", la page des dons de l’organisation va s’ouvrir. Cette étape est optionnel, et tu peux annuler ou arrêter ton engagement à n’importe quel instant.",
-              "/commit"
-            ]
-          ]
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/01-front-end-development-certification/intermediate-ziplines.json b/seed/challenges/01-front-end-development-certification/intermediate-ziplines.json
deleted file mode 100644
index 7cae76810ede63..00000000000000
--- a/seed/challenges/01-front-end-development-certification/intermediate-ziplines.json
+++ /dev/null
@@ -1,226 +0,0 @@
-{
-  "name": "Intermediate Front End Development Projects",
-  "order": 11,
-  "time": "100 hours",
-  "helpRoom": "HelpFrontEnd",
-  "challenges": [
-    {
-      "id": "bd7158d8c442eddfaeb5bd13",
-      "title": "Build a Random Quote Machine",
-      "description": [
-        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/ONjoLe/' target='_blank'>https://codepen.io/freeCodeCamp/full/ONjoLe/</a>.",
-        "Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
-        "<strong>User Story:</strong> I can click a button to show me a new random quote.",
-        "<strong>User Story:</strong> I can press a button to tweet out a quote.",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
-        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. ",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "challengeSeed": [
-        "a5RknIzoDrs"
-      ],
-      "tests": [],
-      "type": "zipline",
-      "isRequired": true,
-      "challengeType": 3,
-      "translations": {
-        "es": {
-          "title": "Crea una máquina de frases aleatorias",
-          "description": [
-            "<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/freeCodeCamp/full/ONjoLe/' target='_blank'>https://codepen.io/freeCodeCamp/full/ONjoLe/</a>.",
-            "<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
-            "<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites.",
-            "<span class='text-info'>Historia de usuario:</span> Puedo pulsar un botón que me mostrará una nueva frase aleatoria.",
-            "<span class='text-info'>Bonus User Story:</span> Puedo presionar un botón para twitear una frase.",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado.",
-            "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un enlace a tu CodePen.",
-            "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        },
-        "ru": {
-          "title": "Создайте генератор случайных цитат",
-          "description": [
-            "<span class='text-info'>Задание:</span> Создайте <a href='https://codepen.io' target='_blank'>CodePen.io</a> который успешно копирует вот этот: <a href='https://codepen.io/freeCodeCamp/full/ONjoLe/' target='_blank'>https://codepen.io/freeCodeCamp/full/ONjoLe/</a>.",
-            "<span class='text-info'>Правило #1:</span> Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
-            "<span class='text-info'>Правило #2:</span> Можете использовать любые библиотеки или API, которые потребуются.",
-            "<span class='text-info'>Правило #3:</span> Воссоздайте функционал приведенного примера и не стесняйтесь добавить что-нибудь от себя.",
-            "Реализуйте следующие <a href='https://ru.wikipedia.org/wiki/User_story' target='_blank'>пользовательские истории</a>, сделайте также бонусные по желанию:",
-            "<span class='text-info'>Пользовательская история:</span> В качестве пользователя, я могу нажать на кнопку и получить случайную цитату.",
-            "<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу нажать на кнопку и опубликовать цитату в Twitter'e.",
-            "Цитаты можно добавить в массив и случайным образом выводить одну из них, либо можно воспользоваться соответствующим API, например <a href='http://forismatic.com/en/api/'>http://forismatic.com/en/api/</a>.",
-            "Если что-то не получается, воспользуйтесь <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a>.",
-            "Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen. Если вы программировали с кем-то в паре, также добавьте имя вашего напарника.",
-            "Если вы хотите получить немедленную оценку вашего проекта, нажмите эту кнопку и добавьте ссылку на ваш CodePen. В противном случае мы проверим его перед тем как вы приступите к проектам для некоммерческих организаций.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7158d8c442eddfaeb5bd10",
-      "title": "Show the Local Weather",
-      "description": [
-        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='http://codepen.io/freeCodeCamp/full/bELRjV' target='_blank'>http://codepen.io/freeCodeCamp/full/bELRjV</a>.",
-        "Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
-        "<strong>User Story:</strong> I can see the weather in my current location.",
-        "<strong>User Story:</strong> I can see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather.",
-        "<strong>User Story:</strong> I can push a button to toggle between Fahrenheit and Celsius.",
-        "We recommend using the <a href='https://darksky.net/dev/docs' target='_blank'>Dark Sky API</a> or <a href='https://www.wunderground.com/weather/api/d/pricing.html' target='_blank'>Weather Underground API</a>. This will require creating a free API key. Normally you want to avoid exposing API keys on CodePen, but we haven't been able to find a keyless API for weather.",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
-        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen.",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "challengeSeed": [
-        "GCLiJU-vvVc"
-      ],
-      "tests": [],
-      "type": "zipline",
-      "challengeType": 3,
-      "isRequired": true,
-      "translations": {
-        "es": {
-          "title": "Muestra el clima local",
-          "description": [
-            "<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='http://codepen.io/freeCodeCamp/full/bELRjV' target='_blank'>http://codepen.io/freeCodeCamp/full/bELRjV</a>.",
-            "<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
-            "<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites.",
-            "<span class='text-info'>Historia de usuario:</span> Pedo obtener información acerca del clima en mi localización actual.",
-            "<span class='text-info'>Historia de usuario:</span> Puedo ver un icono diferente o una imagen de fondo diferente (e.g. montaña con nieve, desierto caliente) dependiendo del clima.",
-            "<span class='text-info'>Historia de usuario:</span> Puedo pulsar un botón para cambiar la unidad de temperatura de grados Fahrenheit a Celsius y viceversa.",
-            "Recomendamos utilizar <a href='https://openweathermap.org/current#geo' target='_blank'>Open Weather API</a>. Al utilizarlo tendrás que crear una llave API gratuita. Normalmente debes evitar exponer llaves de API en CodePen, pero por el momento no hemos encontrado un API de clima que no requiera llave.",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado.",
-            "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un enlace a tu CodePen.",
-            "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        },
-        "ru": {
-          "title": "Покажите местную погоду",
-          "description": [
-            "<span class='text-info'>Задание:</span> Создайте <a href='https://codepen.io' target='_blank'>CodePen.io</a> который успешно копирует вот этот: <a href='http://codepen.io/freeCodeCamp/full/bELRjV' target='_blank'>http://codepen.io/freeCodeCamp/full/bELRjV</a>.",
-            "<span class='text-info'>Правило #1:</span> Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
-            "<span class='text-info'>Правило #2:</span> Можете использовать любые библиотеки или API, которые потребуются.",
-            "<span class='text-info'>Правило #3:</span> Воссоздайте функционал приведенного примера и не стесняйтесь добавить что-нибудь от себя.",
-            "Реализуйте следующие <a href='https://ru.wikipedia.org/wiki/User_story' target='_blank'>пользовательские истории</a>, сделайте также бонусные по желанию:",
-            "<span class='text-info'>Пользовательская история:</span> В качестве пользователя, я могу узнать погоду с учетом моего текущего местоположения.",
-            "<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу в зависимости от погоды видеть различные температурные значки.",
-            "<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу в зависимости от погоды видеть различные фоновые изображения (снежные горы, знойная пустыня).",
-            "<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу нажать на кнопку чтобы переключится между градусами по Цельсию или по Фаренгейту.",
-            "Если что-то не получается, воспользуйтесь <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a>.",
-            "Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen. Если вы программировали с кем-то в паре, также добавьте имя вашего напарника.",
-            "Если вы хотите получить немедленную оценку вашего проекта, нажмите эту кнопку и добавьте ссылку на ваш CodePen. В противном случае мы проверим его перед тем как вы приступите к проектам для некоммерческих организаций.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7158d8c442eddfaeb5bd19",
-      "title": "Build a Wikipedia Viewer",
-      "description": [
-        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/wGqEga/' target='_blank'>https://codepen.io/freeCodeCamp/full/wGqEga/</a>.",
-        "Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
-        "<strong>User Story:</strong> I can search Wikipedia entries in a search box and see the resulting Wikipedia entries.",
-        "<strong>User Story:</strong> I can click a button to see a random Wikipedia entry.",
-        "<span class='text-info'>Hint #1:</span> Here's a URL you can use to get a random Wikipedia article: <code>https://en.wikipedia.org/wiki/Special:Random</code>.",
-        "<span class='text-info'>Hint #2:</span> Here's an entry on using Wikipedia's API: <code>https://www.mediawiki.org/wiki/API:Main_page</code>.",
-        "<span class='text-info'>Hint #3:</span> Use this <a href='https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=jsonfm' target='_blank'>link</a> to experiment with Wikipedia's API.",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
-        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen.",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "challengeSeed": [
-        "wJhcPwVYA1g"
-      ],
-      "tests": [],
-      "type": "zipline",
-      "challengeType": 3,
-      "isRequired": true,
-      "translations": {
-        "es": {
-          "title": "Crea un buscador de Wikipedia",
-          "description": [
-            "<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/freeCodeCamp/full/wGqEga/' target='_blank'>https://codepen.io/freeCodeCamp/full/wGqEga/</a>.",
-            "<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
-            "<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.",
-            "<span class='text-info'>Historia de usuario:</span> Pedo obtener información acerca del clima en mi localización actual.",
-            "<span class='text-info'>Historia de usuario:</span> Puedo ver un icono diferente o una imagen de fondo diferente (e.g. montaña con nieve, desierto caliente) dependiendo del clima.",
-            "<span class='text-info'>Historia de usuario:</span> Puedo pulsar un botón para cambiar la unidad de temperatura de grados Fahrenheit a Celsius y viceversa.",
-            "<span class='text-info'>Historia de usuario:</span> Puedo buscar entradas en Wikipedia en un cuadro de búsqueda y ver las entradas de Wikipedia resultantes.",
-            "<span class='text-info'>Historia de usuario:</span>Puedo pulsar un botón para ver un artículo aleatorio de Wikipedia.",
-            "<span class='text-info'>Pista 1:</span> Aquí está una URL donde puedes ver una entrada aleatoria de Wikipedia: <code>https://es.wikipedia.org/wiki/Special:Random<</code>.",
-            "<span class='text-info'>Pista 2:</span> Este es un artículo muy útil relativo al uso del API de Wikipedia: <code>https://www.mediawiki.org/wiki/API:Main_page</code>.",
-            "<span class='text-info'>Pista 3:</span> Usa este <a href='https://es.wikipedia.org/wiki/Special:ApiSandbox#action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=jsonfm' target='_blank'>enlace</a> para experimentar con el API de Wikipedia.",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado.",
-            "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un enlace a tu CodePen.",
-            "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7158d8c442eddfaeb5bd1f",
-      "title": "Use the Twitch.tv JSON API",
-      "description": [
-        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/Myvqmo/' target='_blank'>https://codepen.io/freeCodeCamp/full/Myvqmo/</a>.",
-        "Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
-        "<strong>User Story:</strong> I can see whether Free Code Camp is currently streaming on Twitch.tv.",
-        "<strong>User Story:</strong> I can click the status output and be sent directly to the Free Code Camp's Twitch.tv channel.",
-        "<strong>User Story:</strong> if a Twitch user is currently streaming, I can see additional details about what they are streaming.",
-        "<strong>User Story:</strong> I will see a placeholder notification if a streamer has closed their Twitch account (or the account never existed). You can verify this works by adding brunofin and comster404 to your array of Twitch streamers.",
-        "<strong>Hint:</strong> See an example call to Twitch.tv's JSONP API at <a href='http://forum.freecodecamp.com/t/use-the-twitchtv-json-api/19541' target='_blank'>http://forum.freecodecamp.com/t/use-the-twitchtv-json-api/19541</a>.",
-        "<strong>Hint:</strong> The relevant documentation about this API call is here: <a href='https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel' target='_blank'>https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel</a>.",
-        "<strong>Hint:</strong> Here's an array of the Twitch.tv usernames of people who regularly stream: <code>[\"ESL_SC2\", \"OgamingSC2\", \"cretetion\", \"freecodecamp\", \"storbeck\", \"habathcx\", \"RobotCaleb\", \"noobs2ninjas\"]</code>",
-        "<strong>UPDATE:</strong> Due to a change in conditions on API usage explained <a href='https://blog.twitch.tv/client-id-required-for-kraken-api-calls-afbb8e95f843#.f8hipkht1' target='_blank'>here</a> Twitch.tv now requires an API key, but we've built a workaround. Use <a href='https://wind-bow.gomix.me/' target='_blank'>https://wind-bow.gomix.me/twitch-api</a> instead of twitch's API base URL (i.e. https://api.twitch.tv/kraken ) and you'll still be able to get account information, without needing to sign up for an API key.",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
-        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen.",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "challengeSeed": [
-        "6WrbY1d-IHI"
-      ],
-      "tests": [],
-      "type": "zipline",
-      "challengeType": 3,
-      "isRequired": true,
-      "translations": {
-        "es": {
-          "title": "Usa el API JSON de Twitch.tv",
-          "description": [
-            "<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/freeCodeCamp/full/Myvqmo/' target='_blank'>https://codepen.io/freeCodeCamp/full/Myvqmo/</a>.",
-            "<span class='text-info'>Regla #1:</span> No veas el código del proyecto de ejemplo en CodePen. Encuentra la forma de hacerlo por tu cuenta.",
-            "<span class='text-info'>Regla #2:</span> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.",
-            "<span class='text-info'>Historia de usuario:</span> Puedo verificar si Free Code Camp está transmitiendo actualmente en Twitch.tv",
-            "<span class='text-info'>Historia de usuario:</span> Puedo pulsar el estatus y ser enviado directamente al canal de Free Code Camp en Twitch.tv.",
-            "<span class='text-info'>Historia de usuario:</span> Si un usuario Twitch está transmitiendo actualmente, puedo ver detalles adicionales acerca del contenido que están transmitiendo.",
-            "<span class='text-info'>Historia de usuario:</span> Puedo ver una notificación si el usuario ha cerrado su cuenta de Twitch (o si la cuenta nunca ha existido). Puedes verificar si esto funciona agregando brunofin y comster404 a tu vector de usuarios de Twitch.",
-            "<span class='text-info'>Pista:</span> Obseva una llamada de ejemplo al API JSONP de Twitch.tv en <code>http://forum.freecodecamp.com/t/use-the-twitchtv-json-api/19541</code>.",
-            "<span class='text-info'>Pista:</span> La documentación relevante sobre esta llamada al API está aquí: <a href='https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel' target='_blank'>https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel</a>.",
-            "<span class='text-info'>Pista:</span> Aquí está un vector de usuarios en Twitch.tv que regularmente transmiten sobre programación: <code>[\"ESL_SC2\", \"OgamingSC2\", \"cretetion\", \"freecodecamp\", \"storbeck\", \"habathcx\", \"RobotCaleb\", \"noobs2ninjas\"]</code>",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado.",
-            "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un enlace a tu CodePen.",
-            "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        },
-        "ru": {
-          "title": "Используйте Twitch.tv JSON API",
-          "description": [
-            "<span class='text-info'>Задание:</span> Создайте <a href='https://codepen.io' target='_blank'>CodePen.io</a> который успешно копирует вот этот: <a href='https://codepen.io/freeCodeCamp/full/Myvqmo/' target='_blank'>https://codepen.io/freeCodeCamp/full/Myvqmo/</a>.",
-            "<span class='text-info'>Правило #1:</span> Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
-            "<span class='text-info'>Правило #2:</span> Можете использовать любые библиотеки или API, которые потребуются.",
-            "<span class='text-info'>Правило #3:</span> Воссоздайте функционал приведенного примера и не стесняйтесь добавить что-нибудь от себя.",
-            "Реализуйте следующие <a href='https://ru.wikipedia.org/wiki/User_story' target='_blank'>пользовательские истории</a>, сделайте также бонусные по желанию:",
-            "<span class='text-info'>Пользовательская история:</span> В качестве пользователя, я могу увидеть идет ли в данный момент на Twitch.tv трансляция Free Code Camp.",
-            "<span class='text-info'>Пользовательская история:</span> В качестве пользователя, я могу, кликнув на описание трансляции, перейти на канал Free Code Camp.",
-            "<span class='text-info'>Пользовательская история:</span> В качестве пользователя, я могу видеть дополнительную информацию о текущей трансляции Free Code Camp.",
-            "<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу произвести поиск среди перечисленных каналов.",
-            "<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу видеть уведомление, если создатель канала закрыл свой аккаунт на Twitch.tv. Добавьте в массив имена пользователей brunofin и comster404, чтобы убедиться, что эта функция реализована правильно.",
-            "<span class='text-info'>Подсказка:</span> Пример запроса к Twitch.tv JSON API: <code>https://api.twitch.tv/kraken/streams/freecodecamp</code>.",
-            "<span class='text-info'>Подсказка:</span> Документацию об этом запросе можно найти по ссылке: <a href='https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel' target='_blank'>https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel</a>.",
-            "<span class='text-info'>Подсказка:</span> В этом массиве приведены имена пользователей, которые регулярно пишут код онлайн: <code>[\"ESL_SC2\", \"OgamingSC2\", \"cretetion\", \"freecodecamp\", \"storbeck\", \"habathcx\", \"RobotCaleb\", \"noobs2ninjas\"]</code>",
-            "Если что-то не получается, воспользуйтесь <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a>.",
-            "Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen. Если вы программировали с кем-то в паре, также добавьте имя вашего напарника.",
-            "Если вы хотите получить немедленную оценку вашего проекта, нажмите эту кнопку и добавьте ссылку на ваш CodePen. В противном случае мы проверим его перед тем как вы приступите к проектам для некоммерческих организаций.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
-          ]
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/01-front-end-development-certification/json-apis-and-ajax.json b/seed/challenges/01-front-end-development-certification/json-apis-and-ajax.json
deleted file mode 100644
index aa5af9cedf83d0..00000000000000
--- a/seed/challenges/01-front-end-development-certification/json-apis-and-ajax.json
+++ /dev/null
@@ -1,539 +0,0 @@
-{
-  "name": "JSON APIs and Ajax",
-  "order": 10,
-  "time": "2 hours",
-  "helpRoom": "Help",
-  "required": [
-   { "link": "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" }
-  ],
-  "challenges": [
-    {
-      "id": "56bbb991ad1ed5201cd392d4",
-      "title": "Trigger Click Events with jQuery",
-      "description": [
-        "In this section, we'll learn how to get data from APIs. APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another.",
-        "We'll also learn how to update HTML with the data we get from these APIs using a technology called Ajax.",
-        "First, let's review what the <code>$(document).ready()</code> function does. This function runs such that all of the code inside of it executes only once our page has finished loading.",
-        "So Let's start by implementing a <code>click event handler</code> inside of our <code>$(document).ready()</code> function by adding this code:",
-        "<blockquote>$(\"#getMessage\").on(\"click\", function(){</br></br>});</blockquote>",
-        "After completing this, proceed to the next challenge where we will make our \"Get Message\" button change the text of the element with the class <code>message</code>."
-      ],
-      "challengeSeed": [
-        "fccss",
-        "  $(document).ready(function() {",
-        "    // Only change code below this line.",
-        "    ",
-        "    // Only change code above this line.",
-        "  });",
-        "fcces",
-        "",
-        "",
-        "<div class=\"container-fluid\">",
-        "  <div class=\"row text-center\">",
-        "    <h2>Cat Photo Finder</h2>",
-        "  </div>",
-        "  <div class=\"row text-center\">",
-        "    <div class=\"col-xs-12 well message\">",
-        "      The message will go here",
-        "    </div>",
-        "  </div>",
-        "  <div class=\"row text-center\">",
-        "    <div class=\"col-xs-12\">",
-        "      <button id=\"getMessage\" class=\"btn btn-primary\">",
-        "        Get Message",
-        "      </button>",
-        "    </div>",
-        "  </div>",
-        "</div>"
-      ],
-      "tests": [
-        "assert(code.match(/\\$\\s*?\\(\\s*?(?:'|\")\\#getMessage(?:'|\")\\s*?\\)\\s*?\\.on\\s*?\\(\\s*?(?:'|\")click(?:'|\")\\s*?\\,\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/gi), 'message: Bind the click event to the button with the ID of <code>getMessage</code>');",
-        "assert(code.match(/\\n*?\\s*?\\}\\n*?\\s*?\\);/gi) && code.match(/\\n*?\\s*?\\}\\);/gi).length >= 2, 'message: Be sure to close your functions with <code>}&#41;;</code>');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "es": {
-          "title": "Activa eventos de pulsación con jQuery",
-          "description": [
-            "En esta sección, vamos a aprender cómo obtener datos de las APIs. Las APIs - o interfaces de programación de aplicaciones - son herramientas que utilizan los computadores para comunicarse entre sí.",
-            "También aprenderemos cómo actualizar HTML con los datos que obtenemos de estas API usando una tecnología llamada Ajax.",
-            "En primer lugar, vamos a revisar lo que hace la función <code>$(document).ready()</code>. Esta función hace que todo el código dentro de ella se ejecute sólo hasta que nuestra página ha sido cargada.",
-            "Hagamos que nuestro botón \"Get message\" cambie el texto del elemento con clase <code>message</code>.",
-            "Antes de poder hacer esto, tenemos que implementar un <code>evento de pulsación</code> dentro de nuestra función <code>$(document).ready()</code>, añadiendo este código:",
-            "<blockquote>$(\"#getMessage\").on(\"click\", function(){</br></br>});</blockquote>"
-          ]
-        },
-        "pt": {
-          "title": "Ativando eventos de clique com jQuery",
-          "description": [
-            "Nesta sessão, vamos aprender como obter dados de uma API. As APIS - Interface de Programação de Aplicativos - são ferramentas usadas pelos computadores  para se comunicarem entre si.",
-            "Também aprenderemos como utilizar o HTML com os dados obtidos de uma API usando uma tecnologia chamada Ajax",
-            "Em primeiro lugar, vamos revir o que faz a função <code>$(document).ready()</code>. Esta função faz com que todo o codigo que esteja dentro de seu escopo execute somente quando a nossa página tenha sido carregada.",
-            "Vamos fazer nosso butão \"Get message\" mudar o texto do elemento com a classe <code>message</code>.",
-            "Antes de poder fazer isso, temos que implementar um <code>evento de clique</code> dentro da nossa função <code>$(document).ready()</code>, adicionando este código:",
-            "<blockquote>$(\"#getMessage\").on(\"click\", function(){</br></br>});</blockquote>"
-          ]
-        }
-      }
-    },
-    {
-      "id": "56bbb991ad1ed5201cd392d5",
-      "title": "Change Text with Click Events",
-      "description": [
-        "When our click event happens, we can use jQuery to update an HTML element.",
-        "Let's make it so that when a user clicks the \"Get Message\" button, we change the text of the element with the class <code>message</code> to say \"Here is the message\".",
-        "We can do this by adding the following code within our click event:",
-        "<code>$(\".message\").html(\"Here is the message\");</code>"
-      ],
-      "challengeSeed": [
-        "fccss",
-        "  $(document).ready(function() {",
-        "    $(\"#getMessage\").on(\"click\", function(){",
-        "      // Only change code below this line.",
-        "      ",
-        "      // Only change code above this line.",
-        "    });",
-        "  });",
-        "fcces",
-        "",
-        "",
-        "<div class=\"container-fluid\">",
-        "  <div class=\"row text-center\">",
-        "    <h2>Cat Photo Finder</h2>",
-        "  </div>",
-        "  <div class=\"row text-center\">",
-        "    <div class=\"col-xs-12 well message\">",
-        "      The message will go here",
-        "    </div>",
-        "  </div>",
-        "  <div class=\"row text-center\">",
-        "    <div class=\"col-xs-12\">",
-        "      <button id=\"getMessage\" class=\"btn btn-primary\">",
-        "        Get Message",
-        "      </button>",
-        "    </div>",
-        "  </div>",
-        "</div>"
-      ],
-      "tests": [
-        "assert(code.match(/\\$\\s*?\\(\\s*?(?:'|\")\\.message(?:'|\")\\s*?\\)\\s*?(\\.html|\\.text)\\s*?\\(\\s*?(?:'|\")Here\\sis\\sthe\\smessage(?:'|\")\\s*?\\);/gi), 'message: Clicking the \"Get Message\" button should give the element with the class <code>message</code> the text \"Here is the message\".');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "es": {
-          "title": "Cambia texto con eventos de pulsación",
-          "description": [
-            "Cuando nuestro evento de pulsación ocurre, podemos utilizar jQuery para actualizar un elemento HTML.",
-            "Hagamos que cuando un usuario pulse el botón \"Get Message\", el texto del elemento con la clase <code>message</code> cambie para decir \"Here is the message\".",
-            "Podemos hacerlo añadiendo el siguiente código dentro de nuestro evento de pulsación:",
-            "<code>$(\".message\").html(\"Here is the message\");</code>"
-          ]
-        },
-        "pt": {
-          "title": "Mundando texto com eventos de clique",
-          "description": [
-            "Quando nosso evento de clique ocorre, podemos utilizar o jQuery para atualixar um elemento HTML",
-            "Vamos fazer que quando um usuário clicar no botão \"Get Message\", o texto do elemento com a classe <code>message</code> passe a dizer \"Here is the message\".",
-            "Podemos fazer isso adicionando o seguinte código dentro do nosso evento de clique:",
-            "<code>$(\".message\").html(\"Here is the message\");</code>"
-          ]
-        }
-      }
-    },
-    {
-      "id": "56bbb991ad1ed5201cd392d6",
-      "title": "Get JSON with the jQuery getJSON Method",
-      "description": [
-        "You can also request data from an external source. This is where APIs come into play.",
-        "Remember that APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another.",
-        "Most web APIs transfer data in a format called JSON. JSON stands for JavaScript Object Notation.",
-        "You've already been using JSON whenever you create a JavaScript object. JSON is nothing more than object properties and their current values, sandwiched between a <code>{</code> and a <code>}</code>.",
-        "These properties and their values are often referred to as \"key-value pairs\".",
-        "Let's get the JSON from Free Code Camp's Cat Photo API.",
-        "Here's the code you can put in your click event to do this:",
-        "<blockquote>$.getJSON(\"/json/cats.json\", function(json) {<br>  $(\".message\").html(JSON.stringify(json));<br>});</blockquote>",
-        "Once you've added this, click the \"Get Message\" button. Your Ajax function will replace the \"The message will go here\" text with the raw JSON output from the Free Code Camp Cat Photo API."
-      ],
-      "challengeSeed": [
-        "fccss",
-        "  $(document).ready(function() {",
-        "",
-        "    $(\"#getMessage\").on(\"click\", function(){",
-        "      // Only change code below this line.",
-        "      ",
-        "      ",
-        "      ",
-        "      // Only change code above this line.",
-        "    });",
-        "",
-        "  });",
-        "fcces",
-        "",
-        "<div class=\"container-fluid\">",
-        "  <div class=\"row text-center\">",
-        "    <h2>Cat Photo Finder</h2>",
-        "  </div>",
-        "  <div class=\"row text-center\">",
-        "    <div class=\"col-xs-12 well message\">",
-        "      The message will go here",
-        "    </div>",
-        "  </div>",
-        "  <div class=\"row text-center\">",
-        "    <div class=\"col-xs-12\">",
-        "      <button id=\"getMessage\" class=\"btn btn-primary\">",
-        "        Get Message",
-        "      </button>",
-        "    </div>",
-        "  </div>",
-        "</div>"
-      ],
-      "tests": [
-        "assert(code.match(/\\$\\s*?\\(\\s*?(\\\"|\\')\\#getMessage(\\\"|\\')\\s*?\\)\\s*?\\.\\s*?on\\s*?\\(\\s*?(\\\"|\\')click(\\\"|\\')\\s*?\\,\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/g), 'message: You should have a click handler on the <code>getMessage</code> button to trigger the AJAX request.');",
-        "assert(code.match(/\\s*?\\}\\s*?\\)\\s*?\\;/g), 'message: You should have at least one closing set of brackets and parenthesis.');",
-        "assert(code.match(/\\s*?\\}\\s*?\\)\\s*?\\;/g) && code.match(/\\,\\s*?function\\s*?\\(\\s*?[A-Za-z_\\$]?\\w*?\\s*?\\)\\s*?\\{/g) && code.match(/\\s*?\\}\\s*?\\)\\s*?\\;/g).length === code.match(/\\s*?function\\s*?\\(\\s*?[A-Za-z_\\$]?\\w*?\\s*?\\)\\s*?\\{/g).length, 'message: Each callback function should have a closing set of brackets and parenthesis.');",
-        "assert(code.match(/\\$\\s*?\\.\\s*?getJSON\\s*?\\(\\s*?(\\\"|\\')\\/json\\/cats\\.json(\\\"|\\')\\s*?\\,\\s*?function\\s*?\\(\\s*?[A-Za-z_\\$]\\w*\\s*?\\)\\s*?\\{/g), 'message: You should be making use of the <code>getJSON</code> method given in the description to load data from the JSON file.');",
-        "assert(code.match(/\\$\\s*?\\.\\s*?getJSON\\s*?\\(\\s*?(\\\"|\\')\\/json\\/cats\\.json(\\\"|\\')\\s*?\\,\\s*?function\\s*?\\(\\s*?([A-Za-z_\\$]\\w*)\\s*?\\)\\s*?{/g) && /\\$\\s*?\\.\\s*?getJSON\\s*?\\(\\s*?(\\\"|\\')\\/json\\/cats\\.json(\\\"|\\')\\s*?,\\s*?function\\s*?\\(\\s*?([A-Za-z_\\$]\\w*)\\s*?\\)/g.exec(code)[3] === /\\$\\(\\s*?(\\\"|\\')\\.message\\s*?(\\\"|\\')\\s*?\\)\\s*?\\.html\\s*?\\(\\s*?JSON\\s*?\\.\\s*?stringify\\s*?\\(\\s*?([A-Za-z_\\$]\\w*)\\s*?\\)\\s*?\\)/g.exec(code)[3], 'message: Don&apos;t forget to make the <code>.html</code> change the contents of the message box so that it contains the result of the <code>getJSON</code>.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "es": {
-          "title": "Obtén JSON con el método getJSON de jQuery",
-          "description": [
-            "También puedes solicitar los datos de una fuente externa. Aquí es donde entran en juego las API. ",
-            "Recuerda que las API - o interfaces de programación de aplicaciones - son herramientas que utilizan los ordenadores para comunicarse entre sí.",
-            "La mayoría de las API para el web transfieren datos en un formato llamado JSON. JSON significa notación de objeto JavaScript (<em>JavaScript Object Notation</em>).",
-            "Tú ya has usado JSON al crear objetos en JavaScript. JSON no es más que las propiedades del objeto y sus valores actuales, intercalados entre un <code>{</code> y un <code>}</code>. ",
-            "Estas propiedades y sus valores a menudo se denominan \" pares llave-valor\".",
-            "Vamos a obtener el JSON de la API de fotos de gato de Free Code Camp.",
-            "Aquí está el código que puedes poner en tu evento de pulsación para lograrlo:",
-            "<blockquote>$.getJSON(\"/json/cats.json\", function(json) {<br>  $(\".message\").html(JSON.stringify(json));<br>});</blockquote>",
-            "Una vez lo añadas, pulsa el botón \"Get Message\". Tu función Ajax sustituirá el texto \"The message will go here\" con la salida JSON en bruto de la API de fotos de gato de Free Code Camp."
-          ]
-        },
-        "pt": {
-          "title": "Obter um JSON com o método getJSON do jQuery",
-          "description": [
-            "Também é possivel solicitar os dados de uma fonte externa. É aqui onde as API's entram em jogo.",
-            "Lembre que as API's - Interface de Programação de Aplicativos - são ferramentas que os computadores usam para se comunicar entre si.",
-            "A maioria das API's transferem de dados para web em um formato chamado JSON. JSON significa notação de objeto JavaScript (<em>JavaScript Object Notation</em>).",
-            "Você já usou JSON para criar objetos em JavaScript. O JSON não é mais que as propriedades de um objeto e seus valores atuais, separados entre <code>{</code> e um <code>}</code>.",
-            "Estas propriedades e seus valores são muitas vezes denominados de \" pares chave-valor\".",
-            "Vamos obter o JSON da API de fotos de gatos do Free Code Camp.",
-            "Aqui esta o código que você pode por no nosso evento de clique para fazer isso:",
-            "<blockquote>$.getJSON(\"/json/cats.json\", function(json) {<br>  $(\".message\").html(JSON.stringify(json));<br>});</blockquote>",
-            "Uma vez adicionadas, aperte o botão \"Get Message\". Sua função Ajax substituirá o texto \"The message will go here\" com a saída bruta do JSON da API de gatos do Free Code Camp."
-          ]
-        }
-      }
-    },
-    {
-      "id": "56bbb991ad1ed5201cd392d7",
-      "title": "Convert JSON Data to HTML",
-      "description": [
-        "Now that we're getting data from a JSON API, let's display it in our HTML.",
-        "We can use the <code>.forEach()</code> method to loop through our data and modify our HTML elements.",
-        "First, let's declare an html variable with <code>var html = \"\";</code>.",
-        "Then, let's loop through our JSON, adding more HTML to that variable. When the loop is finished, we'll render it.",
-        "Here's the code that does this:",
-        "<blockquote>json.forEach(function(val) {</br>  var keys = Object.keys(val);</br>  html += \"&lt;div class='cat'&gt;\";</br>  keys.forEach(function(key) {</br>    html += \"&lt;strong&gt;\" + key + \"&lt;/strong&gt;: \" + val[key] + \"&lt;br&gt;\";</br>  });</br>  html += \"&lt;/div&gt;&lt;br&gt;\";</br>});</blockquote>"
-      ],
-      "challengeSeed": [
-        "fccss",
-        "  $(document).ready(function() {",
-        "",
-        "    $(\"#getMessage\").on(\"click\", function() {",
-        "      $.getJSON(\"/json/cats.json\", function(json) {",
-        "",
-        "        var html = \"\";",
-        "        // Only change code below this line.",
-        "        ",
-        "        ",
-        "        ",
-        "        // Only change code above this line.",
-        "",
-        "        $(\".message\").html(html);",
-        "",
-        "      });",
-        "    });",
-        "  });",
-        "fcces",
-        "",
-        "<div class=\"container-fluid\">",
-        "  <div class=\"row text-center\">",
-        "    <h2>Cat Photo Finder</h2>",
-        "  </div>",
-        "  <div class=\"row text-center\">",
-        "    <div class=\"col-xs-12 well message\">",
-        "      The message will go here",
-        "   </div>",
-        "  </div>",
-        "  <div class=\"row text-center\">",
-        "    <div class=\"col-xs-12\">",
-        "      <button id=\"getMessage\" class=\"btn btn-primary\">",
-        "        Get Message",
-        "      </button>",
-        "    </div>",
-        "  </div>",
-        "</div>"
-      ],
-      "tests": [
-        "assert(code.match(/json\\.forEach/gi), 'message: The message box should have something in it.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "es": {
-          "title": "Convierte datos JSON a datos HTML",
-          "description": [
-            "Ahora que estamos obteniendo datos de una API JSON, mostremóslos en nuestro HTML.",
-            "Podemos usar el método <code>.forEach()</code> para recorrer nuestros datos y modificar nuestros elementos HTML.",
-            "En primer lugar, vamos a declarar una variable llamada <code>html</code> con <code>var html = \"\";</code>.",
-            "Después, iteremos a traveś de nuestro JSON, añadiendo más HTML a esa variable. Cuando se termina el ciclo, vamos a presentarla. ",
-            "Aquí está el código que hace esto:",
-            "<blockquote>json.forEach(function(val) {</br>  var keys = Object.keys(val);</br>  html += \"&lt;div class='cat'&gt;\";</br>  keys.forEach(function(key) {</br>    html += \"&lt;strong&gt;\" + key + \"&lt;/strong&gt;: \" + val[key] + \"&lt;br&gt;\";</br>  });</br>  html += \"&lt;/div&gt;&lt;br&gt;\";</br>});</blockquote>"
-          ]
-        },
-        "pt": {
-          "title": "Converter dados JSON para HTML",
-          "description": [
-            "Agora que estamos obtendo os dados de uma API JSON, vamos mostra-los em nosso HTML",
-            "Podemos usar o método <code>.forEach()</code> para percorrer os nossos dados e modificar o elementos HTML.",
-            "Em primeiro lugar, vamos declarar uma variável chamada <code>html</code> com <code>var html = \"\";</code>.",
-            "Depois, vamos percorrer através do nosso JSON, adicionando mais HTML para a nossa variável. Quando essa iteração terminar, vamos apresentar o resultado.",
-            "Aqui está o código que faz isso:",
-            "<blockquote>json.forEach(function(val) {</br>  var keys = Object.keys(val);</br>  html += \"&lt;div class='cat'&gt;\";</br>  keys.forEach(function(key) {</br>    html += \"&lt;strong&gt;\" + key + \"&lt;/strong&gt;: \" + val[key] + \"&lt;br&gt;\";</br>  });</br>  html += \"&lt;/div&gt;&lt;br&gt;\";</br>});</blockquote>"
-          ]
-        }
-      }
-    },
-    {
-      "id": "56bbb991ad1ed5201cd392d8",
-      "title": "Render Images from Data Sources",
-      "description": [
-        "We've seen from the last two lessons that each object in our JSON array contains an <code>imageLink</code> key with a value that is the URL of a cat's image.",
-        "When we're looping through these objects, let's use this <code>imageLink</code> property to display this image in an <code>img</code> element.",
-        "Here's the code that does this:",
-        "<code>html += \"&lt;img src='\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'&gt;\";</code>"
-      ],
-      "challengeSeed": [
-        "fccss",
-        "  $(document).ready(function() {",
-        "",
-        "    $(\"#getMessage\").on(\"click\", function() {",
-        "      $.getJSON(\"/json/cats.json\", function(json) {",
-        "",
-        "        var html = \"\";",
-        "",
-        "        json.forEach(function(val) {",
-        "",
-        "          html += \"<div class='cat'>\";",
-        "",
-        "          // Only change code below this line.",
-        "          ",
-        "          ",
-        "          ",
-        "          // Only change code above this line.",
-        "",
-        "          html += \"</div>\";",
-        "",
-        "        });",
-        "",
-        "        $(\".message\").html(html);",
-        "",
-        "      });",
-        "    });",
-        "  });",
-        "fcces",
-        "",
-        "<div class=\"container-fluid\">",
-        "  <div class=\"row text-center\">",
-        "    <h2>Cat Photo Finder</h2>",
-        "  </div>",
-        "  <div class=\"row text-center\">",
-        "    <div class=\"col-xs-12 well message\">",
-        "      The message will go here",
-        "    </div>",
-        "  </div>",
-        "  <div class=\"row text-center\">",
-        "    <div class=\"col-xs-12\">",
-        "      <button id=\"getMessage\" class=\"btn btn-primary\">",
-        "        Get Message",
-        "      </button>",
-        "    </div>",
-        "  </div>",
-        "</div>"
-      ],
-      "tests": [
-        "assert(code.match(/val\\.imageLink/gi) || code.match(/val\\[\"imageLink\"\\]/gi), 'message: You should have used the <code>imageLink</code> property to display the images.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "es": {
-          "title": "Presenta imágenes de fuentes de datos",
-          "description": [
-            "Hemos visto en las dos últimas lecciones que cada objeto en nuestro vector JSON contiene una llave <code>imageLink</code> con un valor que corresponde a la URL de la imagen de un gato.",
-            "Cuando estamos recorriendo estos objetos, usemos esta propiedad <code>imageLink</code> para visualizar la imagen en un elemento <code>img</code>.",
-            "Aquí está el código que hace esto:",
-            "<code>html += \"&lt;img src='\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'&gt;\";</code>"
-          ]
-        },
-        "pt": {
-          "title": "Apresentar as imagens da fonte de dados",
-          "description": [
-            "Como temos visto nas ultimas lições, cada objeto em nosso array JSON contém a chave <code>imageLink</code> com um valor que corresponde a URL da imagem de um gato.",
-            "Quando estamos percorrendo por estes objetos, usamos a propriedade <code>imageLink</code> para visualizar a imagem em um elemento <code>img</code>.",
-            "Aqui está o código para fazer isso:",
-            "<code>html += \"&lt;img src='\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'&gt;\";</code>"
-          ]
-        }
-      }
-    },
-    {
-      "id": "56bbb991ad1ed5201cd392d9",
-      "title": "Prefilter JSON",
-      "description": [
-        "If we don't want to render every cat photo we get from our Free Code Camp's Cat Photo JSON API, we can pre-filter the json before we loop through it.",
-        "Let's filter out the cat whose \"id\" key has a value of 1.",
-        "Here's the code to do this:",
-        "<blockquote>json = json.filter(function(val) {</br>  return (val.id !== 1);</br>});</blockquote>"
-      ],
-      "challengeSeed": [
-        "fccss",
-        "  $(document).ready(function() {",
-        "",
-        "    $(\"#getMessage\").on(\"click\", function() {",
-        "      $.getJSON(\"/json/cats.json\", function(json) {",
-        "",
-        "        var html = \"\";",
-        "",
-        "        // Only change code below this line.",
-        "        ",
-        "        ",
-        "        ",
-        "        // Only change code above this line.",
-        "",
-        "        json.forEach(function(val) {",
-        "",
-        "          html += \"<div class='cat'>\"",
-        "",
-        "          html += \"<img src='\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'>\"",
-        "",
-        "          html += \"</div>\"",
-        "",
-        "        });",
-        "",
-        "        $(\".message\").html(html);",
-        "",
-        "      });",
-        "    });",
-        "  });",
-        "fcces",
-        "",
-        "<div class=\"container-fluid\">",
-        "  <div class=\"row text-center\">",
-        "    <h2>Cat Photo Finder</h2>",
-        "  </div>",
-        "  <div class=\"row text-center\">",
-        "    <div class=\"col-xs-12 well message\">",
-        "      The message will go here",
-        "    </div>",
-        "  </div>",
-        "  <div class=\"row text-center\">",
-        "    <div class=\"col-xs-12\">",
-        "      <button id=\"getMessage\" class=\"btn btn-primary\">",
-        "        Get Message",
-        "      </button>",
-        "    </div>",
-        "  </div>",
-        "</div>"
-      ],
-      "tests": [
-        "assert(code.match(/filter/gi), 'message: You should be making use of the .filter method.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "es": {
-          "title": "Pre-filtra JSON",
-          "description": [
-            "Si no queremos presentar cada foto de gato que obtengamos de la API JSON de fotos de gato de Free Code Camp, podemos pre-filtrar el json antes de iterar a través de este.",
-            "Vamos a filtrar el gato cuya llave \"id\" tiene un valor de 1.",
-            "Aquí está el código para hacer esto:",
-            "<blockquote>json = json.filter(function(val) {</br>  return (val.id !== 1);</br>});</blockquote>"
-          ]
-        },
-        "pt": {
-          "title": "Pré-filtro JSON",
-          "description": [
-            "Se não queremos apresentar cada foto de gato que obtemos da API JSON de fotos de gatos do Free Code Camp, podemos realizar um pré-filtro o JSON  antes de iterar através dele.",
-            "Vamos filtrar o gato cuja a chave \"id\" tenha o valor 1.",
-            "Aqui está o código para fazer isso:",
-            "<blockquote>json = json.filter(function(val) {</br>  return (val.id !== 1);</br>});</blockquote>"
-          ]
-        }
-      }
-    },
-    {
-      "id": "56bbb991ad1ed5201cd392da",
-      "title": "Get Geo-location Data",
-      "description": [
-        "Another cool thing we can do is access our user's current location. Every browser has a built in navigator that can give us this information.",
-        "The navigator will get our user's current longitude and latitude.",
-        "You will see a prompt to allow or block this site from knowing your current location. The challenge can be completed either way, as long as the code is correct.",
-        "By selecting allow you will see the text on the output phone change to your latitude and longitude",
-        "Here's some code that does this:",
-        "<blockquote>if (navigator.geolocation) {<br>  navigator.geolocation.getCurrentPosition(function(position) {<br>    $(\"#data\").html(\"latitude: \" + position.coords.latitude + \"&lt;br&gt;longitude: \" + position.coords.longitude);<br>  });<br>}</blockquote>",
-        "Don't forget to use double quotes around selectors as mentioned <a href='/challenges/target-html-elements-with-selectors-using-jquery' target='_blank'>here.</a>"
-      ],
-      "challengeSeed": [
-        "fccss",
-        "  // Only change code below this line.",
-        "  ",
-        "  ",
-        "  ",
-        "  // Only change code above this line.",
-        "fcces",
-        "<h4>You are here:</h4>",
-        "<div id=\"data\">",
-        "  ",
-        "</div>"
-      ],
-      "tests": [
-        "assert(code.match(/navigator\\.geolocation\\.getCurrentPosition/gi), 'message: You should make use of <code>navigator.geolocation</code> to access the users current location.');",
-        "assert(code.match(/position\\.coords\\.latitude/gi), 'message: You should make use of <code>position.coords.latitude</code> to display the users&#39; latitudinal location.');",
-        "assert(code.match(/position\\.coords\\.longitude/gi), 'message: You should make use of <code>position.coords.longitude</code> to display the users&#39; longitudinal location.');",
-        "assert(code.match(/\\$\\(\\s*['\"]#data['\"]\\s*\\)\\s*\\.html\\([.\\w\\W]*?\\);/gi), 'message: You should display the users&#39; position within the <code>data</code> div element');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "es": {
-          "title": "Recibir datos de Geo-localización",
-          "description": [
-            "Otra cosa interesante que podemos hacer es acceder a la ubicación actual de nuestros usuarios. Todos los navegadores han incorporado un geo-localizador que nos puede dar esta información. ",
-            "El navegador puede obtener la longitud y latitud actual de nuestros usuarios.",
-            "Como usuario verás un mensaje para permitir o evitar que el sitio conozca tu ubicación actual. El desafío se puede completar de cualquier manera, siempre y cuando el código sea correcto. ",
-            "Si lo permites, verás que el texto en el teléfono de la derecha cambiará con tu latitud y longitud",
-            "Aquí hay un código que hace esto:",
-            "<blockquote>if (navigator.geolocation) {</br>  navigator.geolocation.getCurrentPosition(function(position) {</br>    $(\"#data\").html(\"latitude: \" + position.coords.latitude + \"&lt;br&gt;longitude: \" + position.coords.longitude);</br>  });</br>}</blockquote>"
-          ]
-        },
-        "pt": {
-          "title": "Receber dados de Geo-localização",
-          "description": [
-            "Outra coisa interessante que podemos fazer é acessar a atual localização do nosso usuário. Todos os navegadores tem implementado um geo-localizador que pode nos fornecer essa informação.",
-            "O navegador pode obter a longitude e latitude atual de nossos usuários",
-            "Você irá ver uma janela para bloquear ou permitir que o site possa conhecer a nossa localização atual. O desafio será completado de qualquer maneira, sempre que o código estará correto.",
-            "Se você permitir, irá ver o texto de saída do telefone mudar para sua latitude e longitude.",
-            "Aqui está o código para fazer isso:",
-            "<blockquote>if (navigator.geolocation) {</br>  navigator.geolocation.getCurrentPosition(function(position) {</br>    $(\"#data\").html(\"latitude: \" + position.coords.latitude + \"&lt;br&gt;longitude: \" + position.coords.longitude);</br>  });</br>}</blockquote>"
-          ]
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/01-front-end-development-certification/object-oriented-and-functional-programming.json b/seed/challenges/01-front-end-development-certification/object-oriented-and-functional-programming.json
deleted file mode 100644
index d5c3bbc17eae6c..00000000000000
--- a/seed/challenges/01-front-end-development-certification/object-oriented-and-functional-programming.json
+++ /dev/null
@@ -1,698 +0,0 @@
-{
-  "name": "Object Oriented and Functional Programming",
-  "order": 7,
-  "time": "2 hours",
-  "helpRoom": "HelpJavaScript",
-  "note": [
-    "Methods",
-    "Closures",
-    "Factories",
-    "Pure Functions",
-    "Currying Functions",
-    "Functors",
-    "Currying Functions"
-  ],
-  "challenges": [
-    {
-      "id": "cf1111c1c15feddfaeb1bdef",
-      "title": "Declare JavaScript Objects as Variables",
-      "description": [
-        "Before we dive into Object Oriented Programming, let's revisit JavaScript objects.",
-        "Give your <code>motorBike</code> object <code>wheels</code>, <code>engines</code> and <code>seats</code> attributes and set each to a number."
-      ],
-      "challengeSeed": [
-        "var car = {",
-        "  \"wheels\":4,",
-        "  \"engines\":1,",
-        "  \"seats\":5",
-        "};",
-        "",
-        "var motorBike = {",
-        "",
-        "  // Only change code below this line.",
-        "",
-        "};"
-      ],
-      "tail": [
-        "(function() {return JSON.stringify(motorBike);})();"
-      ],
-      "solutions": [
-        "var car = {\n  \"wheels\":4,\n  \"engines\":1,\n  \"seats\":5\n};\n\nvar motorBike = {\n  \"wheels\": 4,\n  \"engines\": 1,\n  \"seats\": 2\n};"
-      ],
-      "tests": [
-        "assert(typeof motorBike.engines === 'number', 'message: <code>motorBike</code> should have an <code>engines</code> attribute set to a number.');",
-        "assert(typeof motorBike.wheels === 'number', 'message: <code>motorBike</code> should have a <code>wheels</code> attribute set to a number.');",
-        "assert(typeof motorBike.seats === 'number', 'message: <code>motorBike</code> should have a <code>seats</code> attribute set to a number.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 1,
-      "translations": {
-        "es": {
-          "title": "Declara objetos de JavaScript como variables",
-          "description": [
-            "Antes de sumergirnos en Programación Orientada a Objetos, vamos a revisar los objetos de JavaScript.",
-            "Dale a tu objeto <code>motorBike</code> un atributo <code>wheels</code>, otro llamado <code>motors</code> y otro <code>seats</code> y asignales números."
-          ]
-        }
-      }
-    },
-    {
-      "id": "cf1111c1c15feddfaeb2bdef",
-      "title": "Construct JavaScript Objects with Functions",
-      "description": [
-        "We are also able to create objects using <code>constructor</code> functions.",
-        "A <code>constructor</code> function is given a capitalized name to make it clear that it is a <code>constructor</code>.",
-        "Here's an example of a <code>constructor</code> function:",
-        "<blockquote>var Car = function() {<br>&nbsp;&nbsp;this.wheels = 4;<br>&nbsp;&nbsp;this.engines = 1;<br>&nbsp;&nbsp;this.seats = 5;<br>};</blockquote>",
-        "In a <code>constructor</code> the <code>this</code> variable refers to the new object being created by the constructor. So when we write,",
-        "<code>&nbsp;&nbsp;this.wheels = 4;</code>",
-        "inside of the <code>constructor</code> we are giving the new object it creates a property called <code>wheels</code> with a value of <code>4</code>.",
-        "You can think of a <code>constructor</code> as a description for the object it will create.",
-        "Have your <code>MotorBike</code> <code>constructor</code> describe an object with <code>wheels</code>, <code>engines</code> and <code>seats</code> properties and set them to numbers."
-      ],
-      "challengeSeed": [
-        "var Car = function() {",
-        "  this.wheels = 4;",
-        "  this.engines = 1;",
-        "  this.seats = 5;",
-        "};",
-        "",
-        "// Only change code below this line.",
-        "",
-        "var MotorBike = function() {",
-        "",
-        "};"
-      ],
-      "tail": [
-        "(function() {return JSON.stringify(new MotorBike());})();"
-      ],
-      "solutions": [
-        "var Car = function() {\n  this.wheels = 4;\n  this.engines = 1;\n  this.seats = 5;\n};\n\nvar myCar = new Car();\n\nvar MotorBike = function() {\n  this.engines = 1;\n  this.seats = 1;\n  this.wheels = 4;\n};\n\nvar myMotorBike = new MotorBike();"
-      ],
-      "tests": [
-        "assert(typeof (new MotorBike()).engines === 'number', 'message: <code>MotorBike</code> should have an <code>engines</code> attribute set to a number.');",
-        "assert(typeof (new MotorBike()).wheels === 'number', 'message: <code>MotorBike</code> should have a <code>wheels</code> attribute set to a number.');",
-        "assert(typeof (new MotorBike()).seats === 'number', 'message: <code>MotorBike</code> should have a <code>seats</code> attribute set to a number.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 1,
-      "translations": {
-        "es": {
-          "title": "Construye objetos de JavaScript con funciones",
-          "description": [
-            "También podemos crear objetos utilizando funciones <code>constructoras</code>.",
-            "A cada función <code>constructora</code> se le da un nombre comenzando en mayúsculas para que quede claro que es una <code>constructora</code>.",
-            "He aquí un ejemplo de una función <code>constructora</code>:",
-            "<code>var Carro = function() {</code>",
-            "<code>& nbsp; & nbsp; this.llantas = 4; </code>",
-            "<code>& nbsp; & nbsp; this.motores = 1; </code>",
-            "<code>& nbsp; & nbsp; this.asientos = 5; </code>",
-            "<code>}; </code>",
-            "En una <code>constructora</code> la variable <code>this</code> hace referencia al nuevo objeto que está siendo creado por la constructora. Así que cuando escribimos ",
-            "<code>&nbsp;&nbsp;this.llantas = 4;</code>",
-            "dentro de la <code>constructora</code> le estamos dando el nuevo objeto que se crea una propiedad llamada <code>llantas</code> con un valor de <code>4</code>.",
-            "Puedes pensar en una <code>constructora</code> como una descripción del objeto que crea.",
-            "Haz que tu <code>constructora</code> <code>MotorBike</code> describa un objeto con las propiedades <code>wheels</code>,<code>engines</code> and <code>seats</code> y asignales números."
-          ]
-        }
-      }
-    },
-    {
-      "id": "cf1111c1c15feddfaeb4bdef",
-      "title": "Make Instances of Objects with a Constructor Function",
-      "description": [
-        "Now let's put that great <code>constructor</code> function we made in the last lesson to use!",
-        "To use a <code>constructor</code> function we call it with the <code>new</code> keyword in front of it like:",
-        "<code>var myCar = new Car();</code>",
-        "<code>myCar</code> is now an <code>instance</code> of the <code>Car</code> constructor that looks like the object it described:",
-        "<blockquote>{<br>&nbsp;&nbsp;wheels: 4,<br>&nbsp;&nbsp;engines: 1,<br>&nbsp;&nbsp;seats: 5<br>}</blockquote>",
-        "Note that it is important to use the <code>new</code> keyword when calling a constructor. This is how Javascript knows to create a new object and that all the references to <code>this</code> inside the constructor should be referring to this new object.",
-        "Now, once the <code>myCar</code> <code>instance</code> is created it can be used like any other object and can have its properties accessed and modified the same way you would usually. For example:",
-        "<code>myCar.turboType = \"twin\";</code>",
-        "Our <code>myCar</code> variable now has a property <code>turboType</code> with a value of <code>\"twin\"</code>.",
-        "In the editor, use the <code>Car</code> <code>constructor</code> to create a new <code>instance</code> and assign it to <code>myCar</code>.",
-        "Then give <code>myCar</code> a <code>nickname</code> property with a string value."
-      ],
-      "challengeSeed": [
-        "var Car = function() {",
-        "  this.wheels = 4;",
-        "  this.engines = 1;",
-        "  this.seats = 5;",
-        "};",
-        "",
-        "// Only change code below this line.",
-        "",
-        "var myCar;"
-      ],
-      "tail": [
-        "(function() {return JSON.stringify(myCar);})();"
-      ],
-      "solutions": [
-        "var Car = function() {\n  this.wheels = 4;\n  this.engines = 1;\n  this.seats = 5;\n};\n\nvar myCar = new Car();\n\nmyCar.nickname = \"Lucy\";"
-      ],
-      "tests": [
-        "assert((new Car()).wheels === 4, 'message: The property <code>wheels</code> should still be <code>4</code> in the object <code>constructor</code>.');",
-        "assert(typeof (new Car()).nickname === 'undefined', 'message: There should not be a property <code>nickname</code> in the object <code>constructor</code>.');",
-        "assert(myCar.wheels === 4, 'message: The property <code>wheels</code> of <code>myCar</code> should equal <code>4</code>.');",
-        "assert(typeof myCar.nickname === 'string', 'message: The property <code>nickname</code> of <code>myCar</code> should be a string.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 1,
-      "translations": {
-        "es": {
-          "title": "Crea instancias de objetos con funciones constructoras",
-          "description": [
-            "¡Ahora usemos esa gran <code>constructora</code> que hicimos en la última lección!",
-            "Para utilizar una función <code>constructora</code> la llamamos con la palabra reservada <code>new</code> al frente, como:",
-            "<code>var miCarro = new Carro();</code>",
-            "<code>miCarro</code>es ahora una <code>instancia</code> de la constructora <code>Carro</code> que se parece al objeto que describe:",
-            "<code>{</code>",
-            "<code>&nbsp;&nbsp;wheels: 4,</code>",
-            "<code>&nbsp;&nbsp;engines: 1,</code>",
-            "<code>&nbsp;&nbsp;seats: 5</code>",
-            "<code>}</code>",
-            "Ten en cuenta que es importante utilizar la palabra reservada <code>new</code> cuando se llama a una constructora. Así es como Javascript sabe crear un objeto nuevo y hace que todas las referencias a <code>this</code> dentro del constructor se refieran al objeto nuevo ",
-            "Ahora, una vez que la <code>instancia</code> <code>miCarro</code> se crea, puede ser utilizada como cualquier otro objeto y puedes acceder o modificar sus propiedades como lo harías normalmente. Por ejemplo:",
-            "<code>miCarro.tipoTurbo = \"doble\"; </code>",
-            "Nuestra variable <code>miCarro</code> tiene ahora una propiedad <code>tipoTurbo</code> con un valor de <code>\"doble\"</code>.",
-            "En el editor, utiliza la <code>constructora</code> <code>Car</code> para crear una nueva <code>instancia</code> y asignala a <code>myCar</code>.",
-            "A continuación, dale a <code>myCar</code> una propiedad <code>nickname</code> con un valor tipo cadena."
-          ]
-        }
-      }
-    },
-    {
-      "id": "563cfb55594311ffcb333c70",
-      "title": "Make Unique Objects by Passing Parameters to our Constructor",
-      "description": [
-        "The <code>constructor</code> we have is great, but what if we don't always want to create the same object?",
-        "To solve this we can add <code>parameters</code> to our <code>constructor</code>. We do this like the following example:",
-        "<blockquote>var Car = function(wheels, seats, engines) {<br>&nbsp;&nbsp;this.wheels = wheels;<br>&nbsp;&nbsp;this.seats = seats;<br>&nbsp;&nbsp;this.engines = engines;<br>};</blockquote>",
-        "Now we can pass in <code>arguments</code> when we call our <code>constructor</code>.",
-        "<code>var myCar = new Car(6, 3, 1);</code>",
-        "This code will create an object that uses the <code>arguments</code> we passed in and looks like:",
-        "<blockquote>{<br>&nbsp;&nbsp;wheels: 6,<br>&nbsp;&nbsp;seats: 3,<br>&nbsp;&nbsp;engines: 1<br>}</blockquote>",
-        "Now give it a try yourself! Alter the <code>Car</code> <code>constructor</code> to use <code>parameters</code> to assign values to the <code>wheels</code>, <code>seats</code>, and <code>engines</code> properties.",
-        "Then call your new <code>constructor</code> with three number <code>arguments</code> and assign it to <code>myCar</code> to see it in action."
-      ],
-      "challengeSeed": [
-        "var Car = function() {",
-        "  //Change this constructor",
-        "  this.wheels = 4;",
-        "  this.seats = 5;",
-        "  this.engines = 1;",
-        "};",
-        "",
-        "//Try it out here",
-        "var myCar;"
-      ],
-      "tail": [
-        "(function() {return JSON.stringify(myCar);})();"
-      ],
-      "solutions": [
-        "var Car = function(wheels,seats,engines) {\n  this.wheels = wheels;\n  this.seats = seats;\n  this.engines = engines;\n};\n\nvar myCar = new Car(4,1,1);"
-      ],
-      "tests": [
-        "assert((function(){var testCar = new Car(3,1,2); return testCar.wheels === 3 && testCar.seats === 1 && testCar.engines === 2;})(), 'message: Calling <code>new Car(3,1,2)</code> should produce an object with a <code>wheels</code> property of <code>3</code>, a <code>seats</code> property of <code>1</code>, and an <code>engines</code> property of <code>2</code>.');",
-        "assert((function(){var testCar = new Car(4,4,2); return testCar.wheels === 4 && testCar.seats === 4 && testCar.engines === 2;})(), 'message: Calling <code>new Car(4,4,2)</code> should produce an object with a <code>wheels</code> property of <code>4</code>, a <code>seats</code> property of <code>4</code>, and an <code>engines</code> property of <code>2</code>.');",
-        "assert((function(){var testCar = new Car(2,6,3); return testCar.wheels === 2 && testCar.seats === 6 && testCar.engines === 3;})(), 'message: Calling <code>new Car(2,6,3)</code> should produce an object with a <code>wheels</code> property of <code>2</code>, a <code>seats</code> property of <code>6</code>, and an <code>engines</code> property of <code>3</code>.');",
-        "assert(typeof myCar.wheels === 'number' && typeof myCar.seats === 'number' && typeof myCar.engines === 'number', 'message: <code>myCar</code> should have number values for the <code>wheels</code>, <code>seats</code>, and <code>engines</code> properties.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 1,
-      "translations": {
-        "es": {
-          "title": "Crea objetos únicos pasando parámetros a la constructora",
-          "description": [
-            "La <code>constructora</code> que tenemos es fabulosa, pero ¿qué hacer si no queremos crear siempre el mismo objeto?",
-            "Para solucionar esto podemos añadir<code>parámetros</code>en nuestra <code>constructora</code>. Hacemos esto como en el siguiente ejemplo: ",
-            "<code>var Carro = function (ruedas, asientos, motores) {</code>",
-            "<code>&nbsp;&nbsp;this.ruedas = ruedas;</code>",
-            "<code>&nbsp;&nbsp;this.asientos = asientos;</code>",
-            "<code>&nbsp;&nbsp;this.motores = motores;</code>",
-            "<code>};</code>",
-            "Ahora podemos pasar <code>argumentos</code> cuando llamamos a nuestra <code>constructora</code>.",
-            "<code>var miCarro = nuevo Carro(6, 3, 1); </code>",
-            "Este código crea un objeto que utiliza los <code>argumentos</code> que pasamos en y se ve así:",
-            "<code>{</code>",
-            "<code>&nbsp;&nbsp;ruedas: 6,</code>",
-            "<code>&nbsp;&nbsp;asientos: 3,</code>",
-            "<code>&nbsp;&nbsp;motores: 1</code>",
-            "<code>}</code>",
-            "¡Ahora date una oportunidad a ti mismo! Modifica la <code>constructora</code> <code>Car</code> para que use <code>parámetros</code> que permitan asignar valores para las propiedades <code>wheels</code>, <code>seats</code>, y <code>engines</code>. ",
-            "Entonces llama a tu nueva <code>constructora</code> con tres <code>argumentos</code> numéricos y asígnala a <code>myCar</code>para verla en acción."
-          ]
-        }
-      }
-    },
-    {
-      "id": "cf1111c1c15feddfaeb3bdef",
-      "title": "Make Object Properties Private",
-      "description": [
-        "Objects have their own attributes, called <code>properties</code>, and their own functions, called <code>methods</code>.",
-        "In the <a href='/challenges/make-instances-of-objects-with-a-constructor-function' target='_blank'>previous challenges</a>, we used the <code>this</code> keyword to reference <code>public properties</code> of the current object.",
-        "We can also create <code>private properties</code> and <code>private methods</code>, which aren't accessible from outside the object.",
-        "To do this, we create the variable inside the <code>constructor</code> using the <code>var</code> keyword we're familiar with, instead of creating it as a <code>property</code> of <code>this</code>.",
-        "This is useful for when we need to store information about an object but we want to control how it is used by outside code.",
-        "For example, what if we want to store the <code>speed</code> our car is traveling at but we only want outside code to be able to modify it by accelerating or decelerating, so the speed changes in a controlled way?",
-        "In the editor you can see an example of a <code>Car</code> <code>constructor</code> that implements this pattern.",
-        "Now try it yourself! Modify the <code>Bike</code> <code>constructor</code> to have a <code>private property</code> called <code>gear</code> and two <code>public methods</code> called <code>getGear</code> and <code>setGear</code> to get and set that value.",
-        "<a href='https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this' target='_blank'>Further explanation on <code>this</code> keyword</a>"
-      ],
-      "challengeSeed": [
-        "var Car = function() {",
-        "  // this is a private variable",
-        "  var speed = 10;",
-        "",
-        "  // these are public methods",
-        "  this.accelerate = function(change) {",
-        "    speed += change;",
-        "  };",
-        "",
-        "  this.decelerate = function() {",
-        "    speed -= 5;",
-        "  };",
-        "",
-        "  this.getSpeed = function() {",
-        "    return speed;",
-        "  };",
-        "};",
-        "",
-        "var Bike = function() {",
-        "",
-        "  // Only change code below this line.",
-        "",
-        "};",
-        "",
-        "var myCar = new Car();",
-        "",
-        "var myBike = new Bike();"
-      ],
-      "tail": [
-        "if(myBike.hasOwnProperty('getGear')){(function() {return JSON.stringify(myBike.getGear());})();}"
-      ],
-      "solutions": [
-        "var Car = function() {\n  var speed = 10;\n\n  this.accelerate = function(change) {\n    speed += change;\n  };\n\n  this.decelerate = function() {\n    speed -= 5;\n  };\n\n  this.getSpeed = function() {\n    return speed;\n  };\n};\n\nvar Bike = function() {\n  var gear = 1;\n  \n  this.getGear = function() {\n    return gear;\n  };\n  \n  this.setGear = function(newGear) {\n    gear = newGear;\n  };\n};\n\nvar myCar = new Car();\n\nvar myBike = new Bike();"
-      ],
-      "tests": [
-        "assert(typeof myBike.getGear !== 'undefined' && typeof myBike.getGear === 'function', 'message: The method <code>getGear</code> of <code>myBike</code> should be accessible outside the object.');",
-        "assert(typeof myBike.setGear !== 'undefined' && typeof myBike.setGear === 'function', 'message: The method <code>setGear</code> of <code>myBike</code> should be accessible outside the object.');",
-        "assert(typeof myBike.gear === 'undefined', 'message: <code>myBike.gear</code> should remain undefined.');",
-        "assert.strictEqual((function () { myBike.setGear(4); return myBike.getGear(); })(), 4, 'message: <code>myBike.getGear()</code> should return <code>4</code> after calling <code>myBike.setGear(4)</code>.');",
-        "assert.strictEqual((function () { myBike.setGear(3); return myBike.getGear(); })(), 3, 'message: <code>myBike.getGear()</code> should return <code>3</code> after calling <code>myBike.setGear(3)</code>.');",
-        "assert.strictEqual((function () { myBike.setGear(1); return myBike.getGear(); })(), 1, 'message: <code>myBike.getGear()</code> should return <code>1</code> after calling <code>myBike.setGear(1)</code>.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 1,
-      "translations": {
-        "es": {
-          "title": "Crea propiedades privadas de un objeto",
-          "description": [
-            "Los objetos tienen sus propios atributos, llamados <code>propiedades</code>, y sus propias funciones, llamadas<code>métodos</code>.",
-            "En los desafíos anteriores, se utilizó la palabra reservada <code>this</code> para referenciar <code>propiedades públicas</code>del objeto actual.",
-            "También podemos crear <code>propiedades privadas</code> y <code>métodos privados</code>, que no son accesibles desde fuera del objeto.",
-            "Para ello, creamos la variable dentro de la <code>constructora</code> usando la palabra reservada <code>var</code>, con la cual ya estamos familiarizados, en lugar de crearla con <code>this</code>. ",
-            "Esto es útil cuando necesitamos almacenar información sobre un objeto, pero controlando como se usa en el código externo al objeto.",
-            "Por ejemplo, ¿qué pasa si queremos almacenar la <code>velocidad</code> con la cual se desplaza nuestro carro, pero queremos que el código externo pueda modificarla sólo acelerando o desacelerando, de forma que la velocidad cambie de una manera controlada?",
-            "En el editor se puede ver un ejemplo de una <code>constructora</code> de <code>Car</code> que implementa este patrón.",
-            "¡Ahora pruébalo tú mismo! Modifica la <code>constructora</code> <code>Bike</code> para tener una <code>propiedad privada</code> llamada <code>gear</code>y dos<code>métodos públicos</code> llamados <code>getGear</code>y<code>setGear</code> para obtener y establecer ese valor."
-          ]
-        }
-      }
-    },
-    {
-      "id": "cf1111c1c15feddfaeb7bdef",
-      "title": "Iterate over Arrays with .map",
-      "description": [
-        "The <code>map</code> method is a convenient way to iterate through arrays. Here's an example usage:",
-        "<blockquote>var oldArray = [1, 2, 3];<br>var timesFour = oldArray.map(function(val){<br>&nbsp;&nbsp;return val * 4;<br>});<br>console.log(timesFour); // returns [4, 8, 12]<br>console.log(oldArray);  // returns [1, 2, 3]</blockquote>",
-        "The <code>map</code> method will iterate through every element of the array, creating a new array with values that have been modified by the callback function, and return it.  Note that it does not modify the original array.",
-        "In our example the callback only uses the value of the array element (the <code>val</code> argument) but your callback can also include arguments for the <code>index</code> and <code>array</code> being acted on.",
-        "Use the map function to add 3 to every value in the variable <code>oldArray</code>, and save the results into variable <code>newArray</code>. oldArray should not change."
-      ],
-      "challengeSeed": [
-        "var oldArray = [1,2,3,4,5];",
-        "",
-        "// Only change code below this line.",
-        "",
-        "var newArray = oldArray;"
-      ],
-      "tail": [
-        "(function() {return newArray;})();"
-      ],
-      "solutions": [
-        "var oldArray = [1,2,3,4,5];\nvar newArray = oldArray.map(function(val){\n  return val + 3;\n});"
-      ],
-      "tests": [
-        "assert.deepEqual(oldArray, [1,2,3,4,5], 'message: You should not change the original array.');",
-        "assert.deepEqual(newArray, [4,5,6,7,8], 'message: You should add three to each value in the array.');",
-        "assert(editor.getValue().match(/\\.map\\s*\\(/gi), 'message: You should be making use of the <code>map</code> method.');",
-        "assert(editor.getValue().match(/\\[1\\,2\\,3\\,4\\,5\\]/gi), 'message: You should only modify the array with <code>map</code>.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 1,
-      "translations": {
-        "es": {
-          "title": "Iterar sobre vectores con .map",
-          "description": [
-            "El método <code>map</code> es una manera conveniente de iterar sobre vectores. He aquí un ejemplo de uso: ",
-            "<code>var porCuatro = vectorAntiguo.map(function(val){</code>",
-            "<code>&nbsp;&nbsp;return val * 4;</code>",
-            "<code>});</code>",
-            "El método <code>map</code> iterará sobre cada elemento del vector, creando un nuevo vector con los valores modificados por la función de devolución de llamada (<em>callback</em>) y retornará ese nuevo arreglo.",
-            "En nuestro ejemplo, la función de devolución de llamada sólo usa el valor del elemento del vector sobre el que está iterando (parámetro <code>val</code>), pero tu función de devolución de llamada también puede incluir parámetros para el <code>índice</code> y el <code>vector</code> completo. ",
-            "Usa la función <code>map</code> para añadir 3 a cada valor de la variable <code>oldArray</code>."
-          ]
-        }
-      }
-    },
-    {
-      "id": "cf1111c1c15feddfaeb8bdef",
-      "title": "Condense arrays with .reduce",
-      "description": [
-        "The array method <code>reduce</code> is used to iterate through an array and condense it into one value.",
-        "To use <code>reduce</code> you pass in a callback whose arguments are an accumulator (in this case, <code>previousVal</code>) and the current value (<code>currentVal</code>).",
-        "The accumulator is like a total that <code>reduce</code> keeps track of after each operation. The current value is just the next element in the array you're iterating through.",
-        "<code>reduce</code> has an optional second argument which can be used to set the initial value of the accumulator. If no initial value is specified it will be the first array element and <code>currentVal</code> will start with the second array element.",
-        "Here is an example of <code>reduce</code> being used to subtract all the values of an array:",
-        "<blockquote>var singleVal = array.reduce(<wbr>function(previousVal, currentVal) {<br>&nbsp;&nbsp;return previousVal - currentVal;<br>}, 0);</blockquote>",
-        "Use the <code>reduce</code> method to sum all the values in <code>array</code> and assign it to <code>singleVal</code>."
-      ],
-      "challengeSeed": [
-        "var array = [4,5,6,7,8];",
-        "var singleVal = 0;",
-        "",
-        "// Only change code below this line.",
-        "",
-        "singleVal = array;"
-      ],
-      "tail": [
-        "(function() {return singleVal;})();"
-      ],
-      "solutions": [
-        "var array = [4,5,6,7,8];\nvar singleVal = 0;\nsingleVal = array.reduce(function(previousVal, currentVal) {\n  return previousVal + currentVal;\n}, 0);"
-      ],
-      "tests": [
-        "assert(singleVal == 30, 'message: <code>singleVal</code> should be equal to the sum of all items in the <code>array</code> variable.');",
-        "assert(editor.getValue().match(/\\.reduce\\s*\\(/gi), 'message: You should have made use of the <code>reduce</code> method.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 1,
-      "translations": {
-        "es": {
-          "title": "Condensa vectores con .reduce",
-          "description": [
-            "El método <code>reduce</code> de un vector, se utiliza para iterar a través del vector y condensarlo en un valor.",
-            "Para usar <code>reduce</code> tu le pasas una función de devolución de llamada cuyos argumentos sean un acumulador (en este caso, <code>valorPrevio</code>) y el valor actual (<code>valorActual</code>). ",
-            "<code>reduce</code> tiene un argumento opcional que puede usarse para asignar un valor inicial al acumulador. Si no se especifica ningún valor inicial, este será el primer elemento del vector y <code>valorActual</code> comenzará en el segundo elemento del vector. ",
-            "He aquí un ejemplo de<code>reduce</code> cuando se utiliza para restar todos los valores de una matriz:",
-            "<code>var singleVal = array.reduce(function(valorAnterior, valorActual) {</code>",
-            "<code>&nbsp;&nbsp;return valorAnterior - valorActual;</code>",
-            "<code>}, 0);</code>",
-            "Usa el método <code>reduce</code> para sumar todos los valores en <code>array</code> y asignarlo a <code>singleVal</code>."
-          ]
-        }
-      }
-    },
-    {
-      "id": "cf1111c1c15feddfaeb9bdef",
-      "title": "Filter Arrays with .filter",
-      "description": [
-        "The <code>filter</code> method creates a new array from an existing one by iterating over it and returning only the elements where a given condition returns true.",
-        "<code>filter</code> is passed a callback function which takes the current value (we've called that <code>val</code>) as an argument.",
-        "Any array element for which the callback returns true will be kept and elements that return false will be filtered out.",
-        "The following code is an example of using <code>filter</code> to remove array elements that are equal to five:",
-        "Note: We omit the second and third arguments since we only need the value",
-        "<blockquote>array = array.filter(function(val) {<br>&nbsp;&nbsp;return val !== 5;<br>});</blockquote>",
-        "Use <code>filter</code> to create a new array with all the values from <code>oldArray</code> which are less than 6. The <code>oldArray</code> should not change."
-      ],
-      "challengeSeed": [
-        "var oldArray = [1,2,3,4,5,6,7,8,9,10];",
-        "",
-        "// Only change code below this line.",
-        "",
-        "var newArray = oldArray;"
-      ],
-      "tail": [
-        "(function() {return newArray;})();"
-      ],
-      "solutions": [
-        "var oldArray = [1,2,3,4,5,6,7,8,9,10];\nvar newArray = oldArray.filter(function(val) {\n  return val < 6;\n});"
-      ],
-      "tests": [
-        "assert.deepEqual(oldArray, [1,2,3,4,5,6,7,8,9,10], 'message: You should not change the original array.');",
-        "assert.deepEqual(newArray, [1,2,3,4,5], 'message: <code>newArray</code> should be an array containing only the values from <code>oldArray</code> that are less than 6.');",
-        "assert(editor.getValue().match(/array\\.filter\\s*\\(/gi), 'message: You should be using the <code>filter</code> method to create a new array.');",
-        "assert(editor.getValue().match(/\\[1\\,2\\,3\\,4\\,5\\,6\\,7\\,8\\,9\\,10\\]/gi), 'message: You should only be using <code>filter</code> to make the new array.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 1,
-      "translations": {
-        "es": {
-          "title": "Filtrar vectores con .filter",
-          "description": [
-            "El método <code>filter</code> se utiliza para iterar a través de un vector y filtrar los elementos que hagan falsa un condición determinada.",
-            "<code>filter</code> recibe una función de devolución de llamada que a su vez recibe como argumento el valor actual (que hemos llamado <code>val</code>).",
-            "Cualquier elemento del vector para el cual la función de devolución de llamada retorne <code>true</code> se mantendrá y los elementos que devuelven <code>false</code> serán filtrados.",
-            "El código siguiente es un ejemplo del uso de <code>filter</code> para eliminar los elementos de un vector que son iguales a cinco:",
-            "Nota: Omitimos el segundo y tercer argumentos ya que sólo necesitamos el valor",
-            "<code>array = array.filter(function(val) {</code>",
-            "<code>&nbsp;&nbsp;return val !== 5;</code>",
-            "<code>});</code>",
-            "Usa <code>filter</code> para crear un nuevo vector con todos los valores de <code>oldArray</code> que son menores a 6. <br><code>oldArray</code> no debe cambiar."
-          ]
-        }
-      }
-    },
-    {
-      "id": "cf1111c1c16feddfaeb1bdef",
-      "title": "Sort Arrays with .sort",
-      "description": [
-        "You can use the method <code>sort</code> to easily sort the values in an array alphabetically or numerically.",
-        "Unlike the previous array methods we have been looking at, <code>sort</code> actually alters the array in place. However, it also returns this sorted array.",
-        "<code>sort</code> can be passed a compare function as a callback. The compare function should return a negative number if <code>a</code> should be before <code>b</code>, a positive number if <code>a</code> should be after <code>b</code>, or <code>0</code> if they are equal.",
-        "If no compare (callback) function is passed in, it will convert the values to strings and sort alphabetically.",
-        "Here is an example of using sort with a compare function that will sort the elements from smallest to largest number:",
-        "<blockquote>var array = [1, 12, 21, 2];<br>array.sort(function(a, b) {<br>&nbsp;&nbsp;return a - b;<br>});</blockquote>",
-        "Use <code>sort</code> to sort <code>array</code> from largest to smallest.",
-        "Further explanation on the <code>.sort()</code> method can be found <a href='https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort' target='_blank'>here</a>."
-      ],
-      "challengeSeed": [
-        "var array = [1, 12, 21, 2];",
-        "",
-        "// Only change code below this line.",
-        "",
-        "array.sort();"
-      ],
-      "tail": [
-        "(function() {return array;})();"
-      ],
-      "solutions": [
-        "var array = [1, 12, 21, 2];\narray.sort(function(a, b) {\n  return b - a;\n});"
-      ],
-      "tests": [
-        "assert.deepEqual(array, [21, 12, 2, 1], 'message: You should have sorted the array from largest to smallest.');",
-        "assert(editor.getValue().match(/\\[1,\\s*12,\\s*21,\\s*2\\];/gi), 'message: You should only be using <code>sort</code> to modify the array.');",
-        "assert(editor.getValue().match(/\\.sort\\s*\\(/g), 'message: You should have made use of the <code>sort</code> method.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 1,
-      "translations": {
-        "es": {
-          "title": "Ordena vectores con .sort",
-          "description": [
-            "Puedes utilizar el método <code>sort</code> para ordenar alfabética o numéricamente los valores de un vector.",
-            "A diferencia de los métodos de vector que hemos visto,<code>sort</code>en realidad altera el vector en su lugar. Sin embargo, también devuelve este vector ordenado. ",
-            "<code>sort</code> puede recibir como parámetro una función de devolución de llamada para comparar. Sin no se provee una función de comparación, convertirá los valores a cadenas y los ordenará alfabéticamente. ",
-            "He aquí un ejemplo del uso de <code>sort</code> con una función de comparación que ordena los elementos de menor a mayor:",
-            "<code>var array = [1, 12, 21, 2];</code>",
-            "<code>array.sort(function(a, b) {</code>",
-            "<code>&nbsp;&nbsp;return a - b;</code>",
-            "<code>});</code>",
-            "Usa <code>sort</code> para ordenar<code>array</code> de mayor a menor."
-          ]
-        }
-      }
-    },
-    {
-      "id": "cf1111c1c16feddfaeb2bdef",
-      "title": "Reverse Arrays with .reverse",
-      "description": [
-        "You can use the <code>reverse</code> method to reverse the elements of an array.",
-        "<code>reverse</code> is another array method that alters the array in place, but it also returns the reversed array.",
-        "<blockquote>var myArray = [1, 2, 3];<br>myArray.reverse();</blockquote>",
-        "<em>returns [3, 2, 1]</em>",
-        "Use <code>reverse</code> to reverse the <code>array</code> variable and assign it to <code>newArray</code>."
-      ],
-      "challengeSeed": [
-        "var array = [1,2,3,4,5,6,7];",
-        "var newArray = [];",
-        "",
-        "// Only change code below this line.",
-        "",
-        "newArray = array;"
-      ],
-      "tail": [
-        "(function() {return newArray;})();"
-      ],
-      "solutions": [
-        "var array = [1,2,3,4,5,6,7];\nvar newArray = [];\nnewArray = array.reverse();"
-      ],
-      "tests": [
-        "assert.deepEqual(newArray, [7,6,5,4,3,2,1], 'message: You should reverse the array.');",
-        "assert(editor.getValue().match(/\\.reverse\\s*\\(\\)/gi), 'message: You should use the <code>reverse</code> method.');",
-        "assert(editor.getValue().match(/\\[1\\,2\\,3\\,4\\,5\\,6\\,7/gi), 'message: You should only be using <code>reverse</code> to modify <code>array</code>.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 1,
-      "translations": {
-        "es": {
-          "title": "Invierte vectores con .reverse",
-          "description": [
-            "Puedes utilizar el método <code>reverse</code> para invertir los elementos en un vector.",
-            "<code>reverse</code> es otro método de vector que altera el vector mismo, y también devuelve el vector invertido.",
-            "<code>var miVector = [1, 2, 3];</code>",
-            "<code>miVector.reverse();</code>",
-            "<em>devuelve [3, 2, 1]</em>",
-            "Usa <code>reverse</code> para invertir la variable <code>array</code> y asignarla a <code>newArray</code>."
-          ]
-        }
-      }
-    },
-    {
-      "id": "cf1111c1c16feddfaeb3bdef",
-      "title": "Concatenate Arrays with .concat",
-      "description": [
-        "<code>concat</code> can be used to merge the contents of two or more arrays into one.",
-        "<code>concat</code> takes an array as an argument and returns a new array with the elements of this array concatenated onto the end.",
-        "Here are examples of <code>concat</code> being used to concatenate arrays:",
-        "Example 1: <code>otherArray</code> onto the end of <code>oldArray</code>:",
-        "<blockquote>newArray = oldArray.concat(otherArray);</blockquote>",
-        "Example 2: <code>newArray</code> with all the elements of <code>arr1</code>, <code>arr2</code>, and <code>arr3</code>:",
-        "<blockquote>newArray = arr1.concat(arr2, arr3);</blockquote>",
-        "Use <code>.concat()</code> to concatenate <code>concatMe</code> onto the end of <code>oldArray</code> and assign it to <code>newArray</code>."
-      ],
-      "challengeSeed": [
-        "var oldArray = [1,2,3];",
-        "var newArray = [];",
-        "",
-        "var concatMe = [4,5,6];",
-        "",
-        "// Only change code below this line.",
-        "",
-        "newArray = oldArray;"
-      ],
-      "tail": [
-        "(function() {return newArray;})();"
-      ],
-      "solutions": [
-        "var oldArray = [1,2,3];\nvar newArray = [];\nvar concatMe = [4,5,6];\nnewArray = oldArray.concat(concatMe);"
-      ],
-      "tests": [
-        "assert.deepEqual(newArray, [1,2,3,4,5,6], 'message: You should concatenate the two arrays together.');",
-        "assert(editor.getValue().match(/\\.concat\\s*\\(/gi), 'message: You should be using the <code>concat</code> method to merge the two arrays.');",
-        "assert(editor.getValue().match(/\\[1\\,2\\,3\\]/gi) && editor.getValue().match(/\\[4\\,5\\,6\\]/gi), 'message: You should only be using <code>concat</code> to modify the arrays.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 1,
-      "translations": {
-        "es": {
-          "title": "Concatena vectores con .concat",
-          "description": [
-            "<code>concat</code> se puede utilizar para combinar el contenido de dos vectores en uno solo.",
-            "<code>concat</code> recibe un vector como argumento y devuelve un nuevo vector con los elementos del vector que recibe concatenados al final.",
-            "He aquí un ejemplo de <code>concat</code> cuando se usa para concatenar <code>otroVector</code> al final de <code>vectorAntiguo</code>:",
-            "<code>vectorNuevo = vectorAntiguo.concat(otroVector);</code>",
-            "Usa <code>.concat ()</code> para concatenar <code>concatMe</code> al final de <code>oldArray</code> y asigna el vector resultante a <code>newArray</code>."
-          ]
-        }
-      }
-    },
-    {
-      "id": "cf1111c1c16feddfaeb4bdef",
-      "title": "Split Strings with .split",
-      "description": [
-        "You can use the <code>split</code> method to split a string into an array.",
-        "<code>split</code> uses the argument you pass in as a delimiter to determine which points the string should be split at.",
-        "Here is an example of <code>split</code> being used to split a string at every <code>s</code> character:",
-        "<code>var array = string.split('s');</code>",
-        "Use <code>split</code> to create an array of words from <code>string</code> and assign it to <code>array</code>."
-      ],
-      "challengeSeed": [
-        "var string = \"Split me into an array\";",
-        "var array = [];",
-        "",
-        "// Only change code below this line.",
-        "",
-        "array = string;"
-      ],
-      "tail": [
-        "(function() {return array;})();"
-      ],
-      "solutions": [
-        "var string = \"Split me into an array\";\nvar array = [];\narray = string.split(\" \");"
-      ],
-      "tests": [
-        "assert(/\\.split\\(/gi, 'message: You should use the <code>split</code> method on the string.');",
-        "assert(typeof array === 'object' && array.length === 5, 'message: You should split the string by its spaces.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 1,
-      "translations": {
-        "es": {
-          "title": "Divide cadenas con .split",
-          "description": [
-            "Puedes utilizar el método <code>split</code> para dividir una cadena en un vector.",
-            "<code>split</code> utiliza el argumento que recibe como delimitador para determinar en qué puntos debe dividir la cadena.",
-            "He aquí un ejemplo del uso de <code>split</code> para dividir una cadena en cada caracter <code>s</code>:",
-            "<code>var vector = string.split('s');</code>",
-            "Usa <code>split</code> para crear un vector con las palabras de una <code>cadena</code> y asígnalo a la variable <code>array</code>."
-          ]
-        }
-      }
-    },
-    {
-      "id": "cf1111c1c16feddfaeb5bdef",
-      "title": "Join Strings with .join",
-      "description": [
-        "We can use the <code>join</code> method to join each element of an array into a string separated by whatever delimiter you provide as an argument.",
-        "The following is an example of using <code>join</code> to join all of the elements of an array into a string with all the elements separated by word <code>and</code>:",
-        "<blockquote>var veggies = [\"Celery\", \"Radish\", \"Carrot\", \"Potato\"];<br>var salad = veggies.join(\" and \");<br>console.log(salad); // \"Celery and Radish and Carrot and Potato\" </blockquote>",
-        "Use the <code>join</code> method to create a string from <code>joinMe</code> with spaces in between each element and assign it to <code>joinedString</code>."
-      ],
-      "challengeSeed": [
-        "var joinMe = [\"Split\",\"me\",\"into\",\"an\",\"array\"];",
-        "var joinedString = '';",
-        "",
-        "// Only change code below this line.",
-        "",
-        "joinedString = joinMe;"
-      ],
-      "tail": [
-        "(function() {return joinedString;})();"
-      ],
-      "solutions": [
-        "var joinMe = [\"Split\",\"me\",\"into\",\"an\",\"array\"];\nvar joinedString = '';\njoinedString = joinMe.join(\" \");"
-      ],
-      "tests": [
-        "assert(typeof joinedString === 'string' && joinedString === \"Split me into an array\", 'message: You should join the elements of the array with spaces.');",
-        "assert(/\\.join\\(/gi, 'message: You should use of the <code>join</code> method on the array.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 1,
-      "translations": {
-        "es": {
-          "title": "Une cadenas con .join",
-          "description": [
-            "Podemos usar el método <code>join</code> para unir los elementos de un vector en una cadena, separándolos con el delimitador que proporciones como argumento.",
-            "El siguiente es un ejemplo del uso de <code>join</code> para unir todos los elementos de un vector en una cadena con todos los elementos separados entre si por palabra` Na`: ",
-            "<code>var uneme = [\"Na \", \"Na \", \"Na \", \"Na \", \"Batman!\"];</code>",
-            "<code>var cadenaUnida = uneme.join(\"Na \");</code>",
-            "<code>console.log(cadenaUnida);</code>",
-            "Usa el método <code>join</code> para crear una cadena a partir <code>joinMe</code> con espacios entre cada par de elementos y asignarla a <code>joinedString </code>."
-          ]
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/01-responsive-web-design/applied-accessibility.json b/seed/challenges/01-responsive-web-design/applied-accessibility.json
new file mode 100644
index 00000000000000..467b9c07d531b0
--- /dev/null
+++ b/seed/challenges/01-responsive-web-design/applied-accessibility.json
@@ -0,0 +1,1522 @@
+{
+  "name": "Applied Accessibility",
+  "order": 3,
+  "time": "5 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "587d774b367417b2b2512a9b",
+      "title": "Introduction to the Applied Accessibility Challenges",
+      "description": [
+        [
+          "",
+          "",
+          "\"Accessibility\" generally means having web content and a user interface that can be understood, navigated, and interacted with by a broad audience. This includes people with visual, auditory, mobility, or cognitive disabilities.",
+          ""
+        ],
+        [
+          "",
+          "",
+          "Websites should be open and accessible to everyone, regardless of a user's abilities or resources. Some users rely on assistive technology such as a screen reader or voice recognition software. Other users may be able to navigate through a site only using a keyboard. Keeping the needs of various users in mind when developing your project can go a long way towards creating an open web.",
+          ""
+        ],
+        [
+          "",
+          "",
+          "Here are three general concepts this section will explore throughout the following challenges:<br><br><ol><br><li>have well-organized code that uses appropriate markup</li><br><li>ensure text alternatives exist for non-text and visual content</li><br><li>create an easily-navigated page that's keyboard-friendly</li><br></ol><br><br>Having accessible web content is an ongoing challenge. A great resource for your projects going forward is the W3 Consortium's Web Content Accessibility Guidelines (WCAG). They set the international standard for accessibility and provide a number of criteria you can use to check your work.",
+          ""
+        ]
+      ],
+      "releasedOn": "",
+      "challengeSeed": [],
+      "tests": [],
+      "type": "Waypoint",
+      "challengeType": 7,
+      "isRequired": false,
+      "titleEs": "",
+      "descriptionEs": [
+        []
+      ],
+      "titleFr": "",
+      "descriptionFr": [
+        []
+      ],
+      "titleDe": "",
+      "descriptionDe": [
+        []
+      ]
+    },
+    {
+      "id": "587d774c367417b2b2512a9c",
+      "title": "Add Alt Text to Images for Visually Impaired Accessibility",
+      "description": [
+        "It's likely you've seen an <code>alt</code> attribute on an <code>img</code> tag in other challenges. <code>Alt</code> text describes the content of the image and provides a text-alternative. This helps in case the image fails to load or can't be seen by a user. It's also used by search engines to understand what an image contains to include it in search results. Here's an example:",
+        "<code>&lt;img src=&quot;importantLogo.jpeg&quot; alt=&quot;Company logo&quot;&gt;</code>",
+        "People with visual impairments rely on screen readers to convert web content to an audio interface. They won't get information if it's only presented visually. For images, screen readers can access the <code>alt</code> attribute and read its contents to deliver key information.",
+        "Good <code>alt</code> text is short but descriptive, and meant to briefly convey the meaning of the image. You should always include an <code>alt</code> attribute on your image. Per HTML5 specification, this is now considered mandatory.",
+        "<h4>Instructions</h4>",
+        "Camper Cat happens to be both a coding ninja and an actual ninja, and is building a website to share his knowledge. The profile picture he wants to use shows his skills, and should be appreciated by all site visitors. Add an <code>alt</code> attribute in the <code>img</code> tag, that explains Camper Cat is doing karate. (The image <code>src</code> doesn't link to an actual file, so you should see the <code>alt</code> text in the display.)"
+      ],
+      "challengeSeed": [
+        "<img src=\"doingKarateWow.jpeg\">"
+      ],
+      "tests": [
+        "assert($('img').attr('alt'), 'message: Your <code>img</code> tag should have an <code>alt</code> attribute, and it should not be empty.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d774c367417b2b2512a9d",
+      "title": "Know When Alt Text Should be Left Blank",
+      "description": [
+        "In the last challenge, you learned that including an <code>alt</code> attribute on img tags is mandatory. However, sometimes images are grouped with a caption already describing them, or are used for decoration only. In these cases <code>alt</code> text may seem redundant or unnecessary.",
+        "In situations when an image is already explained with text content, or does not add meaning to a page, the <code>img</code> still needs an <code>alt</code> attribute, but it can be set to an empty string. Here's an example:",
+        "<code>&lt;img src=&quot;visualDecoration.jpeg&quot; alt=&quot;&quot;&gt;</code>",
+        "Background images usually fall under the 'decorative' label as well. However, they are typically applied with CSS rules, and therefore not part of the markup screen readers process.",
+        "<strong>Note</strong><br>For images with a caption, you may still want to include <code>alt</code> text, since it helps search engines catalog the content of the image.",
+        "<h4>Instructions</h4>",
+        "Camper Cat has coded a skeleton page for the blog part of his website. He's planning to add a visual break between his two articles with a decorative image of a samurai sword. Add an <code>alt</code> attribute to the <code>img</code> tag and set it to an empty string. (Note that the image <code>src</code> doesn't link to an actual file - don't worry that there are no swords showing in the display.)"
+      ],
+      "challengeSeed": [
+        "<h1>Deep Thoughts with Master Camper Cat</h1>",
+        "<article>",
+        "  <h2>Defeating your Foe: the Red Dot is Ours!</h2>",
+        "  <p>To Come...</p>",
+        "</article>",
+        "",
+        "<img src=\"samuraiSwords.jpeg\">",
+        "",
+        "<article>",
+        "  <h2>Is Chuck Norris a Cat Person?</h2>",
+        "  <p>To Come...</p>",
+        "</article>"
+      ],
+      "tests": [
+        "assert(!($('img').attr('alt') == undefined), 'message: Your <code>img</code> tag should have an <code>alt</code> attribute.');",
+        "assert($('img').attr('alt') == '', 'message: The <code>alt</code> attribute should be set to an empty string.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d774d367417b2b2512a9e",
+      "title": "Use Headings to Show Hierarchical Relationships of Content",
+      "description": [
+        "Headings (<code>h1</code> through <code>h6</code> elements) are workhorse tags that help provide structure and labeling to your content. Screen readers can be set to read only the headings on a page so the user gets a summary. This means it is important for the heading tags in your markup to have semantic meaning and relate to each other, not be picked merely for their size values.",
+        "<em>Semantic meaning</em> means that the tag you use around content indicates the type of information it contains.",
+        "If you were writing a paper with an introduction, a body, and a conclusion, it wouldn't make much sense to put the conclusion as a subsection of the body in your outline. It should be its own section. Similarly, the heading tags in a webpage need to go in order and indicate the hierarchical relationships of your content.",
+        "Headings with equal (or higher) rank start new implied sections, headings with lower rank start subsections of the previous one.",
+        "As an example, a page with an <code>h2</code> element followed by several subsections labeled with <code>h4</code> tags would confuse a screen reader user. With six choices, it's tempting to use a tag because it looks better in a browser, but you can use CSS to edit the relative sizing.",
+        "One final point, each page should always have one (and only one) <code>h1</code> element, which is the main subject of your content. This and the other headings are used in part by search engines to understand the topic of the page.",
+        "<h4>Instructions</h4>",
+        "Camper Cat wants a page on his site dedicated to becoming a ninja. Help him fix the headings so his markup gives semantic meaning to the content, and shows the proper parent-child relationships of his sections. Change all the <code>h5</code> tags to the proper heading level to indicate they are subsections of the <code>h2</code> ones."
+      ],
+      "challengeSeed": [
+        "<h1>How to Become a Ninja</h1>",
+        "<main>",
+        "  <h2>Learn the Art of Moving Stealthily</h2>",
+        "  <h5>How to Hide in Plain Sight</h5>",
+        "  <h5>How to Climb a Wall</h5>",
+        "",
+        "  <h2>Learn the Art of Battle</h2>",
+        "  <h5>How to Strengthen your Body</h5>",
+        "  <h5>How to Fight like a Ninja</h5>",
+        "",
+        "  <h2>Learn the Art of Living with Honor</h2>",
+        "  <h5>How to Breathe Properly</h5>",
+        "  <h5>How to Simplify your Life</h5>",
+        "</main>"
+      ],
+      "tests": [
+        "assert($('h3').length === 6, 'message: Your code should have six <code>h3</code> tags.');",
+        "assert($('h5').length === 0, 'message: Your code should not have any <code>h5</code> tags.');"
+      ],
+      "solutions": [],
+      "hints": [
+        "All the h5 tags are siblings, and should be changed to the same new heading level."
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d774e367417b2b2512a9f",
+      "title": "Jump Straight to the Content Using the Main Element",
+      "description": [
+        "HTML5 introduced a number of new elements that give developers more options while also incorporating accessibility features. These tags include <code>main</code>, <code>header</code>, <code>footer</code>, <code>nav</code>, <code>article</code>, and <code>section</code>, among others.",
+        "By default, a browser renders these elements similarly to the humble <code>div</code>. However, using them where appropriate gives additional meaning in your markup. The tag name alone can indicate the type of information it contains, which adds semantic meaning to that content. Assistive technologies can access this information to provide better page summary or navigation options to their users.",
+        "The <code>main</code> element is used to wrap (you guessed it) the main content, and there should be only one per page. It's meant to surround the information that's related to the central topic of your page. It's not meant to include items that repeat across pages, like navigation links or banners.",
+        "The <code>main</code> tag also has an embedded landmark feature that assistive technology can use to quickly navigate to the main content. If you've ever seen a \"Jump to Main Content\" link at the top of a page, using a main tag automatically gives assistive devices that functionality.",
+        "<h4>Instructions</h4>",
+        "Camper Cat has some big ideas for his ninja weapons page. Help him set up his markup by adding opening and closing <code>main</code> tags between the <code>header</code> and <code>footer</code> (covered in other challenges). Keep the <code>main</code> tags empty for now."
+      ],
+      "challengeSeed": [
+        "<header>",
+        "  <h1>Weapons of the Ninja</h1>",
+        "</header>",
+        "",
+        "",
+        "",
+        "<footer></footer>"
+      ],
+      "tests": [
+        "assert($('main').length == 1, 'message: Your code should have one <code>main</code> tag.');",
+        "assert(code.match(/<\\/header>\\s*?<main>\\s*?<\\/main>/gi), 'message: The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d774e367417b2b2512aa0",
+      "title": "Wrap Content in the Article Element",
+      "description": [
+        "<code>Article</code> is another one of the new HTML5 elements that adds semantic meaning to your markup. <code>Article</code> is a sectioning element, and is used to wrap independent, self-contained content. The tag works well with blog entries, forum posts, or news articles.",
+        "Determining whether content can stand alone is usually a judgement call, but there are a couple simple tests you can use. Ask yourself if you removed all surrounding context, would that content still make sense? Similarly for text, would the content hold up if it were in an RSS feed?",
+        "Remember that folks using assistive technologies rely on organized, semantically meaningful markup to better understand your work.",
+        "<strong>Note about <code>section</code> and <code>div</code></strong><br>The <code>section</code> element is also new with HTML5, and has a slightly different semantic meaning than <code>article</code>. An <code>articles</code> is for standalone content, and a <code>section</code> is for grouping thematically related content. They can be used within each other, as needed. For example, if a book is the <code>article</code>, then each chapter is a <code>section</code>. When there's no relationship between groups of content, then use a <code>div</code>.",
+        "<blockquote>&lt;div&gt; - blocks content<br>&lt;section&gt; - blocks related content<br>&lt;article&gt; - blocks independent, self-contained content<br></blockquote>",
+        "<h4>Instructions</h4>",
+        "Camper Cat used <code>article</code> tags to wrap the posts on his blog page, but he forgot to use them around the top one. Change the <code>div</code> tag to use an <code>article</code> tag instead."
+      ],
+      "challengeSeed": [
+        "<h1>Deep Thoughts with Master Camper Cat</h1>",
+        "<main>",
+        "  <div>",
+        "    <h2>The Garfield Files: Lasagna as Training Fuel?</h2>",
+        "    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>",
+        "  </div>",
+        "",
+        "  <img src=\"samuraiSwords.jpeg\" alt=\"\">",
+        "",
+        "  <article>",
+        "    <h2>Defeating your Foe: the Red Dot is Ours!</h2>",
+        "    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...</p>",
+        "  </article>",
+        "",
+        "  <img src=\"samuraiSwords.jpeg\" alt=\"\">",
+        "",
+        "  <article>",
+        "    <h2>Is Chuck Norris a Cat Person?</h2>",
+        "    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>",
+        "  </article>",
+        "</main>"
+      ],
+      "tests": [
+        "assert($('article').length == 3, 'message: Your code should have three <code>article</code> tags.');",
+        "assert($('div').length == 0, 'message: Your code should not have any <code>div</code> tags.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7787367417b2b2512aa1",
+      "title": "Make Screen Reader Navigation Easier with the Header Landmark",
+      "description": [
+        "The next HTML5 element that adds semantic meaning and improves accessibility is the <code>header</code> tag. It's used to wrap introductory information or navigation links for its parent tag, and works well around content that's repeated at the top on multiple pages.",
+        "<code>Header</code> shares the embedded landmark feature you saw with <code>main</code>, allowing assistive technologies to quickly navigate to that content.",
+        "<strong>Note</strong><br><code>Header</code> is meant for use in the <code>body</code> tag of your HTML document. This is different than the <code>head</code> element, which contains the page's title, meta information, etc.",
+        "<h4>Instructions</h4>",
+        "Camper Cat is writing some great articles about ninja training, and wants to add a page for them to his site. Change the top <code>div</code> that currently contains the <code>h1</code> to a <code>header</code> tag instead."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "",
+        "  <div>",
+        "    <h1>Training with Camper Cat</h1>",
+        "  </div>",
+        "",
+        "",
+        "  <main>",
+        "    <section id=\"stealth\">",
+        "      <h2>Stealth &amp; Agility Training</h2>",
+        "      <article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>",
+        "      <article><h3>No training is NP-complete without parkour</h3></article>",
+        "    </section>",
+        "    <section id=\"combat\">",
+        "      <h2>Combat Training</h2>",
+        "      <article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>",
+        "      <article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>",
+        "    </section>",
+        "    <section id=\"weapons\">",
+        "      <h2>Weapons Training</h2>",
+        "      <article><h3>Swords: the best tool to literally divide and conquer</h3></article>",
+        "      <article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>",
+        "    </section>",
+        "  </main>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('header').length == 1, 'message: Your code should have one <code>header</code> tag.');",
+        "assert($('header').children('h1').length == 1, 'message: Your <code>header</code> tags should wrap around the <code>h1</code>.');",
+        "assert($('div').length == 0, 'message: Your code should not have any <code>div</code> tags.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7788367417b2b2512aa2",
+      "title": "Make Screen Reader Navigation Easier with the Nav Landmark",
+      "description": [
+        "The <code>nav</code> element is another HTML5 item with the embedded landmark feature for easy screen reader navigation. This tag is meant to wrap around the main navigation links in your page.",
+        "If there are repeated site links at the bottom of the page, it isn't necessary to markup those with a <code>nav</code> tag as well. Using a <code>footer</code> (covered in the next challenge) is sufficient.",
+        "<h4>Instructions</h4>",
+        "Camper Cat included navigation links at the top of his training page, but wrapped them in a <code>div</code>. Change the <code>div</code> to a <code>nav</code> tag to improve the accessibility on his page."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <header>",
+        "    <h1>Training with Camper Cat</h1>",
+        "",
+        "    <div>",
+        "      <ul>",
+        "        <li><a href=\"#stealth\">Stealth &amp; Agility</a></li>",
+        "        <li><a href=\"#combat\">Combat</a></li>",
+        "        <li><a href=\"#weapons\">Weapons</a></li>",
+        "      </ul>",
+        "    </div>",
+        "",
+        "  </header>",
+        "  <main>",
+        "    <section id=\"stealth\">",
+        "      <h2>Stealth &amp; Agility Training</h2>",
+        "      <article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>",
+        "      <article><h3>No training is NP-complete without parkour</h3></article>",
+        "    </section>",
+        "    <section id=\"combat\">",
+        "      <h2>Combat Training</h2>",
+        "      <article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>",
+        "      <article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>",
+        "    </section>",
+        "    <section id=\"weapons\">",
+        "      <h2>Weapons Training</h2>",
+        "      <article><h3>Swords: the best tool to literally divide and conquer</h3></article>",
+        "      <article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>",
+        "    </section>",
+        "  </main>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('nav').length == 1, 'message: Your code should have one <code>nav</code> tag.');",
+        "assert($('nav').children('ul').length == 1, 'message: Your <code>nav</code> tags should wrap around the <code>ul</code> and its list items.');",
+        "assert($('div').length == 0, 'message: Your code should not have any <code>div</code> tags.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7788367417b2b2512aa3",
+      "title": "Make Screen Reader Navigation Easier with the Footer Landmark",
+      "description": [
+        "Similar to <code>header</code> and <code>nav</code>, the <code>footer</code> element has a built-in landmark feature that allows assistive devices to quickly navigate to it. It's primarily used to contain copyright information or links to related documents that usually sit at the bottom of a page.",
+        "<h4>Instructions</h4>",
+        "Camper Cat's training page is making good progress. Change the <code>div</code> he used to wrap his copyright information at the bottom of the page to a <code>footer</code> element."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <header>",
+        "    <h1>Training</h1>",
+        "    <nav>",
+        "      <ul>",
+        "        <li><a href=\"#stealth\">Stealth &amp; Agility</a></li>",
+        "        <li><a href=\"#combat\">Combat</a></li>",
+        "        <li><a href=\"#weapons\">Weapons</a></li>",
+        "      </ul>",
+        "    </nav>",
+        "  </header>",
+        "  <main>",
+        "    <section id=\"stealth\">",
+        "      <h2>Stealth &amp; Agility Training</h2>",
+        "      <article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>",
+        "      <article><h3>No training is NP-complete without parkour</h3></article>",
+        "    </section>",
+        "    <section id=\"combat\">",
+        "      <h2>Combat Training</h2>",
+        "      <article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>",
+        "      <article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>",
+        "    </section>",
+        "    <section id=\"weapons\">",
+        "      <h2>Weapons Training</h2>",
+        "      <article><h3>Swords: the best tool to literally divide and conquer</h3></article>",
+        "      <article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>",
+        "    </section>",
+        "  </main>",
+        "",
+        "",
+        "  <div>&copy; 2016 Camper Cat</div>",
+        "",
+        "",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('footer').length == 1, 'message: Your code should have one <code>footer</code> tag.');",
+        "assert($('div').length == 0, 'message: Your code should not have any <code>div</code> tags.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7789367417b2b2512aa4",
+      "title": "Improve Accessibility of Audio Content with the Audio Element",
+      "description": [
+        "HTML5's <code>audio</code> element gives semantic meaning when it wraps sound or audio stream content in your markup. Audio content also needs a text alternative to be accessible to the deaf or hard of hearing. This can be done with nearby text on the page or a link to a transcript.",
+        "The <code>audio</code> tag supports the <code>controls</code> attribute. This shows the browser default play, pause, and other controls, and supports keyboard functionality. This is a boolean attribute, meaning it doesn't need a value, it's presence on the tag turns the setting on.",
+        "Here's an example:",
+        "<blockquote>&lt;audio id=&quot;meowClip&quot; controls&gt;<br>    &lt;source src=&quot;audio/meow.mp3&quot; type=&quot;audio/mpeg&quot; /&gt;<br>    &lt;source src=&quot;audio/meow.ogg&quot; type=&quot;audio/ogg&quot; /&gt;<br>&lt;/audio&gt;<br></blockquote>",
+        "<strong>Note</strong><br>Multimedia content usually has both visual and auditory components. It needs synchronized captions and a transcript so users with visual and/or auditory impairments can access it. Generally, a web developer is not responsible for creating the captions or transcript, but needs to know to include them.",
+        "<h4>Instructions</h4>",
+        "Time to take a break from Camper Cat and meet fellow camper Zersiax (@zersiax), a champion of accessibility and a screen reader user. To hear a clip of his screen reader in action, add an <code>audio</code> element after the <code>p</code>. Include the <code>controls</code> attribute. Then place a <code>source</code> tag inside the <code>audio</code> tags with the <code>src</code> attribute set to \"https://s3.amazonaws.com/freecodecamp/screen-reader.mp3\" and <code>type</code> attribute set to \"audio/mpeg\"."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <header>",
+        "    <h1>Real Coding Ninjas</h1>",
+        "  </header>",
+        "  <main>",
+        "    <p>A sound clip of Zersiax's screen reader in action.</p>",
+        "    ",
+        "    ",
+        "    ",
+        "  </main>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('audio').length === 1, 'message: Your code should have one <code>audio</code> tag.');",
+        "assert($('audio').attr('controls'), 'message: The <code>audio</code> tag should have the <code>controls</code> attribute.');",
+        "assert($('source').length === 1, 'message: Your code should have one <code>source</code> tag.');",
+        "assert($('audio').children('source').length === 1, 'message: Your <code>source</code> tag should be inside the <code>audio</code> tags.');",
+        "assert($('source').attr('src') === 'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3', 'message: The value for the <code>src</code> attribute on the <code>source</code> tag should match the link in the instructions exactly.');",
+        "assert($('source').attr('type') === 'audio/mpeg', 'message: Your code should include a <code>type</code> attribute on the <code>source</code> tag with a value of audio/mpeg.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d778a367417b2b2512aa5",
+      "title": "Improve Chart Accessibility with the Figure Element",
+      "description": [
+        "HTML5 introduced the <code>figure</code> element, along with the related <code>figcaption</code>. Used together, these items wrap a visual representation (like an image, diagram, or chart) along with its caption. This gives a two-fold accessibility boost by both semantically grouping related content, and providing a text alternative that explains the <code>figure</code>.",
+        "For data visualizations like charts, the caption can be used to briefly note the trends or conclusions for users with visual impairments. Another challenge covers how to move a table version of the chart's data off-screen (using CSS) for screen reader users.",
+        "Here's an example - note that the <code>figcaption</code> goes inside the <code>figure</code> tags and can be combined with other elements:",
+        "<blockquote>&lt;figure&gt;<br>  &lt;img src=&quot;roundhouseDestruction.jpeg&quot; alt=&quot;Photo of Camper Cat executing a roundhouse kick&quot;&gt;<br>  &lt;br&gt;<br>  &lt;figcaption&gt;<br>    Master Camper Cat demonstrates proper form of a roundhouse kick.<br>  &lt;/figcaption&gt;<br>&lt;/figure&gt;<br></blockquote>",
+        "<h4>Instructions</h4>",
+        "Camper Cat is hard at work creating a stacked bar chart showing the amount of time per week to spend training in stealth, combat, and weapons. Help him structure his page better by changing the <code>div</code> tag he used to a <code>figure</code> tag, and the <code>p</code> tag that surrounds the caption to a <code>figcaption</code> tag."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <header>",
+        "    <h1>Training</h1>",
+        "    <nav>",
+        "      <ul>",
+        "        <li><a href=\"#stealth\">Stealth &amp; Agility</a></li>",
+        "        <li><a href=\"#combat\">Combat</a></li>",
+        "        <li><a href=\"#weapons\">Weapons</a></li>",
+        "      </ul>",
+        "    </nav>",
+        "  </header>",
+        "  <main>",
+        "    <section>",
+        "      ",
+        "      <!-- Add your code below this line -->",
+        "      <div>",
+        "        <!-- Stacked bar chart will go here -->",
+        "        <br>",
+        "        <p>Breakdown per week of time to spend training in stealth, combat, and weapons.</p>",
+        "      </div>",
+        "      <!-- Add your code above this line -->",
+        "      ",
+        "    </section>",
+        "    <section id=\"stealth\">",
+        "      <h2>Stealth &amp; Agility Training</h2>",
+        "      <article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>",
+        "      <article><h3>No training is NP-complete without parkour</h3></article>",
+        "    </section>",
+        "    <section id=\"combat\">",
+        "      <h2>Combat Training</h2>",
+        "      <article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>",
+        "      <article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>",
+        "    </section>",
+        "    <section id=\"weapons\">",
+        "      <h2>Weapons Training</h2>",
+        "      <article><h3>Swords: the best tool to literally divide and conquer</h3></article>",
+        "      <article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>",
+        "    </section>",
+        "  </main>",
+        "  <footer>&copy; 2016 Camper Cat</footer>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('figure').length == 1, 'message: Your code should have one <code>figure</code> tag.');",
+        "assert($('figcaption').length == 1, 'message: Your code should have one <code>figcaption</code> tag.');",
+        "assert($('div').length == 0, 'message: Your code should not have any <code>div</code> tags.');",
+        "assert($('p').length == 0, 'message: Your code should not have any <code>p</code> tags.');",
+        "assert($('figure').children('figcaption').length == 1, 'message: The <code>figcaption</code> should be a child of the <code>figure</code> tag.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d778a367417b2b2512aa6",
+      "title": "Improve Form Field Accessibility with the Label Element",
+      "description": [
+        "Improving accessibility with semantic HTML markup applies to using both appropriate tag names as well as attributes. The next several challenges cover some important scenarios using attributes in forms.",
+        "The <code>label</code> tag wraps the text for a specific form control item, usually the name or label for a choice. This ties meaning to the item and makes the form more readable. The <code>for</code> attribute on a <code>label</code> tag explicitly associates that <code>label</code> with the form control and is used by screen readers.",
+        "The value of the <code>for</code> attribute must be the same as the value of the <code>id</code> attribute of the form control. Here's an example:",
+        "<blockquote>&lt;form&gt;<br>  &lt;label for=&quot;name&quot;&gt;Name:&lt;/label&gt;<br>  &lt;input type=&quottext&quot; id=&quot;name&quot; name=&quot;name&quot;&gt;<br>&lt;/form&gt;<br></blockquote>",
+        "<h4>Instructions</h4>",
+        "Camper Cat expects a lot of interest in his thoughtful blog posts, and wants to include an email sign up form. Add a <code>for</code> attribute on the email <code>label</code> that matches the <code>id</code> on its <code>input</code> field."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <header>",
+        "    <h1>Deep Thoughts with Master Camper Cat</h1>",
+        "  </header>",
+        "  <section>",
+        "    <form>",
+        "      <p>Sign up to receive Camper Cat's blog posts by email here!</p>",
+        "      ",
+        "      ",
+        "      <label>Email:</label>",
+        "      <input type=\"text\" id=\"email\" name=\"email\">",
+        "      ",
+        "      ",
+        "      <input type=\"submit\" name=\"submit\" value=\"Submit\">",
+        "    </form>",
+        "  </section>",
+        "  <article>",
+        "    <h2>The Garfield Files: Lasagna as Training Fuel?</h2>",
+        "    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>",
+        "  </article>",
+        "  <img src=\"samuraiSwords.jpeg\" alt=\"\">",
+        "  <article>",
+        "    <h2>Defeating your Foe: the Red Dot is Ours!</h2>",
+        "    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...</p>",
+        "  </article>",
+        "  <img src=\"samuraiSwords.jpeg\" alt=\"\">",
+        "  <article>",
+        "    <h2>Is Chuck Norris a Cat Person?</h2>",
+        "    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>",
+        "  </article>",
+        "  <footer>&copy; 2016 Camper Cat</footer>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('label').attr('for'), 'message: Your code should have a <code>for</code> attribute on the <code>label</code> tag that is not empty.');",
+        "assert($('label').attr('for') == 'email', 'message: Your <code>for</code> attribute value should match the <code>id</code> value on the email <code>input</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d778b367417b2b2512aa7",
+      "title": "Wrap Radio Buttons in a Fieldset Element for Better Accessibility",
+      "description": [
+        "The next form topic covers accessibility of radio buttons. Each choice is given a <code>label</code> with a <code>for</code> attribute tying to the <code>id</code> of the corresponding item as covered in the last challenge. Since radio buttons often come in a group where the user must choose one, there's a way to semantically show the choices are part of a set.",
+        "The <code>fieldset</code> tag surrounds the entire grouping of radio buttons to achieve this. It often uses a <code>legend</code> tag to provide a description for the grouping, which is read by screen readers for each choice in the <code>fieldset</code> element.",
+        "The <code>fieldset</code> wrapper and <code>legend</code> tag are not necessary when the choices are self-explanatory, like a gender selection. Using a <code>label</code> with the <code>for</code> attribute for each radio button is sufficient.",
+        "Here's an example:",
+        "<blockquote>&lt;form&gt;<br>  &lt;fieldset&gt;<br>    &lt;legend&gt;Choose one of these three items:&lt;/legend&gt;<br>    &lt;input id=&quot;one&quot; type=&quot;radio&quot; name=&quot;items&quot; value=&quot;one&quot;&gt;<br>    &lt;label for=&quot;one&quot;&gt;Choice One&lt;/label&gt;&lt;br&gt;<br>    &lt;input id=&quot;two&quot; type=&quot;radio&quot; name=&quot;items&quot; value=&quot;two&quot;&gt;<br>    &lt;label for=&quot;two&quot;&gt;Choice Two&lt;/label&gt;&lt;br&gt;<br>    &lt;input id=&quot;three&quot; type=&quot;radio&quot; name=&quot;items&quot; value=&quot;three&quot;&gt;<br>    &lt;label for=&quot;three&quot;&gt;Choice Three&lt;/label&gt;<br>  &lt;/fieldset&gt;<br>&lt;/form&gt;<br></blockquote>",
+        "<h4>Instructions</h4>",
+        "Camper Cat wants information about the ninja level of his users when they sign up for his email list. He's added a set of radio buttons, and learned from our last lesson to use label tags with <code>for</code> attributes for each choice. Go Camper Cat! However, his code still needs some help. Change the div tag surrounding the radio buttons to a fieldset tag, and change the p tag inside it to a legend."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <header>",
+        "    <h1>Deep Thoughts with Master Camper Cat</h1>",
+        "  </header>",
+        "  <section>",
+        "    <form>",
+        "      <p>Sign up to receive Camper Cat's blog posts by email here!</p>",
+        "      <label for=\"email\">Email:</label>",
+        "      <input type=\"text\" id=\"email\" name=\"email\">",
+        "      ",
+        "      ",
+        "      <!-- Add your code below this line -->",
+        "      <div>",
+        "        <p>What level ninja are you?</p>",
+        "        <input id=\"newbie\" type=\"radio\" name=\"levels\" value=\"newbie\">",
+        "        <label for=\"newbie\">Newbie Kitten</label><br>",
+        "        <input id=\"intermediate\" type=\"radio\" name=\"levels\" value=\"intermediate\">",
+        "        <label for=\"intermediate\">Developing Student</label><br>",
+        "        <input id=\"master\" type=\"radio\" name=\"levels\" value=\"master\">",
+        "        <label for=\"master\">Master</label>",
+        "      </div>",
+        "      <!-- Add your code above this line -->",
+        "      ",
+        "      ",
+        "      <input type=\"submit\" name=\"submit\" value=\"Submit\">",
+        "    </form>",
+        "  </section>",
+        "  <article>",
+        "    <h2>The Garfield Files: Lasagna as Training Fuel?</h2>",
+        "    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>",
+        "  </article>",
+        "  <img src=\"samuraiSwords.jpeg\" alt=\"\">",
+        "  <article>",
+        "    <h2>Defeating your Foe: the Red Dot is Ours!</h2>",
+        "    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near...</p>",
+        "  </article>",
+        "  <img src=\"samuraiSwords.jpeg\" alt=\"\">",
+        "  <article>",
+        "    <h2>Is Chuck Norris a Cat Person?</h2>",
+        "    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>",
+        "  </article>",
+        "  <footer>&copy; 2016 Camper Cat</footer>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('fieldset').length == 1, 'message: Your code should have a <code>fieldset</code> tag around the radio button set.');",
+        "assert($('legend').length == 1, 'message: Your code should have a <code>legend</code> tag around the text asking what level ninja a user is.');",
+        "assert($('div').length == 0, 'message: Your code should not have any <code>div</code> tags.');",
+        "assert($('p').length == 4, 'message: Your code should no longer have a <code>p</code> tag around the text asking what level ninja a user is.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d778b367417b2b2512aa8",
+      "title": "Add an Accessible Date Picker",
+      "description": [
+        "Forms often include the <code>input</code> field, which can be used to create several different form controls. The <code>type</code> attribute on this element indicates what kind of input will be created.",
+        "You may have noticed the <code>text</code> and <code>submit</code> input types in prior challenges, and HTML5 introduced an option to specify a <code>date</code> field. Depending on browser support, a date picker shows up in the <code>input</code> field when it's in focus, which makes filling in a form easier for all users.",
+        "For older browsers, the type will default to <code>text</code>, so it helps to show users the expected date format in the label or as placeholder text just in case.",
+        "Here's an example:",
+        "<blockquote>&lt;label for=&quot;input1&quot;&gt;Enter a date (MM-DD-YYYY):&lt;/label&gt;<br>&lt;input type=&quot;date&quot; id=&quot;input1&quot; name=&quot;input1&quot;&gt;<br></blockquote>",
+        "<h4>Instructions</h4>",
+        "Camper Cat is setting up a mortal combat tournament and wants to ask his competitors to see what date works best. Add an <code>input</code> tag with a <code>type</code> attribute of \"date\", an <code>id</code> attribute of \"pickdate\", and a <code>name</code> attribute of \"date\"."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <header>",
+        "    <h1>Tournaments</h1>",
+        "  </header>",
+        "  <main>",
+        "    <section>",
+        "      <h2>Mortal Combat Tournament Survey</h2>",
+        "      <form>",
+        "        <p>Tell us the best date for the competition</p>",
+        "        <label for=\"pickdate\">Preferred Date (MM-DD-YYYY):</label>",
+        "        ",
+        "        <!-- Add your code below this line -->",
+        "        ",
+        "        ",
+        "        ",
+        "        <!-- Add your code above this line -->",
+        "        ",
+        "        <input type=\"submit\" name=\"submit\" value=\"Submit\">",
+        "      </form>",
+        "    </section>",
+        "  </main>",
+        "  <footer>&copy; 2016 Camper Cat</footer>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('input').length == 2, 'message: Your code should add one <code>input</code> tag for the date selector field.');",
+        "assert($('input').attr('type') == 'date', 'message: Your <code>input</code> tag should have a <code>type</code> attribute with a value of date.');",
+        "assert($('input').attr('id') == 'pickdate', 'message: Your <code>input</code> tag should have an <code>id</code> attribute with a value of pickdate.');",
+        "assert($('input').attr('name') == 'date', 'message: Your <code>input</code> tag should have a <code>name</code> attribute with a value of date.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d778c367417b2b2512aa9",
+      "title": "Standardize Times with the HTML5 Datetime Attribute",
+      "description": [
+        "Continuing with the date theme, HTML5 also introduced the <code>time</code> element along with a <code>datetime</code> attribute to standardize times. This is an inline element that can wrap a date or time on a page. A valid format of that date is held by the <code>datetime</code> attribute. This is the value accessed by assistive devices. It helps avoid confusion by stating a standardized version of a time, even if it's written in an informal or colloquial manner in the text.",
+        "Here's an example:",
+        "<code>&lt;p&gt;Master Camper Cat officiated the cage match between Goro and Scorpion &lt;time datetime=&quot;2013-02-13&quot;&gt;last Wednesday&lt;/time&gt;, which ended in a draw.&lt;/p&gt;</code>",
+        "<h4>Instructions</h4>",
+        "Camper Cat's mortal combat survey results are in! Wrap a <code>time</code> tag around the text \"Thursday, September 15&lt;sup&gt;th&lt;/sup&gt;\" and add a <code>datetime</code> attribute to it set to \"2016-09-15\"."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <header>",
+        "    <h1>Tournaments</h1>",
+        "  </header>",
+        "  <article>",
+        "    <h2>Mortal Combat Tournament Survey Results</h2>",
+        "    ",
+        "    <!-- Add your code below this line -->",
+        "    ",
+        "    <p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Combat tournament is Thursday, September 15<sup>th</sup>. May the best ninja win!</p>",
+        "    ",
+        "    <!-- Add your code above this line -->",
+        "    ",
+        "    <section>",
+        "      <h3>Comments:</h3>",
+        "      <article>",
+        "        <p>Posted by: Sub-Zero on <time datetime=\"2016-08-13T20:01Z\">August 13<sup>th</sup></time></p>",
+        "        <p>Johnny Cage better be there, I'll finish him!</p>",
+        "      </article>",
+        "      <article>",
+        "        <p>Posted by: Doge on <time datetime=\"2016-08-15T08:12Z\">August 15<sup>th</sup></time></p>",
+        "        <p>Wow, much combat, so mortal.</p>",
+        "      </article>",
+        "      <article>",
+        "        <p>Posted by: The Grim Reaper on <time datetime=\"2016-08-16T00:00Z\">August 16<sup>th</sup></time></p>",
+        "        <p>Looks like I'll be busy that day.</p>",
+        "      </article>",
+        "    </section>",
+        "  </article>",
+        "  <footer>&copy; 2016 Camper Cat</footer>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('time').text().match(/Thursday, September 15th/g), 'message: Your <code>time</code> tags should wrap around the text \"Thursday, September 15&lt;sup&gt;th&lt;/sup&gt;\".');",
+        "assert($('time').attr('datetime'), 'message: Your <code>time</code> tag should have a <code>datetime</code> attribute that is not empty.');",
+        "assert($('time').attr('datetime') === \"2016-09-15\", 'message: Your <code>datetime</code> attribute should be set to a value of 2016-09-15.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d778d367417b2b2512aaa",
+      "title": "Make Elements Only Visible to a Screen Reader by Using Custom CSS",
+      "description": [
+        "Have you noticed that all of the applied accessibility challenges so far haven't used any CSS? This is to show the importance of a logical document outline, and using semantically meaningful tags around your content before introducing the visual design aspect.",
+        "However, CSS's magic can also improve accessibility on your page when you want to visually hide content meant only for screen readers. This happens when information is in a visual format (like a chart), but screen reader users need an alternative presentation (like a table) to access the data. CSS is used to position the screen reader-only elements off the visual area of the browser window.",
+        "Here's an example of the CSS rules that accomplish this:",
+        "<blockquote>.sr-only {<br>  position: absolute;<br>  left: -10000px;<br>  width: 1px;<br>  height: 1px;<br>  top: auto;<br>  overflow: hidden;<br>}</blockquote>",
+        "<strong>Note</strong><br>The following CSS approaches will NOT do the same thing:",
+        "<ul>",
+        "<li><code>display: none;</code> or <code>visibility: hidden;</code> hides content for everyone, including screen reader users</li>",
+        "<li>Zero values for pixel sizes, such as <code>width: 0px; height: 0px;</code> removes that element from the flow of your document, meaning screen readers will ignore it</li>",
+        "</ul>",
+        "<h4>Instructions</h4>",
+        "Camper Cat created a really cool stacked bar chart for his training page, and put the data into a table for his visually impaired users. The table already has an <code>sr-only</code> class, but the CSS rules aren't filled in yet. Give the <code>position</code> an absolute value, the <code>left</code> a -10000px value, and the <code>width</code> and <code>height</code> both 1px values."
+      ],
+      "challengeSeed": [
+        "<head>",
+        "  <style>",
+        "  .sr-only {",
+        "    position: ;",
+        "    left: ;",
+        "    width: ;",
+        "    height: ;",
+        "    top: auto;",
+        "    overflow: hidden;",
+        "  }",
+        "  </style>",
+        "</head>",
+        "<body>",
+        "  <header>",
+        "    <h1>Training</h1>",
+        "    <nav>",
+        "      <ul>",
+        "        <li><a href=\"#stealth\">Stealth &amp; Agility</a></li>",
+        "        <li><a href=\"#combat\">Combat</a></li>",
+        "        <li><a href=\"#weapons\">Weapons</a></li>",
+        "      </ul>",
+        "    </nav>",
+        "  </header>",
+        "  <section>",
+        "    <h2>Master Camper Cat's Beginner Three Week Training Program</h2>",
+        "    <figure>",
+        "      <!-- Stacked bar chart of weekly training-->",
+        "      <p>[Stacked bar chart]</p>",
+        "      <br />",
+        "      <figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>",
+        "    </figure>",
+        "    <table class=\"sr-only\">",
+        "      <caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>",
+        "      <thead>",
+        "        <tr>",
+        "          <th></th>",
+        "          <th scope=\"col\">Stealth &amp; Agility</th>",
+        "          <th scope=\"col\">Combat</th>",
+        "          <th scope=\"col\">Weapons</th>",
+        "          <th scope=\"col\">Total</th>                                        ",
+        "        </tr>",
+        "      </thead>",
+        "      <tbody>",
+        "        <tr>",
+        "          <th scope=\"row\">Week One</th>",
+        "          <td>3</td>",
+        "          <td>5</td>",
+        "          <td>2</td>",
+        "          <td>10</td>",
+        "        </tr>",
+        "        <tr>",
+        "          <th scope=\"row\">Week Two</th>",
+        "          <td>4</td>",
+        "          <td>5</td>",
+        "          <td>3</td>",
+        "          <td>12</td>",
+        "        </tr>",
+        "        <tr>",
+        "          <th scope=\"row\">Week Three</th>",
+        "          <td>4</td>",
+        "          <td>6</td>",
+        "          <td>3</td>",
+        "          <td>13</td>",
+        "        </tr>",
+        "      </tbody>",
+        "    </table>",
+        "  </section>",
+        "  <section id=\"stealth\">",
+        "    <h2>Stealth &amp; Agility Training</h2>",
+        "    <article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>",
+        "    <article><h3>No training is NP-complete without parkour</h3></article>",
+        "  </section>",
+        "  <section id=\"combat\">",
+        "    <h2>Combat Training</h2>",
+        "    <article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>",
+        "    <article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>",
+        "  </section>",
+        "  <section id=\"weapons\">",
+        "    <h2>Weapons Training</h2>",
+        "    <article><h3>Swords: the best tool to literally divide and conquer</h3></article>",
+        "    <article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>",
+        "  </section>",
+        "  <footer>&copy; 2016 Camper Cat</footer>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('.sr-only').css('position') == 'absolute', 'message: Your code should set the <code>position</code> property of the <code>sr-only</code> class to a value of absolute.');",
+        "assert($('.sr-only').css('left') == '-10000px', 'message: Your code should set the <code>left</code> property of the <code>sr-only</code> class to a value of -10000px.');",
+        "assert(code.match(/width:\\s*?1px/gi), 'message: Your code should set the <code>width</code> property of the <code>sr-only</code> class to a value of 1 pixel.');",
+        "assert(code.match(/height:\\s*?1px/gi), 'message: Your code should set the <code>height</code> property of the <code>sr-only</code> class to a value of 1 pixel.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d778e367417b2b2512aab",
+      "title": "Improve Readability with High Contrast Text",
+      "description": [
+        "Low contrast between the foreground and background colors can make text difficult to read. Sufficient contrast improves the readability of your content, but what exactly does \"sufficient\" mean?",
+        "The Web Content Accessibility Guidelines (WCAG) recommend at least a 4.5 to 1 contrast ratio for normal text. The ratio is calculated by comparing the relative luminance values of two colors. This ranges from 1:1 for the same color, or no contrast, to 21:1 for white against black, the strongest contrast. There are many contrast checking tools available online that calculate this ratio for you.",
+        "<h4>Instructions</h4>",
+        "Camper Cat's choice of light gray text on a white background for his recent blog post has a 1.5:1 contrast ratio, making it hard to read. Change the <code>color</code> of the text from the current gray (<code>#D3D3D3</code>) to a darker gray (<code>#636363</code>) to improve the contrast ratio to 6:1."
+      ],
+      "challengeSeed": [
+        "<head>",
+        "  <style>",
+        "  body {",
+        "    color: #D3D3D3;",
+        "    background-color: #FFF;",
+        "  }",
+        "  </style>",
+        "</head>",
+        "<body>",
+        "  <header>",
+        "    <h1>Deep Thoughts with Master Camper Cat</h1>",
+        "  </header>",
+        "  <article>",
+        "    <h2>A Word on the Recent Catnip Doping Scandal</h2>",
+        "    <p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>",
+        "    <p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>",
+        "  </article>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('body').css('color') == 'rgb(99, 99, 99)', 'message: Your code should change the text <code>color</code> for the <code>body</code> to the darker gray.');",
+        "assert($('body').css('background-color') == 'rgb(255, 255, 255)', 'message: Your code should not change the <code>background-color</code> for the <code>body</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d778f367417b2b2512aac",
+      "title": "Avoid Colorblindness Issues by Using Sufficient Contrast",
+      "description": [
+        "Color is a large part of visual design, but its use introduces two accessibility issues. First, color alone should not be used as the only way to convey important information because screen reader users won't see it. Second, foreground and background colors need sufficient contrast so colorblind users can distinguish them.",
+        "Previous challenges covered having text alternatives to address the first issue. The last challenge introduced contrast checking tools to help with the second. The WCAG-recommended contrast ratio of 4.5:1 applies for color use as well as gray-scale combinations.",
+        "Colorblind users have trouble distinguishing some colors from others - usually in hue but sometimes lightness as well. You may recall the contrast ratio is calculated using the relative luminance (or lightness) values of the foreground and background colors.",
+        "In practice, the 4.5:1 ratio can be reached by darkening the darker color and lightening the lighter one with the aid of a color contrast checker. Darker colors on the color wheel are considered to be blues, violets, magentas, and reds, whereas lighter colors are oranges, yellows, greens, and blue-greens.",
+        "<h4>Instructions</h4>",
+        "Camper Cat is experimenting with using color for his blog text and background, but his current combination of a greenish <code>background-color</code> with maroon text <code>color</code> has a 2.5:1 contrast ratio. You can easily adjust the lightness of the colors since he declared them using the CSS <code>hsl()</code> property (which stands for hue, saturation, lightness) by changing the third argument. Increase the <code>background-color</code> lightness value from 35% to 55%, and decrease the <code>color</code> lightness value from 20% to 15%. This improves the contrast to 5.9:1."
+      ],
+      "challengeSeed": [
+        "<head>",
+        "  <style>",
+        "  body {",
+        "    color: hsl(0, 55%, 20%);",
+        "    background-color: hsl(120, 25%, 35%);",
+        "  }",
+        "  </style>",
+        "</head>",
+        "<body>",
+        "  <header>",
+        "    <h1>Deep Thoughts with Master Camper Cat</h1>",
+        "  </header>",
+        "  <article>",
+        "    <h2>A Word on the Recent Catnip Doping Scandal</h2>",
+        "    <p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>",
+        "    <p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>",
+        "  </article>",
+        "</body>"
+      ],
+      "tests": [
+        "assert(code.match(/color:\\s*?hsl\\(0,\\s*?55%,\\s*?15%\\)/gi), 'message: Your code should only change the lightness value for the text <code>color</code> property to a value of 15%.');",
+        "assert(code.match(/background-color:\\s*?hsl\\(120,\\s*?25%,\\s*?55%\\)/gi), 'message: Your code should only change the lightness value for the <code>background-color</code> property to a value of 55%.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d778f367417b2b2512aad",
+      "title": "Avoid Colorblindness Issues by Carefully Choosing Colors that Convey Information",
+      "description": [
+        "There are various forms of colorblindness. These can range from a reduced sensitivity to a certain wavelength of light to the inability to see color at all. The most common form is a reduced sensitivity to detect greens.",
+        "For example, if two similar green colors are the foreground and background color of your content, a colorblind user may not be able to distinguish them. Close colors can be thought of as neighbors on the color wheel, and those combinations should be avoided when conveying important information.",
+        "<strong>Note</strong><br>Some online color picking tools include visual simulations of how colors appear for different types of colorblindness. These are great resources in addition to online contrast checking calculators.",
+        "<h4>Instructions</h4>",
+        "Camper Cat is testing different styles for an important button, but the yellow (<code>#FFFF33</code>) <code>background-color</code> and the green (<code>#33FF33</code>) text <code>color</code> are neighboring hues on the color wheel and virtually indistinguishable for some colorblind users. (Their similar lightness also fails the contrast ratio check). Change the text <code>color</code> to a dark blue (<code>#003366</code>) to solve both problems."
+      ],
+      "challengeSeed": [
+        "<head>",
+        "  <style>",
+        "  button {",
+        "    color: #33FF33;",
+        "    background-color: #FFFF33;",
+        "    font-size: 14px;",
+        "    padding: 10px;",
+        "  }",
+        "  </style>",
+        "</head>",
+        "<body>",
+        "  <header>",
+        "    <h1>Danger!</h1>",
+        "  </header>",
+        "  <button>Delete Internet</button>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('button').css('color') == 'rgb(0, 51, 102)', 'message: Your code should change the text <code>color</code> for the <code>button</code> to the dark blue.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d778f367417b2b2512aae",
+      "title": "Give Links Meaning by Using Descriptive Link Text",
+      "description": [
+        "Screen reader users have different options for what type of content their device reads. This includes skipping to (or over) landmark elements, jumping to the main content, or getting a page summary from the headings. Another option is to only hear the links available on a page.",
+        "Screen readers do this by reading the link text, or what's between the anchor (<code>a</code>) tags. Having a list of \"click here\" or \"read more\" links isn't helpful. Instead, you should use brief but descriptive text within the <code>a</code> tags to provide more meaning for these users.",
+        "<h4>Instructions</h4>",
+        "The link text that Camper Cat is using is not very descriptive without the surrounding context. Move the anchor (<code>a</code>) tags so they wrap around the text \"information about batteries\" instead of \"Click here\"."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <header>",
+        "    <h1>Deep Thoughts with Master Camper Cat</h1>",
+        "  </header>",
+        "  <article>",
+        "    <h2>Defeating your Foe: the Red Dot is Ours!</h2>",
+        "    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightening speed. But chin up, fellow fighters, our time for victory may soon be near. <a href=\"\">Click here</a> for information about batteries</p>",
+        "  </article>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('a').text().match(/information about batteries/g), 'message: Your code should move the anchor <code>a</code> tags from around the words \"Click here\" to wrap around the words \"information about batteries\".');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7790367417b2b2512aaf",
+      "title": "Make Links Navigatable with HTML Access Keys",
+      "description": [
+        "HTML offers the <code>accesskey</code> attribute to specify a shortcut key to activate or bring focus to an element. This can make navigation more efficient for keyboard-only users.",
+        "HTML5 allows this attribute to be used on any element, but it's particularly useful when it's used with interactive ones. This includes links, buttons, and form controls.",
+        "Here's an example:",
+        "<code>&lt;button accesskey=&quot;b&quot;&gt;Important Button&lt;/button&gt;</code>",
+        "<h4>Instructions</h4>",
+        "Camper Cat wants the links around the two blog article titles to have keyboard shortcuts so his site's users can quickly navigate to the full story. Add an <code>accesskey</code> attribute to both links and set the first one to \"g\" (for Garfield) and the second one to \"c\" (for Chuck Norris)."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <header>",
+        "    <h1>Deep Thoughts with Master Camper Cat</h1>",
+        "  </header>",
+        "  <article>",
+        "    ",
+        "    ",
+        "    <h2><a id=\"first\" href=\"\">The Garfield Files: Lasagna as Training Fuel?</a></h2>",
+        "    ",
+        "    ",
+        "    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>",
+        "  </article>",
+        "  <article>",
+        "    ",
+        "    ",
+        "    <h2><a id=\"second\" href=\"\">Is Chuck Norris a Cat Person?</a></h2>",
+        "    ",
+        "    ",
+        "    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>",
+        "  </article>",
+        "  <footer>&copy; 2016 Camper Cat</footer>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('#first').attr('accesskey'), 'message: Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of \"first\".');",
+        "assert($('#second').attr('accesskey'), 'message: Your code should add an <code>accesskey</code> attribute to the <code>a</code> tag with the <code>id</code> of \"second\".');",
+        "assert($('#first').attr('accesskey') == 'g', 'message: Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of \"first\" to \"g\". Note that case matters.');",
+        "assert($('#second').attr('accesskey') == 'c', 'message: Your code should set the <code>accesskey</code> attribute on the <code>a</code> tag with the <code>id</code> of \"second\" to \"c\". Note that case matters.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7790367417b2b2512ab0",
+      "title": "Use Tabindex to Add keyboard Focus to an Element",
+      "description": [
+        "The HTML <code>tabindex</code> attribute has three distinct functions relating to an element's keyboard focus. When it's on a tag, it indicates that element can be focused on. The value (an integer that's positive, negative, or zero) determines the behavior.",
+        "Certain elements, such as links and form controls, automatically receive keyboard focus when a user tabs through a page. It's in the same order as the elements come in the HTML source markup. This same functionality can be given to other elements, such as <code>div</code>, <code>span</code>, and <code>p</code>, by placing a <code>tabindex=\"0\"</code> attribute on them. Here's an example:",
+        "<code>&lt;div tabindex=&quot;0&quot;&gt;I need keyboard focus!&lt;/div&gt;</code>",
+        "<strong>Note</strong><br>A negative <code>tabindex</code> value (typically -1) indicates that an element is focusable, but is not reachable by the keyboard. This method is generally used to bring focus to content programmatically (like when a <code>div</code> used for a pop-up window is activated), and is beyond the scope of these challenges.",
+        "<h4>Instructions</h4>",
+        "Camper Cat created a new survey to collect information about his users. He knows input fields automatically get keyboard focus, but he wants to make sure his keyboard users pause at the instructions while tabbing through the items. Add a <code>tabindex</code> attribute to the <code>p</code> tag and set its value to \"0\". Bonus - using <code>tabindex</code> also enables the CSS pseudo-class <code>:focus</code> to work on the <code>p</code> tag."
+      ],
+      "challengeSeed": [
+        "<head>",
+        "  <style>",
+        "  p:focus {",
+        "    background-color: yellow;",
+        "  }",
+        "  </style>",
+        "</head>",
+        "<body>",
+        "  <header>",
+        "    <h1>Ninja Survey</h1>",
+        "  </header>",
+        "  <section>",
+        "    <form>",
+        "      ",
+        "      ",
+        "      <p>Instructions: Fill in ALL your information then click <b>Submit</b></p>",
+        "      ",
+        "      ",
+        "      <label for=\"username\">Username:</label>",
+        "      <input type=\"text\" id=\"username\" name=\"username\"><br>",
+        "      <fieldset>",
+        "        <legend>What level ninja are you?</legend>",
+        "        <input id=\"newbie\" type=\"radio\" name=\"levels\" value=\"newbie\">",
+        "        <label for=\"newbie\">Newbie Kitten</label><br>",
+        "        <input id=\"intermediate\" type=\"radio\" name=\"levels\" value=\"intermediate\">",
+        "        <label for=\"intermediate\">Developing Student</label><br>",
+        "        <input id=\"master\" type=\"radio\" name=\"levels\" value=\"master\">",
+        "        <label for=\"master\">9th Life Master</label>",
+        "      </fieldset>",
+        "      <br>",
+        "      <fieldset>",
+        "      <legend>Select your favorite weapons:</legend>",
+        "      <input id=\"stars\" type=\"checkbox\" name=\"weapons\" value=\"stars\">",
+        "      <label for=\"stars\">Throwing Stars</label><br>",
+        "      <input id=\"nunchucks\" type=\"checkbox\" name=\"weapons\" value=\"nunchucks\">",
+        "      <label for=\"nunchucks\">Nunchucks</label><br>",
+        "      <input id=\"sai\" type=\"checkbox\" name=\"weapons\" value=\"sai\">",
+        "      <label for=\"sai\">Sai Set</label><br>",
+        "      <input id=\"sword\" type=\"checkbox\" name=\"weapons\" value=\"sword\">",
+        "      <label for=\"sword\">Sword</label>",
+        "      </fieldset>",
+        "      <br>",
+        "      <input type=\"submit\" name=\"submit\" value=\"Submit\">",
+        "    </form><br>",
+        "  </section>",
+        "  <footer>&copy; 2016 Camper Cat</footer>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('p').attr('tabindex'), 'message: Your code should add a <code>tabindex</code> attribute to the <code>p</code> tag that holds the form instructions.');",
+        "assert($('p').attr('tabindex') == '0', 'message: Your code should set the <code>tabindex</code> attribute on the <code>p</code> tag to a value of 0.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7790367417b2b2512ab1",
+      "title": "Use Tabindex to Specify the Order of Keyboard Focus for Several Elements",
+      "description": [
+        "The <code>tabindex</code> attribute also specifies the exact tab order of elements. This is achieved when the value of the attribute is set to a positive number of 1 or higher.",
+        "Setting a tabindex=\"1\" will bring keyboard focus to that element first. Then it cycles through the sequence of specified <code>tabindex</code> values (2, 3, etc.), before moving to default and <code>tabindex=\"0\"</code> items.",
+        "It's important to note that when the tab order is set this way, it overrides the default order (which uses the HTML source). This may confuse users who are expecting to start navigation from the top of the page. This technique may be necessary in some circumstances, but in terms of accessibility, take care before applying it.",
+        "Here's an example:",
+        "<code>&lt;div tabindex=&quot;1&quot;&gt;I get keyboard focus, and I get it first!&lt;/div&gt;</code>",
+        "<code>&lt;div tabindex=&quot;2&quot;&gt;I get keyboard focus, and I get it second!&lt;/div&gt;</code>",
+        "<h4>Instructions</h4>",
+        "Camper Cat has a search field on his Inspirational Quotes page that he plans to position in the upper right corner with CSS. He wants the search <code>input</code> and submit <code>input</code> form controls to be the first two items in the tab order. Add a <code>tabindex</code> attribute set to \"1\" to the search <code>input</code>, and a <code>tabindex</code> attribute set to \"2\" to the submit <code>input</code>."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <header>",
+        "    <h1>Even Deeper Thoughts with Master Camper Cat</h1>",
+        "    <nav>",
+        "      <ul>",
+        "        <li><a href=\"\">Home</a></li>",
+        "        <li><a href=\"\">Blog</a></li>",
+        "        <li><a href=\"\">Training</a></li>",
+        "      </ul>",
+        "    </nav>",
+        "  </header>",
+        "  <form>",
+        "    <label for=\"search\">Search:</label>",
+        "    ",
+        "    ",
+        "    <input type=\"search\" name=\"search\" id=\"search\">",
+        "    <input type=\"submit\" name=\"submit\" value=\"Submit\" id=\"submit\">",
+        "    ",
+        "    ",
+        "  </form>",
+        "  <h2>Inspirational Quotes</h2>",
+        "  <blockquote>",
+        "    <p>&ldquo;There's no Theory of Evolution, just a list of creatures I've allowed to live.&rdquo;<br>",
+        "    - Chuck Norris</p>",
+        "  </blockquote>",
+        "  <blockquote>",
+        "    <p>&ldquo;Wise men say forgiveness is divine, but never pay full price for late pizza.&rdquo;<br>",
+        "    - TMNT</p>",
+        "  </blockquote>",
+        "  <footer>&copy; 2016 Camper Cat</footer>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('#search').attr('tabindex'), 'message: Your code should add a <code>tabindex</code> attribute to the search <code>input</code> tag.');",
+        "assert($('#submit').attr('tabindex'), 'message: Your code should add a <code>tabindex</code> attribute to the submit <code>input</code> tag.');",
+        "assert($('#search').attr('tabindex') == '1', 'message: Your code should set the <code>tabindex</code> attribute on the search <code>input</code> tag to a value of 1.');",
+        "assert($('#submit').attr('tabindex') == '2', 'message: Your code should set the <code>tabindex</code> attribute on the submit <code>input</code> tag to a value of 2.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/01-responsive-web-design/applied-visual-design.json b/seed/challenges/01-responsive-web-design/applied-visual-design.json
new file mode 100644
index 00000000000000..7e8aedf8bac165
--- /dev/null
+++ b/seed/challenges/01-responsive-web-design/applied-visual-design.json
@@ -0,0 +1,3766 @@
+{
+  "name": "Applied Visual Design",
+  "order": 1,
+  "time": "5 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "587d7790367417b2b2512ab2",
+      "title": "Introduction to the Applied Visual Design Challenges",
+      "description": [
+        [
+          "",
+          "",
+          "Visual Design in web development is a broad topic. It combines typography, color theory, graphics, animation, and page layout to help deliver a site's message. The definition of good design is a well-discussed subject, with many books on the theme.<br><br>At a basic level, most web content provides a user with information. The visual design of the page can influence its presentation and a user's experience. In web development, HTML gives structure and semantics to a page's content, and CSS controls the layout and appearance of it.<br><br>This section covers some of the basic tools developers use to create their own visual designs.",
+          ""
+        ]
+      ],
+      "releasedOn": "",
+      "challengeSeed": [],
+      "tests": [],
+      "type": "Waypoint",
+      "challengeType": 7,
+      "isRequired": false,
+      "titleEs": "",
+      "descriptionEs": [
+        []
+      ],
+      "titleFr": "",
+      "descriptionFr": [
+        []
+      ],
+      "titleDe": "",
+      "descriptionDe": [
+        []
+      ]
+    },
+    {
+      "id": "587d7791367417b2b2512ab3",
+      "title": "Create Visual Balance Using the Text-align Property",
+      "description": [
+        "This section of the curriculum focuses on Applied Visual Design. The first group of challenges build on the given card layout to show a number of core principles.",
+        "Text is often a large part of web content. CSS has several options for how to align it with the <code>text-align</code> property.",
+        "<h4>Instructions</h4>",
+        "Align the <code>h4</code> tag's text, which says \"Google\", to the center. Then justify the paragraph tag which contains information about how Google was founded. Finally, align the two anchor tags to the left by using the <code>links</code> class selector.",
+        "<strong>Note</strong><br>When you align the two anchor tags, you will see no difference. This is because text is aligned to the left by default."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  h4 {",
+        "    ",
+        "  }",
+        "  p {",
+        "    ",
+        "  }",
+        "  .links {",
+        "    margin-right: 20px;",
+        "    ",
+        "  }",
+        "  .fullCard {",
+        "    border: 1px solid #ccc;",
+        "    border-radius: 5px;",
+        "    margin: 10px 5px;",
+        "    padding: 4px;",
+        "  }",
+        "  .cardContent {",
+        "    padding: 10px;",
+        "  }",
+        "</style>",
+        "<div class=\"fullCard\">",
+        "  <div class=\"cardContent\">",
+        "    <div class=\"cardText\">",
+        "      <h4>Google</h4>",
+        "      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>",
+        "    </div>",
+        "    <div class=\"cardLinks\">",
+        "      <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" class=\"links\">Larry Page</a>",
+        "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" class=\"links\">Sergey Brin</a>",
+        "    </div>",
+        "  </div>",
+        "</div>"
+      ],
+      "tests": [
+        "assert($('h4').css('text-align') == 'center', 'message: Your code should use the text-align property on the <code>h4</code> tag to set it to center.');",
+        "assert($('p').css('text-align') == 'justify', 'message: Your code should use the text-align property on the <code>p</code> tag to set it to justify.');",
+        "assert($('.links').css('text-align') == 'left', 'message: Your code should use the text-align property on the <code>a</code> tags by accessing their class <code>links</code> to set it to left.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7791367417b2b2512ab4",
+      "title": "Adjust the Width of an Element Using the Width Property",
+      "description": [
+        "You can specify the width of an element using the <code>width</code> property in CSS. Values can be given in relative length units (such as em), absolute length units (such as px), or as a percentage of its containing parent element. Here's an example that changes the width of an image to 220px:",
+        "<blockquote>img {<br>  width: 220px;<br>}</blockquote>",
+        "<h4>Instructions</h4>",
+        "Add a <code>width</code> property to the entire card and set it to an absolute value of 245px. Use the <code>fullCard</code> class to select the element."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  h4 {",
+        "    text-align: center;",
+        "  }",
+        "  p {",
+        "    text-align: justify;",
+        "  }",
+        "  .links {",
+        "    margin-right: 20px;",
+        "    text-align: left;",
+        "  }",
+        "  .fullCard {",
+        "    ",
+        "    border: 1px solid #ccc;",
+        "    border-radius: 5px;",
+        "    margin: 10px 5px;",
+        "    padding: 4px;",
+        "  }",
+        "  .cardContent {",
+        "    padding: 10px;",
+        "  }",
+        "</style>",
+        "<div class=\"fullCard\">",
+        "  <div class=\"cardContent\">",
+        "    <div class=\"cardText\">",
+        "      <h4>Google</h4>",
+        "      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>",
+        "    </div>",
+        "    <div class=\"cardLinks\">",
+        "      <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" class=\"links\">Larry Page</a>",
+        "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" class=\"links\">Sergey Brin</a>",
+        "    </div>",
+        "  </div>",
+        "</div>"
+      ],
+      "tests": [
+        "assert($('.fullCard').css('width') == '245px', 'message: Your code should change the <code>width</code> property of the card to 245 pixels by using the <code>fullCard</code> class selector.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7791367417b2b2512ab5",
+      "title": "Adjust the Height of an Element Using the Height Property",
+      "description": [
+        "You can specify the height of an element using the <code>height</code> property in CSS, similar to the <code>width</code> property. Here's an example that changes the height of an image to 20px:",
+        "<blockquote>img {<br>  height: 20px;<br>}</blockquote>",
+        "<h4>Instructions</h4>",
+        "Add a <code>height</code> property to the <code>h4</code> tag and set it to 40px."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  h4 {",
+        "    text-align: center;",
+        "    ",
+        "  }",
+        "  p {",
+        "    text-align: justify;",
+        "  }",
+        "  .links {",
+        "    margin-right: 20px;",
+        "    text-align: left;",
+        "  }",
+        "  .fullCard {",
+        "    width: 245px;",
+        "    border: 1px solid #ccc;",
+        "    border-radius: 5px;",
+        "    margin: 10px 5px;",
+        "    padding: 4px;",
+        "  }",
+        "  .cardContent {",
+        "    padding: 10px;",
+        "  }",
+        "</style>",
+        "<div class=\"fullCard\">",
+        "  <div class=\"cardContent\">",
+        "    <div class=\"cardText\">",
+        "      <h4>Google</h4>",
+        "      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>",
+        "    </div>",
+        "    <div class=\"cardLinks\">",
+        "      <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" class=\"links\">Larry Page</a>",
+        "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" class=\"links\">Sergey Brin</a>",
+        "    </div>",
+        "  </div>",
+        "</div>"
+      ],
+      "tests": [
+        "assert($('h4').css('height') == '40px', 'message: Your code should change the <code>h4</code> <code>height</code> property to a value of 40 pixels.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7791367417b2b2512ab6",
+      "title": "Create Visual Balance with the Height of an Element",
+      "description": [
+        "This challenge changes the layout of the links by stacking them to look more like a list.",
+        "To keep everything balanced, you can make sure every element's width and height makes sense in that context.",
+        "<h4>Instructions</h4>",
+        "Change the <code>height</code> of the <code>h4</code> tag to 25px to make the card more compact and a little cleaner."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  h4 {",
+        "    text-align: center;",
+        "    height: 40px;",
+        "  }",
+        "  p {",
+        "    text-align: justify;",
+        "  }",
+        "  .links {",
+        "    text-align: left;",
+        "    color: black;",
+        "  }",
+        "  .fullCard {",
+        "    width: 245px;",
+        "    border: 1px solid #ccc;",
+        "    border-radius: 5px;",
+        "    margin: 10px 5px;",
+        "    padding: 4px;",
+        "  }",
+        "  .cardContent {",
+        "    padding: 10px;",
+        "  }",
+        "  .cardText {",
+        "    margin-bottom: 30px;",
+        "  }",
+        "</style>",
+        "<div class=\"fullCard\">",
+        "  <div class=\"cardContent\">",
+        "    <div class=\"cardText\">",
+        "      <h4>Google</h4>",
+        "      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>",
+        "    </div>",
+        "    <div class=\"cardLinks\">",
+        "      <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" class=\"links\">Larry Page</a><br><br>",
+        "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" class=\"links\">Sergey Brin</a>",
+        "    </div>",
+        "  </div>",
+        "</div>"
+      ],
+      "tests": [
+        "assert($('h4').css('height') == '25px', 'message: Your code should change the <code>h4</code> height value to 25 pixels.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d781a367417b2b2512ab7",
+      "title": "Use the Strong Tag to Make Text Bold",
+      "description": [
+        "To make text bold, you can use the <code>strong</code> tag. This is often used to draw attention to text and symbolize that it is important. With the <code>strong</code> tag, the browser applies the CSS of <code>font-weight: bold;</code> to the element.",
+        "<h4>Instructions</h4>",
+        "Wrap a <code>strong</code> tag around the entire <code>h4</code> element and its contents."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  h4 {",
+        "    text-align: center;",
+        "    height: 25px;",
+        "  }",
+        "  p {",
+        "    text-align: justify;",
+        "  }",
+        "  .links {",
+        "    text-align: left;",
+        "    color: black;",
+        "  }",
+        "  .fullCard {",
+        "    width: 245px;",
+        "    border: 1px solid #ccc;",
+        "    border-radius: 5px;",
+        "    margin: 10px 5px;",
+        "    padding: 4px;",
+        "  }",
+        "  .cardContent {",
+        "    padding: 10px;",
+        "  }",
+        "  .cardText {",
+        "    margin-bottom: 30px;",
+        "  }",
+        "</style>",
+        "<div class=\"fullCard\">",
+        "  <div class=\"cardContent\">",
+        "    <div class=\"cardText\">",
+        "      <h4>Google</h4>",
+        "      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>",
+        "    </div>",
+        "    <div class=\"cardLinks\">",
+        "      <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" class=\"links\">Larry Page</a><br><br>",
+        "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" class=\"links\">Sergey Brin</a>",
+        "    </div>",
+        "  </div>",
+        "</div>"
+      ],
+      "tests": [
+        "assert($('strong').length == 1, 'message: Your code should add one <code>strong</code> tag to the markup.');",
+        "assert($('strong').children('h4').length == 1, 'message: The <code>strong</code> tag should wrap around the <code>h4</code> tag and its contents.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d781a367417b2b2512ab8",
+      "title": "Use the u Tag to Underline Text",
+      "description": [
+        "To underline text, you can use the <code>u</code> tag. This is often used to signify that a section of text is important, or something to remember. With the <code>u</code> tag, the browser applies the CSS of <code>text-decoration: underline;</code> to the element.",
+        "<h4>Instructions</h4>",
+        "Wrap the <code>u</code> tag around the two anchor tags. It should not include the parent <code>div</code> that has the class of <code>cardLinks</code>.",
+        "<strong>Note</strong><br>Try to avoid using the <code>u</code> tag when it could be confused for a link. Anchor tags also have a default underlined formatting."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  h4 {",
+        "    text-align: center;",
+        "    height: 25px;",
+        "  }",
+        "  p {",
+        "    text-align: justify;",
+        "  }",
+        "  .links {",
+        "    text-align: left;",
+        "    color: black;",
+        "  }",
+        "  .fullCard {",
+        "    width: 245px;",
+        "    border: 1px solid #ccc;",
+        "    border-radius: 5px;",
+        "    margin: 10px 5px;",
+        "    padding: 4px;",
+        "  }",
+        "  .cardContent {",
+        "    padding: 10px;",
+        "  }",
+        "  .cardText {",
+        "    margin-bottom: 30px;",
+        "  }",
+        "</style>",
+        "<div class=\"fullCard\">",
+        "  <div class=\"cardContent\">",
+        "    <div class=\"cardText\">",
+        "      <strong><h4>Google</h4></strong>",
+        "      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>",
+        "    </div>",
+        "    <div class=\"cardLinks\">",
+        "      <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" class=\"links\">Larry Page</a><br><br>",
+        "      <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" class=\"links\">Sergey Brin</a>",
+        "    </div>",
+        "  </div>",
+        "</div>"
+      ],
+      "tests": [
+        "assert($('u').length == 1, 'message: Your code should add a <code>u</code> tag to the markup.');",
+        "assert($('u').children('a').length == 2, 'message: The <code>u</code> tag should wrap around and contain the two <code>a</code> tags.');",
+        "assert($('u').children('div').length == 0, 'message: The <code>u</code> tag should not wrap around the parent <code>div</code> tag.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d781a367417b2b2512ab9",
+      "title": "Use the em Tag to Italicize Text",
+      "description": [
+        "To emphasize text, you can use the <code>em</code> tag. This displays text as italicized, as the browser applies the CSS of <code>font-style: italic;</code> to the element.",
+        "<h4>Instructions</h4>",
+        "Wrap an <code>em</code> tag around the paragraph tag to give it emphasis."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  h4 {",
+        "    text-align: center;",
+        "    height: 25px;",
+        "  }",
+        "  p {",
+        "    text-align: justify;",
+        "  }",
+        "  .links {",
+        "    text-align: left;",
+        "    color: black;",
+        "  }",
+        "  .fullCard {",
+        "    width: 245px;",
+        "    border: 1px solid #ccc;",
+        "    border-radius: 5px;",
+        "    margin: 10px 5px;",
+        "    padding: 4px;",
+        "  }",
+        "  .cardContent {",
+        "    padding: 10px;",
+        "  }",
+        "  .cardText {",
+        "    margin-bottom: 30px;",
+        "  }",
+        "</style>",
+        "<div class=\"fullCard\">",
+        "  <div class=\"cardContent\">",
+        "    <div class=\"cardText\">",
+        "      <strong><h4>Google</h4></strong>",
+        "      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>",
+        "    </div>",
+        "    <div class=\"cardLinks\">",
+        "      <u>",
+        "        <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" class=\"links\">Larry Page</a><br><br>",
+        "        <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" class=\"links\">Sergey Brin</a>",
+        "      </u>",
+        "    </div>",
+        "  </div>",
+        "</div>"
+      ],
+      "tests": [
+        "assert($('em').length == 1, 'message: Your code should add an <code>em</code> tag to the markup.');",
+        "assert($('em').children('p').length == 1, 'message: The <code>em</code> tag should wrap around the <code>p</code> tag and its contents.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d781b367417b2b2512aba",
+      "title": "Use the del Tag to Strikethrough Text",
+      "description": [
+        "To strikethrough text, which is when a horizontal line cuts across the characters, you can use the <code>del</code> tag. It shows that a section of text is no longer valid. With the <code>del</code> tag, the browser applies the CSS of <code>text-decoration: line-through;</code> to the element.",
+        "<h4>Instructions</h4>",
+        "Wrap the <code>del</code> tag around \"Google\" inside the <code>h4</code> tag and then add the word Alphabet beside it, which should not have the strikethrough formatting."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  h4 {",
+        "    text-align: center;",
+        "    height: 25px;",
+        "  }",
+        "  p {",
+        "    text-align: justify;",
+        "  }",
+        "  .links {",
+        "    text-align: left;",
+        "    color: black;",
+        "  }",
+        "  .fullCard {",
+        "    width: 245px;",
+        "    border: 1px solid #ccc;",
+        "    border-radius: 5px;",
+        "    margin: 10px 5px;",
+        "    padding: 4px;",
+        "  }",
+        "  .cardContent {",
+        "    padding: 10px;",
+        "  }",
+        "  .cardText {",
+        "    margin-bottom: 30px;",
+        "  }",
+        "</style>",
+        "<div class=\"fullCard\">",
+        "  <div class=\"cardContent\">",
+        "    <div class=\"cardText\">",
+        "      <strong><h4>Google</h4></strong>",
+        "      <em><p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>",
+        "    </div>",
+        "    <div class=\"cardLinks\">",
+        "      <u>",
+        "        <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" class=\"links\">Larry Page</a><br><br>",
+        "        <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" class=\"links\">Sergey Brin</a>",
+        "      </u>",
+        "    </div>",
+        "  </div>",
+        "</div>"
+      ],
+      "tests": [
+        "assert($('del').length == 1, 'message: Your code should add one <code>del</code> tag to the markup.');",
+        "assert($('del').text().match(/Google/gi) && !$('del').text().match(/Alphabet/gi), 'message: A <code>del</code> tag should wrap around the Google text in the <code>h4</code> tag. It should not contain the word Alphabet.');",
+        "assert($('h4').html().match(/Alphabet/gi), 'message: Include the word Alphabet in the <code>h4</code> tag, without strikethrough formatting.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d781b367417b2b2512abb",
+      "title": "Create a Horizontal Line Using the hr Element",
+      "description": [
+        "You can use the <code>hr</code> tag to add a horizontal line across the width of its containing element. This can be used to define a change in topic or to visually separate groups of content.",
+        "<h4>Instructions</h4>",
+        "Add an <code>hr</code> tag underneath the <code>h4</code> which contains the card title.",
+        "<strong>Note</strong><br>In HTML, <code>hr</code> is a self-closing tag, and therefore doesn't need a separate closing tag."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  h4 {",
+        "    text-align: center;",
+        "    height: 25px;",
+        "  }",
+        "  p {",
+        "    text-align: justify;",
+        "  }",
+        "  .links {",
+        "    text-align: left;",
+        "    color: black;",
+        "  }",
+        "  .fullCard {",
+        "    width: 245px;",
+        "    border: 1px solid #ccc;",
+        "    border-radius: 5px;",
+        "    margin: 10px 5px;",
+        "    padding: 4px;",
+        "  }",
+        "  .cardContent {",
+        "    padding: 10px;",
+        "  }",
+        "  .cardText {",
+        "    margin-bottom: 30px;",
+        "  }",
+        "</style>",
+        "<div class=\"fullCard\">",
+        "  <div class=\"cardContent\">",
+        "    <div class=\"cardText\">",
+        "      <strong><h4><del>Google</del>Alphabet</h4></strong>",
+        "      ",
+        "      <em><p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>",
+        "    </div>",
+        "    <div class=\"cardLinks\">",
+        "      <u>",
+        "        <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" class=\"links\">Larry Page</a><br><br>",
+        "        <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" class=\"links\">Sergey Brin</a>",
+        "      </u>",
+        "    </div>",
+        "  </div>",
+        "</div>"
+      ],
+      "tests": [
+        "assert($('hr').length == 1, 'message: Your code should add an <code>hr</code> tag to the markup.');",
+        "assert(code.match(/<\\/strong>\\s*?<hr(>|\\s*?\\/>)\\s*?<em>/gi), 'message: The <code>hr</code> tag should come between the title and the paragraph.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d781b367417b2b2512abc",
+      "title": "Adjust the Background-color Property of Text",
+      "description": [
+        "Instead of adjusting your overall background or the color of the text to make the foreground easily readable, you can add a <code>background-color</code> to the element holding the text you want to emphasize. This challenge uses <code>rgba()</code> instead of <code>hex</code> codes or normal <code>rgb()</code>.",
+        "<blockquote>rgba stands for:<br>  r = red<br>  g = green<br>  b = blue<br>  a = alpha/level of opacity</blockquote>",
+        "The rgb values can range from 0 to 255. The alpha value can range from 1, which is fully opaque or a solid color, to 0, which is fully transparent or clear. <code>rgba()</code> is great to use in this case, as it allows you to adjust the opacity. This means you don't have to completely block out the background.",
+        "You'll use <code>background-color: rgba(45, 45, 45, 0.1)</code> for this challenge. It produces a dark gray color that is nearly transparent given the low opacity value of 0.1.",
+        "<h4>Instructions</h4>",
+        "To make the text stand out more, adjust the <code>background-color</code> of the <code>h4</code> element to the given <code>rgba()</code> value.",
+        "Also for the <code>h4</code>, remove the <code>height</code> property and add <code>padding</code> of 10px."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  h4 {",
+        "    text-align: center;",
+        "    height: 25px;",
+        "    ",
+        "    ",
+        "  }",
+        "  p {",
+        "    text-align: justify;",
+        "  }",
+        "  .links {",
+        "    text-align: left;",
+        "    color: black;",
+        "  }",
+        "  .fullCard {",
+        "    width: 245px;",
+        "    border: 1px solid #ccc;",
+        "    border-radius: 5px;",
+        "    margin: 10px 5px;",
+        "    padding: 4px;",
+        "  }",
+        "  .cardContent {",
+        "    padding: 10px;",
+        "  }",
+        "  .cardText {",
+        "    margin-bottom: 30px;",
+        "  }",
+        "</style>",
+        "<div class=\"fullCard\">",
+        "  <div class=\"cardContent\">",
+        "    <div class=\"cardText\">",
+        "      <strong><h4>Alphabet</h4></strong>",
+        "      <hr>",
+        "      <em><p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>",
+        "    </div>",
+        "    <div class=\"cardLinks\">",
+        "      <u>",
+        "        <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" class=\"links\">Larry Page</a><br><br>",
+        "        <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" class=\"links\">Sergey Brin</a>",
+        "      </u>",
+        "    </div>",
+        "  </div>",
+        "</div>"
+      ],
+      "tests": [
+        "assert(code.match(/background-color:\\s*?rgba\\(\\s*?45\\s*?,\\s*?45\\s*?,\\s*?45\\s*?,\\s*?0?\\.1\\s*?\\)/gi), 'message: Your code should add a <code>background-color</code> property to the <code>h4</code> element set to <code>rgba(45, 45, 45, 0.1)</code>.');",
+        "assert($('h4').css('padding-top') == '10px' && $('h4').css('padding-right') == '10px' && $('h4').css('padding-bottom') == '10px' && $('h4').css('padding-left') == '10px', 'message: Your code should add a <code>padding</code> property to the <code>h4</code> element and set it to 10 pixels.');",
+        "assert(!($('h4').css('height') == '25px'), 'message: The <code>height</code> property on the <code>h4</code> element should be removed.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d781b367417b2b2512abd",
+      "title": "Adjust the Size of a Header Versus a Paragraph Tag",
+      "description": [
+        "The font size of header tags (<code>h1</code> through <code>h6</code>) should generally be larger than the font size of paragraph tags. This makes it easier for the user to visually understand the layout and level of importance of everything on the page. You use the <code>font-size</code> property to adjust the size of the text in an element.",
+        "<h4>Instructions</h4>",
+        "To make the heading significantly larger than the paragraph, change the <code>font-size</code> of the <code>h4</code> tag to 27 pixels."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  h4 {",
+        "    text-align: center;",
+        "    background-color: rgba(45, 45, 45, 0.1);",
+        "    padding: 10px;",
+        "    ",
+        "  }",
+        "  p {",
+        "    text-align: justify;",
+        "  }",
+        "  .links {",
+        "    text-align: left;",
+        "    color: black;",
+        "  }",
+        "  .fullCard {",
+        "    width: 245px;",
+        "    border: 1px solid #ccc;",
+        "    border-radius: 5px;",
+        "    margin: 10px 5px;",
+        "    padding: 4px;",
+        "  }",
+        "  .cardContent {",
+        "    padding: 10px;",
+        "  }",
+        "  .cardText {",
+        "    margin-bottom: 30px;",
+        "  }",
+        "</style>",
+        "<div class=\"fullCard\">",
+        "  <div class=\"cardContent\">",
+        "    <div class=\"cardText\">",
+        "      <strong><h4>Alphabet</h4></strong>",
+        "      <hr>",
+        "      <em><p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>",
+        "    </div>",
+        "    <div class=\"cardLinks\">",
+        "      <u>",
+        "        <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" class=\"links\">Larry Page</a><br><br>",
+        "        <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" class=\"links\">Sergey Brin</a>",
+        "      </u>",
+        "    </div>",
+        "  </div>",
+        "</div>"
+      ],
+      "tests": [
+        "assert($('h4').css('font-size') == '27px', 'message: Your code should add a <code>font-size</code> property to the <code>h4</code> element set to 27 pixels.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d781b367417b2b2512abe",
+      "title": "Add a Box-shadow to a Card-like Element",
+      "description": [
+        "The <code>box-shadow</code> property applies one or more shadows to an element. This technique can be used on any state of an element, but here you'll apply it on hover.",
+        "The <code>box-shadow</code> property takes values for <code>offset-x</code> (how far to push the shadow horizontally from the element), <code>offset-y</code> (how far to push the shadow vertically from the element), <code>blur-radius</code>, <code>spread-radius</code> and a color value, in that order. The <code>blur-radius</code> and <code>spread-radius</code> values are optional.",
+        "Here's an example of the CSS to create multiple shadows with some blur, at mostly-transparent black colors:",
+        "<blockquote>box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);</blockquote>",
+        "<h4>Instructions</h4>",
+        "Use the example CSS values above to place a <code>box-shadow</code> on the card. The element now has an id of <code>thumbnail</code>, use this selector to place the shadows for the hover state."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  h4 {",
+        "    text-align: center;",
+        "    background-color: rgba(45, 45, 45, 0.1);",
+        "    padding: 10px;",
+        "    font-size: 27px;",
+        "  }",
+        "  p {",
+        "    text-align: justify;",
+        "  }",
+        "  .links {",
+        "    text-align: left;",
+        "    color: black;",
+        "  }",
+        "  ",
+        "  ",
+        "  ",
+        "  .fullCard {",
+        "    width: 245px;",
+        "    border: 1px solid #ccc;",
+        "    border-radius: 5px;",
+        "    margin: 10px 5px;",
+        "    padding: 4px;",
+        "  }",
+        "  .cardContent {",
+        "    padding: 10px;",
+        "  }",
+        "  .cardText {",
+        "    margin-bottom: 30px;",
+        "  }",
+        "</style>",
+        "<div class=\"fullCard\" id=\"thumbnail\">",
+        "  <div class=\"cardContent\">",
+        "    <div class=\"cardText\">",
+        "      <strong><h4>Alphabet</h4></strong>",
+        "      <hr>",
+        "      <em><p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>",
+        "    </div>",
+        "    <div class=\"cardLinks\">",
+        "      <u>",
+        "        <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" class=\"links\">Larry Page</a><br><br>",
+        "        <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" class=\"links\">Sergey Brin</a>",
+        "      </u>",
+        "    </div>",
+        "  </div>",
+        "</div>"
+      ],
+      "tests": [
+        "assert(code.match(/#thumbnail:hover\\s*?{\\s*?box-shadow/g), 'message: Your code should add a <code>box-shadow</code> property for the <code>thumbnail</code> id on its hover state.');",
+        "assert(code.match(/box-shadow:\\s*?0\\s+?10px\\s+?20px\\s+?rgba\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0?\\.19\\),\\s*?0\\s+?6px\\s+?6px\\s+?rgba\\(\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0\\s*?,\\s*?0?\\.23\\)/gi), 'message: You should use the given CSS for the <code>box-shadow</code> value.');"
+      ],
+      "solutions": [],
+      "hints": [
+        "Remember to use the appropriate pseudo-class selector to place the box-shadows only on the hover state."
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d781c367417b2b2512abf",
+      "title": "Decrease the Opacity of an Element",
+      "description": [
+        "The <code>opacity</code> property in CSS is used to adjust the opacity, or conversely, the transparency for an item.",
+        "<blockquote>A value of 1 is opaque, which isn't transparent at all.<br>A value of 0.5 is half see-through.<br>A value of 0 is completely transparent.</blockquote>",
+        "The value given will apply to the entire element, whether that's an image with some transparency, or the foreground and background colors for a block of text.",
+        "<h4>Instructions</h4>",
+        "Set the <code>opacity</code> of the anchor tags to 0.7 using <code>links</code> class to select them."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  h4 {",
+        "    text-align: center;",
+        "    background-color: rgba(45, 45, 45, 0.1);",
+        "    padding: 10px;",
+        "    font-size: 27px;",
+        "  }",
+        "  p {",
+        "    text-align: justify;",
+        "  }",
+        "  .links {",
+        "    text-align: left;",
+        "    color: black;",
+        "    ",
+        "  }",
+        "  #thumbnail:hover {",
+        "    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);",
+        "  }",
+        "  .fullCard {",
+        "    width: 245px;",
+        "    border: 1px solid #ccc;",
+        "    border-radius: 5px;",
+        "    margin: 10px 5px;",
+        "    padding: 4px;",
+        "  }",
+        "  .cardContent {",
+        "    padding: 10px;",
+        "  }",
+        "  .cardText {",
+        "    margin-bottom: 30px;",
+        "  }",
+        "</style>",
+        "<div class=\"fullCard\" id=\"thumbnail\">",
+        "  <div class=\"cardContent\">",
+        "    <div class=\"cardText\">",
+        "      <strong><h4>Alphabet</h4></strong>",
+        "      <hr>",
+        "      <em><p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>",
+        "    </div>",
+        "    <div class=\"cardLinks\">",
+        "      <u>",
+        "        <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" class=\"links\">Larry Page</a><br><br>",
+        "        <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" class=\"links\">Sergey Brin</a>",
+        "      </u>",
+        "    </div>",
+        "  </div>",
+        "</div>"
+      ],
+      "tests": [
+        "assert($('.links').css('opacity') == '0.7', 'message: Your code should set the <code>opacity</code> property to 0.7 on the anchor tags by selecting the class of <code>links</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d781c367417b2b2512ac0",
+      "title": "Use the Text-transform Property to Make Text Uppercase",
+      "description": [
+        "The <code>text-transform</code> property in CSS is used to set text to uppercase.",
+        "<strong>Note</strong><br>Other values for this property are lowercase, capitalize (transforms the first letter of each word to uppercase), initial (sets the property to the default value), inherit (inherits the property from parent element) and none (the default).",
+        "<h4>Instructions</h4>",
+        "Set the text inside the <code>h4</code> tag to be uppercase using the <code>text-transform</code> property."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  h4 {",
+        "    text-align: center;",
+        "    background-color: rgba(45, 45, 45, 0.1);",
+        "    padding: 10px;",
+        "    font-size: 27px;",
+        "    ",
+        "  }",
+        "  p {",
+        "    text-align: justify;",
+        "  }",
+        "  .links {",
+        "    text-align: left;",
+        "    color: black;",
+        "    opacity: 0.7;",
+        "  }",
+        "  #thumbnail:hover {",
+        "    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);",
+        "  }",
+        "  .fullCard {",
+        "    width: 245px;",
+        "    border: 1px solid #ccc;",
+        "    border-radius: 5px;",
+        "    margin: 10px 5px;",
+        "    padding: 4px;",
+        "  }",
+        "  .cardContent {",
+        "    padding: 10px;",
+        "  }",
+        "  .cardText {",
+        "    margin-bottom: 30px;",
+        "  }",
+        "</style>",
+        "<div class=\"fullCard\" id=\"thumbnail\">",
+        "  <div class=\"cardContent\">",
+        "    <div class=\"cardText\">",
+        "      <strong><h4>Alphabet</h4></strong>",
+        "      <hr>",
+        "      <em><p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>",
+        "    </div>",
+        "    <div class=\"cardLinks\">",
+        "      <u>",
+        "        <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" class=\"links\">Larry Page</a><br><br>",
+        "        <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" class=\"links\">Sergey Brin</a>",
+        "      </u>",
+        "    </div>",
+        "  </div>",
+        "</div>"
+      ],
+      "tests": [
+        "assert($('h4').css('text-transform') == 'uppercase', 'message: The <code>h4</code> text should be uppercase.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d781c367417b2b2512ac1",
+      "title": "Use a Google Font",
+      "required": [
+        {
+          "link": "https://fonts.googleapis.com/css?family=Open+Sans",
+          "raw": true
+        }
+      ],
+      "description": [
+        "<code>Google Fonts</code> is a great way to find free fonts to use in a project.",
+        "Once you have selected the preferred font, copy the link tag that is provided and insert it into the <code>head</code> of your page.",
+        "The Open Sans font is already added for you behind the scenes, but the code to include it in your own project is the following:",
+        "<code>&lt;link href=\"https://fonts.googleapis.com/css?family=Open+Sans\" rel=\"stylesheet\"&gt;</code>",
+        "Once the link is in place, the font is available to include in your CSS by using the pattern <code>font-family: 'FONT', FAMILY_NAME;</code>.",
+        "In this example, \"FONT\" would be 'Open Sans' and \"FAMILY_NAME\" would be sans-serif. The quotes around 'Open Sans' are required because it has a space in its name. Also, capitalization of the font name matters.",
+        "<h4>Instructions</h4>",
+        "Set the <code>font-family</code> of the body to \"Open Sans\"."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  body {",
+        "    ",
+        "  }",
+        "  h4 {",
+        "    text-align: center;",
+        "    background-color: rgba(45, 45, 45, 0.1);",
+        "    padding: 10px;",
+        "    font-size: 27px;",
+        "    text-transform: uppercase;",
+        "  }",
+        "  p {",
+        "    text-align: justify;",
+        "  }",
+        "  .links {",
+        "    text-align: left;",
+        "    color: black;",
+        "    opacity: 0.7;",
+        "  }",
+        "  #thumbnail:hover {",
+        "    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);",
+        "  }",
+        "  .fullCard {",
+        "    width: 245px;",
+        "    border: 1px solid #ccc;",
+        "    border-radius: 5px;",
+        "    margin: 10px 5px;",
+        "    padding: 4px;",
+        "  }",
+        "  .cardContent {",
+        "    padding: 10px;",
+        "  }",
+        "  .cardText {",
+        "    margin-bottom: 30px;",
+        "  }",
+        "</style>",
+        "<div class=\"fullCard\" id=\"thumbnail\">",
+        "  <div class=\"cardContent\">",
+        "    <div class=\"cardText\">",
+        "      <strong><h4>Alphabet</h4></strong>",
+        "      <hr>",
+        "      <em><p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p></em>",
+        "    </div>",
+        "    <div class=\"cardLinks\">",
+        "      <u>",
+        "        <a href=\"https://en.wikipedia.org/wiki/Larry_Page\" class=\"links\">Larry Page</a><br><br>",
+        "        <a href=\"https://en.wikipedia.org/wiki/Sergey_Brin\" class=\"links\">Sergey Brin</a>",
+        "      </u>",
+        "    </div>",
+        "  </div>",
+        "</div>"
+      ],
+      "tests": [
+        "assert($('body').css('font-family') == '\"Open Sans\", sans-serif', 'message: The <code>body</code> tag should have the font of \"Open Sans\".');"
+      ],
+      "solutions": [],
+      "hints": [
+        "Remember to include both the font and the family-name."
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d781c367417b2b2512ac2",
+      "title": "Set the Font-size for Multiple Heading Elements",
+      "description": [
+        "The <code>font-size</code> property is used to specify how large the text is in a given element. This rule can be used for multiple elements to create visual consistency of text on a page. In this challenge, you'll set the values for all <code>h1</code> through <code>h6</code> tags to balance the heading sizes.",
+        "<h4>Instructions</h4>",
+        "<ul>",
+        "<li>Set the <code>font-size</code> of the <code>h1</code> tag to 68px.</li>",
+        "<li>Set the <code>font-size</code> of the <code>h2</code> tag to 52px.</li>",
+        "<li>Set the <code>font-size</code> of the <code>h3</code> tag to 40px.</li>",
+        "<li>Set the <code>font-size</code> of the <code>h4</code> tag to 32px.</li>",
+        "<li>Set the <code>font-size</code> of the <code>h5</code> tag to 21px.</li>",
+        "<li>Set the <code>font-size</code> of the <code>h6</code> tag to 14px.</li>",
+        "</ul>"
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  ",
+        "  ",
+        "  ",
+        "  ",
+        "  ",
+        "  ",
+        "</style>",
+        "<h1>This is h1 text</h1>",
+        "<h2>This is h2 text</h2>",
+        "<h3>This is h3 text</h3>",
+        "<h4>This is h4 text</h4>",
+        "<h5>This is h5 text</h5>",
+        "<h6>This is h6 text</h6>"
+      ],
+      "tests": [
+        "assert($('h1').css('font-size') == '68px', 'message: Your code should set the <code>font-size</code> property for the <code>h1</code> tag to 68 pixels.');",
+        "assert($('h2').css('font-size') == '52px', 'message: Your code should set the <code>font-size</code> property for the <code>h2</code> tag to 52 pixels.');",
+        "assert($('h3').css('font-size') == '40px', 'message: Your code should set the <code>font-size</code> property for the <code>h3</code> tag to 40 pixels.');",
+        "assert($('h4').css('font-size') == '32px', 'message: Your code should set the <code>font-size</code> property for the <code>h4</code> tag to 32 pixels.');",
+        "assert($('h5').css('font-size') == '21px', 'message: Your code should set the <code>font-size</code> property for the <code>h5</code> tag to 21 pixels.');",
+        "assert($('h6').css('font-size') == '14px', 'message: Your code should set the <code>font-size</code> property for the <code>h6</code> tag to 14 pixels.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d781c367417b2b2512ac3",
+      "title": "Set the Font-weight for Multiple Heading Elements",
+      "description": [
+        "You set the <code>font-size</code> of each heading tag in the last challenge, here you'll adjust the <code>font-weight</code>.",
+        "The <code>font-weight</code> property sets how thick or thin characters are in a section of text.",
+        "<h4>Instructions</h4>",
+        "<ul>",
+        "<li>Set the <code>font-weight</code> of the <code>h1</code> tag to 800.</li>",
+        "<li>Set the <code>font-weight</code> of the <code>h2</code> tag to 600.</li>",
+        "<li>Set the <code>font-weight</code> of the <code>h3</code> tag to 500.</li>",
+        "<li>Set the <code>font-weight</code> of the <code>h4</code> tag to 400.</li>",
+        "<li>Set the <code>font-weight</code> of the <code>h5</code> tag to 300.</li>",
+        "<li>Set the <code>font-weight</code> of the <code>h6</code> tag to 200.</li>",
+        "</ul>"
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  h1 {",
+        "    font-size: 68px;",
+        "    ",
+        "  }",
+        "  h2 {",
+        "    font-size: 52px;",
+        "    ",
+        "  }",
+        "  h3 {",
+        "    font-size: 40px;",
+        "    ",
+        "  }",
+        "  h4 {",
+        "    font-size: 32px;",
+        "    ",
+        "  }",
+        "  h5 {",
+        "    font-size: 21px;",
+        "    ",
+        "  }",
+        "  h6 {",
+        "    font-size: 14px;",
+        "    ",
+        "  }",
+        "</style>",
+        "<h1>This is h1 text</h1>",
+        "<h2>This is h2 text</h2>",
+        "<h3>This is h3 text</h3>",
+        "<h4>This is h4 text</h4>",
+        "<h5>This is h5 text</h5>",
+        "<h6>This is h6 text</h6>"
+      ],
+      "tests": [
+        "assert($('h1').css('font-weight') == '800', 'message: Your code should set the <code>font-weight</code> property for the <code>h1</code> tag to 800.');",
+        "assert($('h2').css('font-weight') == '600', 'message: Your code should set the <code>font-weight</code> property for the <code>h2</code> tag to 600.');",
+        "assert($('h3').css('font-weight') == '500', 'message: Your code should set the <code>font-weight</code> property for the <code>h3</code> tag to 500.');",
+        "assert($('h4').css('font-weight') == '400', 'message: Your code should set the <code>font-weight</code> property for the <code>h4</code> tag to 400.');",
+        "assert($('h5').css('font-weight') == '300', 'message: Your code should set the <code>font-weight</code> property for the <code>h5</code> tag to 300.');",
+        "assert($('h6').css('font-weight') == '200', 'message: Your code should set the <code>font-weight</code> property for the <code>h6</code> tag to 200.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d781c367417b2b2512ac4",
+      "title": "Set the Font-size of Paragraph Text",
+      "description": [
+        "The <code>font-size</code> property in CSS is not limited to headings, it can be applied to any element containing text.",
+        "<h4>Instructions</h4>",
+        "Change the value of the <code>font-size</code> property for the paragraph to 16px to make it more visible."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  p {",
+        "    font-size: 10px;",
+        "  }",
+        "</style>",
+        "<p>",
+        "  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+        "</p>"
+      ],
+      "tests": [
+        "assert($('p').css('font-size') == '16px', 'message: Your <code>p</code> tag should have a <code>font-size</code> of 16 pixels.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d781d367417b2b2512ac5",
+      "title": "Set the Line-height of Paragraphs",
+      "description": [
+        "CSS offers the <code>line-height</code> property to change the height of each line in a block of text. As the name suggests, it changes the amount of vertical space that each line of text gets.",
+        "<h4>Instructions</h4>",
+        "Add a <code>line-height</code> property to the <code>p</code> tag and set it to 25px."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  p {",
+        "    font-size: 16px;",
+        "    ",
+        "  }",
+        "</style>",
+        "<p>",
+        "  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+        "</p>"
+      ],
+      "tests": [
+        "assert($('p').css('line-height') == '25px', 'message: Your code should set the <code>line-height</code> of the <code>p</code> tag to 25 pixels.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d781d367417b2b2512ac7",
+      "title": "Adjust the Color of an Anchor Tag",
+      "description": [
+        "You can adjust the text color of any text in an element with the <code>color</code> property.",
+        "<h4>Instructions</h4>",
+        "Change the <code>color</code> property of the anchor (<code>a</code>) tag to <code>#000</code> (black)."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  ",
+        "  ",
+        "  ",
+        "</style>",
+        "<a href=\"https://atjonathan.github.io/catphotoapp\">CatPhotoApp</a>"
+      ],
+      "tests": [
+        "assert($('a').css('color') == 'rgb(0, 0, 0)', 'message: The <code>color</code> of the anchor tag text should be black.')"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d781d367417b2b2512ac8",
+      "title": "Adjust the Hover State of an Anchor Tag",
+      "description": [
+        "Following from the previous challenge, the styling of the anchor tag can be changed for its hover state using the <code>:hover</code> pseudo-class selector.",
+        "<h4>Instructions</h4>",
+        "Change the <code>a</code> tag's CSS so when the user hovers over it, the <code>color</code> is blue and the underline is removed.",
+        "<strong>Note</strong><br>You can remove underlining of anchor tags using the <code>text-decoration</code> property set to none."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  a {",
+        "    color: #000;",
+        "  }",
+        "  ",
+        "  ",
+        "  ",
+        "</style>",
+        "<a href=\"https://atjonathan.github.io/catphotoapp\">CatPhotoApp</a>"
+      ],
+      "tests": [
+        "assert($('a').css('color') == 'rgb(0, 0, 0)', 'message: The anchor tag <code>color</code> should remain black, only add CSS rules for the <code>:hover</code> state.');",
+        "assert(code.match(/(?:a:hover\\s*?{\\s*?color:\\s*?blue;\\s*?text-decoration:\\s*?none;\\s*?}|a:hover\\s*?{\\s*?text-decoration:\\s*?none;\\s*?color:\\s*?blue;\\s*?})/gi), 'message: The anchor tag should have a <code>color</code> of blue and no underline on hover.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d781e367417b2b2512ac9",
+      "title": "Change an Element's Relative Position",
+      "description": [
+        "CSS treats each HTML element as its own box, which is usually referred to as the <code>CSS Box Model</code>. Block-level items automatically start on a new line (think headings, paragraphs, and divs) while inline items sit within surrounding content (like images or spans). The default layout of elements in this way is called the <code>normal flow</code> of a document, but CSS offers the position property to override it.",
+        "When the position of an element is set to <code>relative</code>, it allows you to specify how CSS should move it <i>relative</i> to its current position in the normal flow of the page. It pairs with the CSS offset properties of <code>left</code> or <code>right</code>, and <code>top</code> or <code>bottom</code>. These say how many pixels, percentages, or ems to move the item <i>away</i> from where it is normally positioned. The following example moves the paragraph 10 pixels away from the bottom:",
+        "<blockquote>p {<br>  position: relative;<br>  bottom: 10px;<br>}</blockquote>",
+        "Changing an element's position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position.",
+        "<strong>Note</strong><br>Positioning gives you a lot of flexibility and power over the visual layout of a page. It's good to remember that no matter the position of elements, the underlying HTML markup should be organized and make sense when read from top to bottom. This is how users with visual impairments (who rely on assistive devices like screen readers) access your content.",
+        "<h4>Instructions</h4>",
+        "Change the <code>position</code> of the <code>h2</code> to <code>relative</code>, and use a CSS offset to move it 15 pixels away from the <code>top</code> of where it sits in the normal flow. Notice there is no impact on the positions of the surrounding h1 and p elements."
+      ],
+      "challengeSeed": [
+        "  <style>",
+        "  h2 {",
+        "    ",
+        "    ",
+        "  }",
+        "  </style>",
+        "<body>",
+        "  <h1>On Being Well-Positioned</h1>",
+        "  <h2>Move me!</h2>",
+        "  <p>I still think the h2 is where it normally sits.</p>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('h2').css('position') == 'relative', 'message: The <code>h2</code> element should have a <code>position</code> property set to <code>relative</code>.');",
+        "assert($('h2').css('top') == '15px', 'message: Your code should use a CSS offset to relatively position the <code>h2</code> 15px away from the <code>top</code> of where it normally sits.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d781e367417b2b2512aca",
+      "title": "Move a Relatively Positioned Element with CSS Offsets",
+      "description": [
+        "The CSS offsets of <code>top</code> or <code>bottom</code>, and <code>left</code> or <code>right</code> tell the browser how far to offset an item relative to where it would sit in the normal flow of the document. This can be slightly confusing, because you're offsetting an element away from a given spot, which effectively moves it towards the opposite direction. As you saw in the last challenge, using the top offset moved the h2 downwards. Likewise, using a left offset effectively moves an item to the right.",
+        "<h4>Instructions</h4>",
+        "Use CSS offsets to move the <code>h2</code> 15 pixels to the right and 10 pixels up."
+      ],
+      "challengeSeed": [
+        "<head>",
+        "  <style>",
+        "  h2 {",
+        "    position: relative;",
+        "    ",
+        "    ",
+        "  }",
+        "  </style>",
+        "</head>",
+        "<body>",
+        "  <h1>On Being Well-Positioned</h1>",
+        "  <h2>Move me!</h2>",
+        "  <p>I still think the h2 is where it normally sits.</p>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('h2').css('bottom') == '10px', 'message: Your code should use a CSS offset to relatively position the <code>h2</code> 10px upwards. In other words, move it 10px away from the <code>bottom</code> of where it normally sits.');",
+        "assert($('h2').css('left') == '15px', 'message: Your code should use a CSS offset to relatively position the <code>h2</code> 15px towards the right. In other words, move it 15px away from the <code>left</code> of where it normally sits.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d781e367417b2b2512acb",
+      "title": "Lock an Element to its Parent with Absolute Positioning",
+      "description": [
+        "The next option for the CSS <code>position</code> property is <code>absolute</code>, which locks the element in place relative to its parent container. Unlike the <code>relative</code> position, this removes the element from the normal flow of the document, so surrounding items ignore it. The CSS offset properties (top or bottom and left or right) are used to adjust the position.",
+        "One nuance with absolute positioning is that it will be locked relative to its closest <em>positioned</em> ancestor. If you forget to add a position rule to the parent item, (this is typically done using <code>position: relative;</code>), the browser will keep looking up the chain and ultimately default to the body tag.",
+        "<h4>Instructions</h4>",
+        "Lock the <code>#searchbar</code> element to the top-right of its <code>section</code> parent by declaring its <code>position</code> as <code>absolute</code>. Give it <code>top</code> and <code>right</code> offsets of 0 pixels each."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  #searchbar {",
+        "    ",
+        "    ",
+        "    ",
+        "  }",
+        "  section {",
+        "    position: relative;",
+        "  }",
+        "</style>",
+        "<body>",
+        "  <h1>Welcome!</h1>",
+        "  <section>",
+        "    <form id=\"searchbar\">",
+        "      <label for=\"search\">Search:</label>",
+        "      <input type=\"search\" id=\"search\" name=\"search\">",
+        "      <input type=\"submit\" name=\"submit\" value=\"Go!\">",
+        "    </form>",
+        "  </section>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('#searchbar').css('position') == 'absolute', 'message: The <code>#searchbar</code> element should have a <code>position</code> set to <code>absolute</code>.');",
+        "assert($('#searchbar').css('top') == '0px', 'message: Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#searchbar</code> element.');",
+        "assert($('#searchbar').css('right') == '0px', 'message: Your code should use the <code>right</code> CSS offset of 0 pixels on the <code>#searchbar</code> element.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d781e367417b2b2512acc",
+      "title": "Lock an Element to the Browser Window with Fixed Positioning",
+      "description": [
+        "The next layout scheme that CSS offers is the <code>fixed</code> position, which is a type of absolute positioning that locks an element relative to the browser window. Similar to absolute positioning, it's used with the CSS offset properties and also removes the element from the normal flow of the document. Other items no longer \"realize\" where it is positioned, which may require some layout adjustments elsewhere.",
+        "One key difference from the <code>absolute</code> position is that the element won't move when the user scrolls.",
+        "<h4>Instructions</h4>",
+        "The navigation bar in the code is labeled with an id of <code>navbar</code>. Change its <code>position</code> to <code>fixed</code>, and offset it 0 pixels from the <code>top</code> and 0 pixels from the <code>left</code>. Notice the (lack of) impact to the <code>h1</code> position, it hasn't been pushed down to accommodate the navigation bar and would need to be adjusted separately."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  #navbar {",
+        "    ",
+        "    ",
+        "    ",
+        "    width: 100%;",
+        "    background-color: #767676;",
+        "  }",
+        "  nav ul {",
+        "    margin: 0px;",
+        "    padding: 5px 0px 5px 30px;",
+        "  }",
+        "  nav li {",
+        "    display: inline;",
+        "    margin-right: 20px;",
+        "  }",
+        "  a {",
+        "    text-decoration: none;",
+        "  }",
+        "</style>",
+        "<body>",
+        "  <header>",
+        "    <h1>Welcome!</h1>",
+        "    <nav id=\"navbar\">",
+        "      <ul>",
+        "        <li><a href=\"\">Home</a></li>",
+        "        <li><a href=\"\">Contact</a></li>",
+        "      </ul>",
+        "    </nav>",
+        "  </header>",
+        "  <p>I shift up when the #navbar is fixed to the browser window.</p>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('#navbar').css('position') == 'fixed', 'message: The <code>#navbar</code> element should have a <code>position</code> set to <code>fixed</code>.');",
+        "assert($('#navbar').css('top') == '0px', 'message: Your code should use the <code>top</code> CSS offset of 0 pixels on the <code>#navbar</code> element.');",
+        "assert($('#navbar').css('left') == '0px', 'message: Your code should use the <code>left</code> CSS offset of 0 pixels on the <code>#navbar</code> element.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a3367417b2b2512ace",
+      "title": "Push Elements Left or Right with the Float Property",
+      "description": [
+        "The next positioning tool does not actually use <code>position</code>, but sets the <code>float</code> property of an element. Floating elements are removed from the normal flow of a document and pushed to either the <code>left</code> or <code>right</code> of their containing parent element. It's commonly used with the <code>width</code> property to specify how much horizontal space the floated element requires.",
+        "<h4>Instructions</h4>",
+        "The given markup would work well as a two-column layout, with the <code>section</code> and <code>aside</code> elements next to each other. Give the <code>#left</code> item a <code>float</code> of <code>left</code> and the <code>#right</code> item a <code>float</code> of <code>right</code>."
+      ],
+      "challengeSeed": [
+        "<head>",
+        "  <style>",
+        "  #left {",
+        "    ",
+        "    width: 50%;",
+        "  }",
+        "  #right {",
+        "    ",
+        "    width: 40%;",
+        "  }",
+        "  aside, section {",
+        "    padding: 2px;",
+        "    background-color: #ccc;",
+        "  }",
+        "  </style>",
+        "</head>",
+        "<body>",
+        "  <header>",
+        "    <h1>Welcome!</h1>",
+        "  </header>",
+        "  <section id=\"left\">",
+        "    <h2>Content</h2>",
+        "    <p>Good stuff</p>",
+        "  </section>",
+        "  <aside id=\"right\">",
+        "    <h2>Sidebar</h2>",
+        "    <p>Links</p>",
+        "  </aside>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('#left').css('float') == 'left', 'message: The element with id <code>left</code> should have a <code>float</code> value of <code>left</code>.');",
+        "assert($('#right').css('float') == 'right', 'message: The element with id <code>right</code> should have a <code>float</code> value of <code>right</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a3367417b2b2512acf",
+      "title": "Change the Position of Overlapping Elements with the Z-index Property",
+      "description": [
+        "When elements are positioned to overlap, the element coming later in the HTML markup will, by default, appear on the top of the other elements. However, the <code>z-index</code> property can specify the order of how elements are stacked on top of one another. It must be an integer (i.e. a whole number and not a decimal), and higher values for the <code>z-index</code> property of an element move it higher in the stack than those with lower values.",
+        "<h4>Instructions</h4>",
+        "Add a <code>z-index</code> property to the element with the class name of <code>first</code> (the red rectangle) and set it to a value of 2 so it covers the other element (blue rectangle)."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  div {",
+        "    width: 60%;",
+        "    height:200px;",
+        "    margin-top: 20px;",
+        "  }",
+        "  ",
+        "  .first {",
+        "    background-color: red;",
+        "    position: absolute;",
+        "    ",
+        "  }",
+        "  .second {",
+        "    background-color: blue;",
+        "    position: absolute;",
+        "    left: 40px;",
+        "    top: 50px;",
+        "    z-index: 1;",
+        "  }",
+        "</style>",
+        "",
+        "<div class=\"first\"></div>",
+        "<div class=\"second\"></div>"
+      ],
+      "tests": [
+        "assert($('.first').css('z-index') == '2', 'message: The element with class <code>first</code> should have a <code>z-index</code> value of 2.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a3367417b2b2512ad0",
+      "title": "Center an Element Horizontally Using Margin",
+      "description": [
+        "Another positioning technique is to center a block element horizontally. One way to do this is to set its <code>margin</code> to a value of auto.",
+        "This method works for images, too. Images are inline elements by default, but can be changed to block elements when you set the <code>display</code> property to block.",
+        "<h4>Instructions</h4>",
+        "Center the <code>div</code> on the page by adding a <code>margin</code> property with a value of auto."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  div {",
+        "    background-color: blue;",
+        "    height: 100px;",
+        "    width: 100px;",
+        "    ",
+        "  }",
+        "</style>",
+        "<div></div>"
+      ],
+      "tests": [
+        "assert(code.match(/margin:\\s*?auto;/g), 'message: The <code>div</code> should have a <code>margin</code> set to auto.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a3367417b2b2512ad1",
+      "title": "Learn about Complementary Colors",
+      "description": [
+        "Color theory and its impact on design is a deep topic and only the basics are covered in the following challenges. On a website, color can draw attention to content, evoke emotions, or create visual harmony. Using different combinations of colors can really change the look of a website, and a lot of thought can go into picking a color palette that works with your content.",
+        "The color wheel is a useful tool to visualize how colors relate to each other - it's a circle where similar hues are neighbors and different hues are farther apart. When two colors are opposite each other on the wheel, they are called complementary colors. They have the characteristic that if they are combined, they \"cancel\" each other out and create a gray color. However, when placed side-by-side, these colors appear more vibrant and produce a strong visual contrast.",
+        "Some examples of complementary colors with their hex codes are:",
+        "<blockquote>red (#FF0000) and cyan (#00FFFF)<br>green (#00FF00) and magenta (#FF00FF)<br>blue (#0000FF) and yellow (#FFFF00)</blockquote>",
+        "There are many color picking tools available online that have an option to find the complement of a color.",
+        "<strong>Note</strong><br>For all color challenges: Using color can be a powerful way to add visual interest to a page. However, color alone should not be used as the only way to convey important information because users with visual impairments may not understand that content. This issue will be covered in more detail in the Applied Accessibility challenges.",
+        "<h4>Instructions</h4>",
+        "Change the <code>background-color</code> property of the <code>blue</code> and <code>yellow</code> classes to their respective colors. Notice how the colors look different next to each other than they do compared against the white background."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  body {",
+        "    background-color: #FFFFFF;",
+        "  }",
+        "  .blue {",
+        "    background-color: #000000;",
+        "  }",
+        "  .yellow {",
+        "    background-color: #000000;",
+        "  }",
+        "  div {",
+        "    display: inline-block;",
+        "    height: 100px;",
+        "    width: 100px;",
+        "  }",
+        "</style>",
+        "<div class=\"blue\"></div>",
+        "<div class=\"yellow\"></div>"
+      ],
+      "tests": [
+        "assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'message: The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> of blue.');",
+        "assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)', 'message: The <code>div</code> element with class <code>yellow</code> should have a <code>background-color</code> of yellow.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a4367417b2b2512ad2",
+      "title": "Learn about Tertiary Colors",
+      "description": [
+        "Computer monitors and device screens create different colors by combining amounts of red, green, and blue light. This is known as the RGB additive color model in modern color theory. Red (R), green (G), and blue (B) are called primary colors. Mixing two primary colors creates the secondary colors cyan (G + B), magenta (R + B), and yellow (R + G). You saw in these colors in the Complementary Colors challenge. These secondary colors happen to be the complement to the primary color not used in their creation, and are opposite to that primary color on the color wheel. For example, magenta is made with red and blue, and is the complement to green.",
+        "Tertiary colors are the result of combining a primary color with one of its secondary color neighbors. For example, red (primary) and yellow (secondary) make orange. This adds six more colors to a simple color wheel for a total of twelve.",
+        "There are various methods of selecting different colors that result in a harmonious combination in design. One example that can use tertiary colors is called the split-complementary color scheme. It starts with a base color, then pairs it with the two colors that are adjacent to its complement. The three colors provide strong visual contrast in a design, but is more subtle than using two complementary colors.",
+        "Here are three colors using the split-complement scheme:",
+        "<blockquote>cyan (#00FFFF)<br>orange (#FF7D00)<br>raspberry (#FF007D)</blockquote>",
+        "<h4>Instructions</h4>",
+        "Change the <code>background-color</code> property of the <code>orange</code>, <code>cyan</code>, and <code>raspberry</code> classes to their respective colors. Make sure to use the hex codes because the orange and raspberry in the example above are not browser-recognized color names."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  body {",
+        "    background-color: #FFFFFF;",
+        "  }",
+        "  .orange {",
+        "    background-color: #000000;",
+        "  }",
+        "  .cyan {",
+        "    background-color: #000000;",
+        "  }",
+        "  .raspberry {",
+        "    background-color: #000000;",
+        "  }  ",
+        "  div {",
+        "    height: 100px;",
+        "    width: 100px;",
+        "    margin-bottom: 5px;",
+        "  }",
+        "</style>",
+        "<div class=\"orange\"></div>",
+        "<div class=\"cyan\"></div>",
+        "<div class=\"raspberry\"></div>"
+      ],
+      "tests": [
+        "assert($('.orange').css('background-color') == 'rgb(255, 125, 0)', 'message: The <code>div</code> element with class <code>orange</code> should have a <code>background-color</code> of orange.');",
+        "assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'message: The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.');",
+        "assert($('.raspberry').css('background-color') == 'rgb(255, 0, 125)', 'message: The <code>div</code> element with class <code>raspberry</code> should have a <code>background-color</code> of raspberry.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a4367417b2b2512ad3",
+      "title": "Adjusting the Color of Various Elements to Complementary Colors",
+      "description": [
+        "The complementary colors challenge showed that opposite colors on the color wheel can make each other appear more vibrant when placed side-by-side. However, the strong visual contrast can be jarring if it's overused on a website, and can sometimes make text harder to read if it's placed on a complementary-colored background. In practice, one of the colors is usually dominant and the complement is used to bring visual attention to certain content on the page.",
+        "<h4>Instructions</h4>",
+        "This page will use a shade of teal (<code>#09A7A1</code>) as the dominant color, and its orange (<code>#FF790E</code>) complement to visually highlight the sign-up buttons. Change the <code>background-color</code> of both the <code>header</code> and <code>footer</code> from black to the teal color. Then change the <code>h2</code> text <code>color</code> to teal as well. Finally, change the <code>background-color</code> of the <code>button</code> to the orange color."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  body {",
+        "    background-color: white;",
+        "  }",
+        "  header {",
+        "    background-color: black;",
+        "    color: white;",
+        "    padding: 0.25em;",
+        "  }",
+        "  h2 {",
+        "    color: black;",
+        "  }  ",
+        "  button {",
+        "    background-color: white;",
+        "  }",
+        "  footer {",
+        "    background-color: black;",
+        "    color: white;",
+        "    padding: 0.5em;",
+        "  }",
+        "</style>",
+        "<header>",
+        "  <h1>Cooking with FCC!</h1>",
+        "</header>",
+        "<main>",
+        "  <article>",
+        "    <h2>Machine Learning in the Kitchen</h2>",
+        "    <p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>",
+        "    <button>Sign Up</button>",
+        "  </article>",
+        "  <article>",
+        "    <h2>Bisection Vegetable Chopping</h2>",
+        "    <p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>",
+        "    <button>Sign Up</button>",
+        "  </article>",
+        "</main>",
+        "<br>",
+        "<footer>&copy;2016 FCC Kitchen</footer>"
+      ],
+      "tests": [
+        "assert($('header').css('background-color') == 'rgb(9, 167, 161)', 'message: The <code>header</code> element should have a <code>background-color</code> of #09A7A1.');",
+        "assert($('footer').css('background-color') == 'rgb(9, 167, 161)', 'message: The <code>footer</code> element should have a <code>background-color</code> of #09A7A1.');",
+        "assert($('h2').css('color') == 'rgb(9, 167, 161)', 'message: The <code>h2</code> element should have a <code>color</code> of #09A7A1.');",
+        "assert($('button').css('background-color') == 'rgb(255, 121, 14)', 'message: The <code>button</code> element should have a <code>background-color</code> of #FF790E.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a4367417b2b2512ad4",
+      "title": "Adjust the Hue of a Color",
+      "description": [
+        "Colors have several characteristics including hue, saturation, and lightness. CSS3 introduced the <code>hsl()</code> property as an alternative way to pick a color by directly stating these characteristics.",
+        "<b>Hue</b> is what people generally think of as 'color'. If you picture a spectrum of colors starting with red on the left, moving through green in the middle, and blue on right, the hue is where a color fits along this line. In hsl(), hue uses a color wheel concept instead of the spectrum, where the angle of the color on the circle is given as a value between 0 and 360.",
+        "<b>Saturation</b> is the amount of gray in a color. A fully saturated color has no gray in it, and a minimally saturated color is almost completely gray. This is given as a percentage with 100% being fully saturated.",
+        "<b>Lightness</b> is the amount of white or black in a color. A percentage is given ranging from 0% (black) to 100% (white), where 50% is the normal color.",
+        "Here are a few examples of using <code>hsl()</code> with fully-saturated, normal lightness colors:",
+        "<blockquote>/* Red */<br>hsl(0, 100%, 50%) (Red can also have a hue of 360)<br><br>/* Yellow */<br>hsl(60, 100%, 50%)<br><br>/* Green */<br>hsl(120, 100%, 50%)<br><br>/* Cyan */<br>hsl(180, 100%, 50%)<br><br>/* Blue */<br>hsl(240, 100%, 50%)<br><br>/* Magenta */<br>hsl(300, 100%, 50%)</blockquote>",
+        "<h4>Instructions</h4>",
+        "Change the <code>background-color</code> of each <code>div</code> element based on the class names (<code>green</code>, <code>cyan</code>, or <code>blue</code>) using <code>hsl()</code>. All three should have full saturation and normal lightness."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  body {",
+        "    background-color: #FFFFFF;",
+        "  }",
+        "  .green {",
+        "    background-color: #000000;",
+        "  }",
+        "  .cyan {",
+        "    background-color: #000000;",
+        "  }",
+        "  .blue {",
+        "    background-color: #000000;",
+        "  }",
+        "",
+        "  div {",
+        "    display: inline-block;",
+        "    height: 100px;",
+        "    width: 100px;",
+        "  }",
+        "</style>",
+        "<div class=\"green\"></div>",
+        "<div class=\"cyan\"></div>",
+        "<div class=\"blue\"></div>"
+      ],
+      "tests": [
+        "assert(code.match(/\\.green\\s*?{\\s*?background-color:\\s*?hsl/gi), 'message: Your code should use the <code>hsl()</code> property to declare the color green.');",
+        "assert(code.match(/\\.cyan\\s*?{\\s*?background-color:\\s*?hsl/gi), 'message: Your code should use the <code>hsl()</code> property to declare the color cyan.');",
+        "assert(code.match(/\\.blue\\s*?{\\s*?background-color:\\s*?hsl/gi), 'message: Your code should use the <code>hsl()</code> property to declare the color blue.');",
+        "assert($('.green').css('background-color') == 'rgb(0, 255, 0)', 'message: The <code>div</code> element with class <code>green</code> should have a <code>background-color</code> of green.');",
+        "assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)', 'message: The <code>div</code> element with class <code>cyan</code> should have a <code>background-color</code> of cyan.');",
+        "assert($('.blue').css('background-color') == 'rgb(0, 0, 255)', 'message: The <code>div</code> element with class <code>blue</code> should have a <code>background-color</code> blue.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a4367417b2b2512ad5",
+      "title": "Adjust the Tone of a Color",
+      "description": [
+        "The <code>hsl()</code> option in CSS also makes it easy to adjust the tone of a color. Mixing white with a pure hue creates a tint of that color, and adding black will make a shade. Alternatively, a tone is produced by adding gray or by both tinting and shading. Recall that the 's' and 'l' of <code>hsl()</code> stand for saturation and lightness, respectively. The saturation percent changes the amount of gray and the lightness percent determines how much white or black is in the color. This is useful when you have a base hue you like, but need different variations of it.",
+        "<h4>Instructions</h4>",
+        "The navigation bar on this site currently inherits its <code>background-color</code> from the <code>header</code> element. Starting with that color as a base, add a <code>background-color</code> to the <code>nav</code> element so it uses the same teal hue, but has 80% saturation and 25% lightness values to change its tone and shade."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  header {",
+        "    background-color: hsl(178, 90%, 35%);",
+        "    color: #FFFFFF;",
+        "  }",
+        "  nav {",
+        "",
+        "  }",
+        "  h1 {",
+        "    text-indent: 10px;",
+        "    padding-top: 10px;",
+        "  }",
+        "  nav ul {",
+        "    margin: 0px;",
+        "    padding: 5px 0px 5px 30px;",
+        "  }",
+        "  nav li {",
+        "    display: inline;",
+        "    margin-right: 20px;",
+        "  }",
+        "  a {",
+        "    text-decoration: none;",
+        "    color: inherit;",
+        "  }",
+        "</style>",
+        "<header>",
+        "  <h1>Cooking with FCC!</h1>",
+        "  <nav>",
+        "    <ul>",
+        "      <li><a href=\"\">Home</a></li>",
+        "      <li><a href=\"\">Classes</a></li>",
+        "      <li><a href=\"\">Contact</a></li>",
+        "    </ul>",
+        "  </nav>",
+        "</header>"
+      ],
+      "tests": [
+        "assert(code.match(/nav\\s*?{\\s*?background-color:\\s*?hsl\\(178,\\s*?80%,\\s*?25%\\)/gi), 'message: The <code>nav</code> element should have a <code>background-color</code> of the adjusted teal and make sure to use the <code>hsl()</code> property.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a5367417b2b2512ad6",
+      "title": "Create a Gradual CSS Linear Gradient",
+      "description": [
+        "Applying a color on HTML elements is not limited to one flat hue. CSS provides the ability to use color transitions, otherwise known as gradients, on elements. This is accessed through the <code>background</code> property's <code>linear-gradient()</code> function. Here is the general syntax:",
+        "<code>background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);</code>",
+        "The fist argument specifies the direction from which color transition starts - it can be stated as a degree, where 90deg makes a vertical gradient and 45deg is angled like a backslash. The following arguments specify the order of colors used in the gradient.",
+        "Example:",
+        "<code>background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));</code>",
+        "<h4>Instructions</h4>",
+        "Use a <code>linear-gradient()</code> for the <code>div</code> element's <code>background</code>, and set it from a direction of 35 degrees to change the color from <code>#CCFFFF</code> to <code>#FFCCCC</code>."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "",
+        "  div{ ",
+        "    border-radius: 20px;",
+        "    width: 70%;",
+        "    height: 400px;",
+        "    margin:  50 auto;",
+        "    ",
+        "  }",
+        "",
+        "</style>",
+        "",
+        "<div></div>"
+      ],
+      "tests": [
+        "assert(code.match(/background:\\s*?linear-gradient\\(35deg,\\s*?#CCFFFF,\\s*?#FFCCCC\\);/gi), 'message: The <code>div</code> element should have a <code>linear-gradient</code> <code>background</code> with the specified direction and colors.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a5367417b2b2512ad7",
+      "title": "Use a CSS Linear Gradient to Create a Striped Element",
+      "description": [
+        "The <code>repeating-linear-gradient()</code> function is very similar to <code>linear-gradient()</code> with the major difference that it repeats the specified gradient pattern. <code>repeating-linear-gradient()</code> accepts a variety of values, but for simplicity, you'll work with an angle value and color stop values in this challenge.",
+        "The angle value is the direction of the gradient. Color stops are like width values that mark where a transition takes place, and are given with a percentage or a number of pixels.",
+        "In the example demonstrated in the code editor, the gradient starts with the color <code>yellow</code> at 0 pixels which blends into the second color <code>blue</code> at 40 pixels away from the start. Since the next color stop is also at 40 pixels, the gradient immediately changes to the third color <code>green</code>, which itself blends into the fourth color value <code>red</code> as that is 80 pixels away from the beginning of the gradient.",
+        "For this example, it helps to think about the color stops as pairs where every two colors blend together.",
+        "<code>0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px</code>",
+        "If every two color stop values are the same color, the blending isn't noticeable because it's between the same color, followed by a hard transition to the next color, so you end up with stripes.",
+        "<h4>Instructions</h4>",
+        "Make stripes by changing the <code>repeating-linear-gradient()</code> to use a gradient angle of <code>45deg</code>, then set the first two color stops to <code>yellow</code>, and finally the second two color stops to <code>black</code>."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "",
+        "  div{ ",
+        "    border-radius: 20px;",
+        "    width: 70%;",
+        "    height: 400px;",
+        "    margin:  50 auto;",
+        "    background: repeating-linear-gradient(",
+        "      90deg,",
+        "      yellow 0px,",
+        "      blue 40px,",
+        "      green 40px,",
+        "      red 80px",
+        "    );",
+        "  }",
+        "",
+        "</style>",
+        "",
+        "<div></div>"
+      ],
+      "tests": [
+        "assert(code.match(/background:\\s*?repeating-linear-gradient\\(\\s*?45deg/gi), 'message: The angle of the <code>repeating-linear-gradient()</code> should be 45deg.');",
+        "assert(!code.match(/90deg/gi), 'message: The angle of the <code>repeating-linear-gradient()</code> should no longer be 90deg');",
+        "assert(code.match(/yellow\\s+?0px/gi), 'message: The color stop at 0 pixels should be <code>yellow</code>.');",
+        "assert(code.match(/yellow\\s+?40px/gi), 'message: One color stop at 40 pixels should be <code>yellow</code>.');",
+        "assert(code.match(/yellow\\s+?40px,\\s*?black\\s+?40px/gi), 'message: The second color stop at 40 pixels should be <code>black</code>.');",
+        "assert(code.match(/black\\s+?80px/gi), 'message: The last color stop at 80 pixels should be <code>black</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a5367417b2b2512ad8",
+      "title": "Create Texture by Adding a Subtle Pattern as a Background Image",
+      "description": [
+        "One way to add texture and interest to a background and have it stand out more is to add a subtle pattern. The key is balance, as you don't want the background to stand out too much, and take away from the foreground. The <code>background</code> property supports the <code>url()</code> function in order to link to an image of the chosen texture or pattern. The link address is wrapped in quotes inside the parentheses.",
+        "<h4>Instructions</h4>",
+        "Using the url of <code>https://i.imgur.com/MJAkxbh.png</code>, set the <code>background</code> of the whole page with the <code>body</code> selector."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  body {",
+        "    ",
+        "  }",
+        "</style>"
+      ],
+      "tests": [
+        "assert(code.match(/background:\\s*?url\\((\"|')https:\\/\\/i\\.imgur\\.com\\/MJAkxbh\\.png(\"|')\\)/gi), 'message: Your <code>body</code> element should have a <code>background</code> property set to a <code>url()</code> with the given link.');"
+      ],
+      "solutions": [],
+      "hints": [
+        "Remember to wrap the address in quotes within the url() function."
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a5367417b2b2512ad9",
+      "title": "Use the CSS Transform Scale Property to Change the Size of an Element",
+      "description": [
+        "To change the scale of an element, CSS has the <code>transform</code> property, along with its <code>scale()</code> function. The following code example doubles the size of all the paragraph elements on the page:",
+        "<blockquote>p {<br>  transform:scale(2);<br>}</blockquote>",
+        "<h4>Instructions</h4>",
+        "Increase the size of the element with the id of <code>ball2</code> to 1.5 times its original size."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  .ball { ",
+        "    width: 40px;",
+        "    height: 40px;",
+        "    margin: 50 auto;",
+        "    position: fixed;",
+        "    background: linear-gradient(",
+        "    35deg,",
+        "    #ccffff,",
+        "    #ffcccc",
+        "  );       ",
+        "    border-radius: 50%;",
+        "  }",
+        "  #ball1 {",
+        "    left:20%;",
+        "  }",
+        "  #ball2 {",
+        "    left:65%;",
+        "    ",
+        "    ",
+        "  }",
+        "",
+        "",
+        "</style>",
+        "",
+        "<div class=\"ball\" id= \"ball1\"></div>",
+        "<div class=\"ball\" id= \"ball2\"></div>"
+      ],
+      "tests": [
+        "assert(code.match(/#ball2\\s*?{\\s*?left:\\s*?65%;\\s*?transform:\\s*?scale\\(1\\.5\\);/gi), 'message: Set the <code>transform</code> property for <code>#ball2</code> to scale it 1.5 times its size.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a5367417b2b2512ada",
+      "title": "Use the CSS Transform Property to Scale an Element on Hover",
+      "description": [
+        "The <code>transform</code> property has a verity of functions that lets you scale, move, rotate, skew, etc., your elements. When used with pseudo-classes such as <code>:hover</code> that specify a certain state of an element, the <code>transform</code> property can easily add interactivity to your elements.",
+        "Here's an example to scale the paragraph elements to 2.1 times their original size when a user hovers over them:",
+        "<blockquote>p:hover {<br>  transform: scale(2.1);}<br>}</blockquote>",
+        "<h4>Instructions</h4>",
+        "Add a CSS rule for the <code>hover</code> state of the <code>div</code> and use the <code>transform</code> property to scale the <code>div</code> element to 1.1 times its original size when a user hovers over it."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  div { ",
+        "    width: 70%;",
+        "    height: 100px;",
+        "    margin:  50px auto;",
+        "    background: linear-gradient(",
+        "      53deg,",
+        "      #ccfffc,",
+        "      #ffcccf",
+        "    );",
+        "  }",
+        "  ",
+        "  ",
+        "  ",
+        "</style>",
+        "",
+        "<div></div>"
+      ],
+      "tests": [
+        "assert(code.match(/div:hover\\s*?{\\s*?transform:\\s*?scale\\(1\\.1\\);/gi), 'message: The size of the <code>div</code> element should scale 1.1 times when the user hovers over it.');"
+      ],
+      "solutions": [],
+      "hints": [
+        "Make sure to apply the CSS rule to the hover state of the div, using div:hover"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a6367417b2b2512adb",
+      "title": "Use the CSS Transform Property SkewX",
+      "description": [
+        "The next function of the <code>transform</code> property is <code>skewX()</code>, which skews the selected element along its X (horizontal) axis by a given degree.",
+        "The following code skews the paragraph element by -32 degrees along the X axis.",
+        "<blockquote>p {<br>  transform: skewX(-32deg);<br>}</blockquote>",
+        "<h4>Instructions</h4>",
+        "Skew the element with the id of <code>bottom</code> by 24 degrees along the X axis by using the <code>transform</code> property."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  div { ",
+        "    width: 70%;",
+        "    height: 100px;",
+        "    margin:  50px auto;",
+        "  }",
+        "  #top {",
+        "    background-color: red;",
+        "  }",
+        "  #bottom {",
+        "    background-color: blue;",
+        "    ",
+        "    ",
+        "  }",
+        "</style>",
+        "",
+        "<div id=\"top\"></div>",
+        "<div id=\"bottom\"></div>"
+      ],
+      "tests": [
+        "assert(code.match(/#bottom\\s*?{\\s*?.*?\\s*?transform:\\s*?skewX\\(24deg\\);/g), 'message: The element with id <code>bottom</code> should be skewed by 24 degrees along its X axis.');"
+      ],
+      "solutions": [],
+      "hints": [
+        "Notice that there is no space between the number and \"deg\" (-32deg) when declaring the degrees value."
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a6367417b2b2512adc",
+      "title": "Use the CSS Transform Property SkewY",
+      "description": [
+        "Given that the <code>skewX()</code> function skews the selected element along the X axis by a given degree, it is no surprise that the <code>skewY()</code> property skews an element along the Y (vertical) axis.",
+        "<h4>Instructions</h4>",
+        "Skew the element with the id of <code>top</code> -10 degrees along the Y axis by using the <code>transform</code> property."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  div { ",
+        "    width: 70%;",
+        "    height: 100px;",
+        "    margin:  50px auto;",
+        "  }",
+        "  #top {",
+        "    background-color: red;",
+        "    ",
+        "    ",
+        "  }",
+        "  #bottom {",
+        "    background-color: blue;",
+        "    transform: skewX(24deg);",
+        "  }",
+        "</style>",
+        "",
+        "<div id=\"top\"></div>",
+        "<div id=\"bottom\"></div>"
+      ],
+      "tests": [
+        "assert(code.match(/#top\\s*?{\\s*?.*?\\s*?transform:\\s*?skewY\\(-10deg\\);/g), 'message: The element with id <code>top</code> should be skewed by -10 degrees along its Y axis.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a6367417b2b2512add",
+      "title": "Create a Graphic Using CSS",
+      "description": [
+        "By manipulating different selectors and properties, you can make interesting shapes. One of the easier ones to try is a crescent moon shape. For this challenge you need to work with the <code>box-shadow</code> property that sets the shadow of an element, along with the <code>border-radius</code> property that controls the roundness of the element's corners.",
+        "You will create a round, transparent object with a crisp shadow that is slightly offset to the side - the shadow is actually going to be the moon shape you see.",
+        "In order to create a round object, the <code>border-radius</code> property should be set to a value of 50%.",
+        "You may recall from an earlier challenge that the <code>box-shadow</code> property takes values for <code>offset-x</code>, <code>offset-y</code>, <code>blur-radius</code>, <code>spread-radius</code> and a color value in that order. The <code>blur-radius</code> and <code>spread-radius</code> values are optional.",
+        "<h4>Instructions</h4>",
+        "Manipulate the square element in the editor to create the moon shape. First, change the <code>background-color</code> to transparent, then set the <code>border-radius</code> property to 50% to make the circular shape. Finally, change the <code>box-shadow</code> property to set the <code>offset-x</code> to 25px, the <code>offset-y</code> to 10px, <code>blur-radius</code> to 0, <code>spread-radius</code> to 0, and color to blue."
+      ],
+      "challengeSeed": [
+        "<style>",
+        ".center",
+        "{",
+        "  position: absolute;",
+        "  margin: auto;",
+        "  top: 0;",
+        "  right: 0;",
+        "  bottom: 0;",
+        "  left: 0;",
+        "  width: 100px;",
+        "  height: 100px;",
+        "  ",
+        "  background-color: blue;",
+        "  border-radius: 0px;",
+        "  box-shadow: 25px 10px 10px 10px green; ",
+        "}",
+        "",
+        "</style>",
+        "<div class=\"center\"></div>"
+      ],
+      "tests": [
+        "assert(code.match(/background-color:\\s*?transparent;/gi), 'message: The value of the <code>background-color</code> property should be set to <code>transparent</code>.');",
+        "assert(code.match(/border-radius:\\s*?50%;/gi), 'message: The value of the <code>border-radius</code> property should be set to <code>50%</code>.');",
+        "assert(code.match(/box-shadow:\\s*?25px\\s+?10px\\s+?0(px)?\\s+?0(px)?\\s+?blue\\s*?;/gi), 'message: The value of the <code>box-shadow</code> property should be set to 25px for <code>offset-x</code>, 10px for <code>offset-y</code>, 0 for <code>blur-radius</code>, 0 for <code>spread-radius</code>, and finally blue for the color.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a6367417b2b2512ade",
+      "title": "Create a More Complex Shape Using CSS and HTML",
+      "description": [
+        "One of the most popular shapes in the world is the heart shape and this challenge creates it with raw CSS. But first, you need to understand the <code>:before</code> and <code>:after</code> selectors. These selectors are used to add something before or after a selected element. In the following example, a <code>:before</code> selector is used to add a rectangle to an element with the class <code>heart</code>:",
+        "<blockquote>.heart:before {<br>  content: \"\";<br>  background-color: yellow;<br>  border-radius: 25%;<br>  position: absolute;<br>  height: 50px;<br>  width: 70px;<br>  top: -50px;<br>  left: 5px;<br>}</blockquote>",
+        "For the <code>:before</code> and <code>:after</code> selectors to function properly, they must have a defined <code>content</code> property. It usually has content such as a photo or text. When the <code>:before</code> and <code>:after</code> selectors add shapes, the <code>content</code> property is still required, but it's set to an empty string.",
+        "In the above example, the element with the class of <code>heart</code> has a <code>:before</code> selector that produces a yellow rectangle with <code>height</code> and <code>width</code> of 50px and 70px, respectively. This rectangle has round corners due to its 25% border radius and is positioned absolutely at 5px from the <code>left</code> and 50px above the <code>top</code> of the element.",
+        "<h4>Instructions</h4>",
+        "Transform the element on the screen to a heart. In the <code>heart:after</code> selector, change the <code>background-color</code> to pink and the <code>border-radius</code> to 50%.",
+        "Next, target the element with the class <code>heart</code> (just <code>heart</code>) and fill in the <code>transform</code> property. Use the <code>rotate()</code> function with -45 degrees. (<code>rotate()</code> works the same way that <code>skewX()</code> and <code>skewY()</code> do).",
+        "Finally, in the <code>heart:before</code> selector, set its <code>content</code> property to an empty string."
+      ],
+      "challengeSeed": [
+        "<style>",
+        ".heart {",
+        "  position: absolute;",
+        "  margin: auto;",
+        "  top: 0;",
+        "  right: 0;",
+        "  bottom: 0;",
+        "  left: 0;",
+        "  background-color: pink;",
+        "  height: 50px;",
+        "  width: 50px;",
+        "  transform: ;",
+        "}",
+        ".heart:after {",
+        "  background-color: blue;",
+        "  content: \"\";",
+        "  border-radius: 25%;",
+        "  position: absolute;",
+        "  width: 50px;",
+        "  height: 50px;",
+        "  top: 0px;",
+        "  left: 25px;",
+        "}",
+        ".heart:before {",
+        "  content: ;",
+        "  background-color: pink;",
+        "  border-radius: 50%;",
+        "  position: absolute;",
+        "  width: 50px;",
+        "  height: 50px;",
+        "  top: -25px;",
+        "  left: 0px;",
+        "}",
+        "</style>",
+        "<div class = \"heart\"></div>"
+      ],
+      "tests": [
+        "assert(code.match(/\\.heart:after\\s*?{\\s*?background-color:\\s*?pink;/gi), 'message: The <code>background-color</code> property of the <code>heart:after</code> selector should be pink.');",
+        "assert(code.match(/border-radius:\\s*?50%/gi).length == 2, 'message: The <code>border-radius</code> of the <code>heart:after</code> selector should be 50%.');",
+        "assert(code.match(/transform:\\s*?rotate\\(-45deg\\)/gi), 'message: The <code>transform</code> property for the <code>heart</code> class should use a <code>rotate()</code> function set to -45 degrees.');",
+        "assert(code.match(/\\.heart:before\\s*?{\\s*?content:\\s*?(\"|')\\1;/gi), 'message: The <code>content</code> of the <code>heart:before</code> selector should be an empty string.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a7367417b2b2512adf",
+      "title": "Learn How CSS Keyframes and Animation Properties Work",
+      "description": [
+        "To animate an element, you need to know about the animation properties and the <code>@keyframes</code> rule. The animation properties control how the animation should behave and the <code>@keyframes</code> rule controls what happens during that animation. There are eight animation properties in total, this challenge will keep it simple and cover the two most important ones first:",
+        "<code>animation-name</code> sets the name of the animation, which is later used by <code>@keyframes</code> to tell CSS which rules go with which animations.",
+        "<code>animation-duration</code> sets the length of time for the animation.",
+        "<code>@keyframes</code> is how to specify exactly what happens within the animation over the duration. This is done by giving CSS properties for specific \"frames\" during the animation, with percentages ranging from 0% to 100%. If you compare this to a movie, the CSS properties for 0% is how the element displays in the opening scene. The CSS properties for 100% is how the element appears at the end, right before the credits roll. Then CSS applies the magic to transition the element over the given duration to act out the scene. Here's an example to illustrate the usage of <code>@keyframes</code> and the animate properties:",
+        "<blockquote>#anim {<br>  animation-name: colorful;<br>  animation-duration: 3s;<br>}<br>@keyframes colorful {<br>  0% {<br>   background-color: blue;<br>  }<br>  100% {<br>    background-color: yellow;<br>  }<br>}</blockquote>",
+        "For the element with the <code>anim</code> id, the code snippet above sets the <code>animation-name</code> to <code>colorful</code> and sets the <code>animation-duration</code> to 3 seconds. Then the <code>@keyframes</code> rule links to the animation properties with the name <code>colorful</code>. It sets the color to blue at the beginning of the animation (0%) which will transition to yellow by the end of the animation (100%). You aren't limited to only beginning-end transitions, you can set properties for the element for any percentage between 0% and 100%.",
+        "<h4>Instructions</h4>",
+        "Create an animation for the element with the id <code>rect</code>, by setting the <code>animation-name</code> to rainbow and the <code>animation-duration</code> to 4 seconds. Next, declare a <code>@keyframes</code> rule, and set the <code>background-color</code> at the beginning of the animation (<code>0%</code>) to blue, the middle of the animation (<code>50%</code>) to green, and the end of the animation (<code>100%</code>) to yellow."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  div{",
+        "    height:40px;",
+        "    width: 70%;",
+        "    background:black;",
+        "    margin: 50 auto;",
+        "    border-radius: 5px;",
+        "  }",
+        "",
+        "  #rect {",
+        "    ",
+        "    ",
+        "  }",
+        "  ",
+        "  ",
+        "  ",
+        "  ",
+        "</style>",
+        "<div id=\"rect\"></div>"
+      ],
+      "tests": [
+        "assert($('#rect').css('animation-name') == 'rainbow', 'message: The element with id of <code>rect</code> should have an <code>animation-name</code> property with a value of rainbow.');",
+        "assert($('#rect').css('animation-duration') == '4s', 'message: The element with id of <code>rect</code> should have an <code>animation-duration</code> property with a value of 4s.');",
+        "assert(code.match(/@keyframes\\s+?rainbow\\s*?{/g), 'message: The <code>@keyframes</code> rule should use the <code>animation-name</code> of rainbow.');",
+        "assert(code.match(/0%\\s*?{\\s*?background-color:\\s*?blue;\\s*?}/gi), 'message: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of blue at 0%.');",
+        "assert(code.match(/50%\\s*?{\\s*?background-color:\\s*?green;\\s*?}/gi), 'message: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of green at 50%.');",
+        "assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?yellow;\\s*?}/gi), 'message: The <code>@keyframes</code> rule for rainbow should use a <code>background-color</code> of yellow at 100%.');"
+      ],
+      "solutions": [],
+      "hints": [
+        "Make sure the @keyframes rule links to the animation-name."
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a7367417b2b2512ae0",
+      "title": "Use CSS Animation to Change the Hover State of a Button",
+      "description": [
+        "You can use CSS <code>@keyframes</code> to change the color of a button in its hover state.",
+        "Here's an example of changing the height of an image on hover:",
+        "<blockquote>&lt;style&gt;<br>  img:hover {<br>    animation-name: width;<br>    animation-duration: 4s;<br>  }<br>  @keyframes width {<br>    100% {<br>      width: 40px;<br>    }<br>  }<br>&lt;/style&gt;<br>&lt;img src=&quot;https://bit.ly/smallgooglelogo&quot; alt=&quot;Google's Logo&quot; /&gt;</blockquote>",
+        "<h4>Instructions</h4>",
+        "Use CSS <code>@keyframes</code> to change the <code>background-color</code> of the <code>button</code> element so it becomes <code>#4791d0</code> when a user hovers over it. The <code>@keyframes</code> rule should only have an entry for <code>100%</code>."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  button {",
+        "    border-radius: 5px;",
+        "    color: white;",
+        "    background-color: #0F5897;",
+        "    padding: 5px 10px 8px 10px;",
+        "  }",
+        "  button:hover {",
+        "    animation-name: background-color;",
+        "    animation-duration: 4s;",
+        "  }",
+        "  ",
+        "  ",
+        "</style>",
+        "<button>Register</button>"
+      ],
+      "tests": [
+        "assert(code.match(/@keyframes\\s+?background-color\\s*?{/g), 'message: The @keyframes rule should use the <code>animation-name</code> background-color.');",
+        "assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?#4791d0;\\s*?}/gi), 'message: There should be one rule under <code>@keyframes</code> that changes the <code>background-color</code> to <code>#4791d0</code> at 100%.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a7367417b2b2512ae1",
+      "title": "Create Movement Using CSS Animation",
+      "description": [
+        "When elements have a specified <code>position</code>, such as <code>fixed</code> or <code>relative</code>, the CSS offset properties <code>right</code>, <code>left</code>, <code>top</code>, and <code>bottom</code> can be used in animation rules to create movement.",
+        "As shown in the example below, you can push the item downwards then upwards by setting the <code>top</code> property of the <code>50%</code> keyframe to 50px, but having it set to 0px for the first (<code>0%</code>) and the last (<code>100%</code>) keyframe.",
+        "<blockquote>@keyframes rainbow {<br>  0% {<br>    background-color: blue;<br>    top: 0px;<br>  }<br>  50% {<br>    background-color: green;<br>    top: 50px;<br>  }<br>  100% {<br>    background-color: yellow;<br>    top: 0px;<br>  }<br>}</blockquote>",
+        "<h4>Instructions</h4>",
+        "Add a horizontal motion to the <code>div</code> animation. Using the <code>left</code> offset property, add to the <code>@keyframes</code> rule so rainbow starts at 0 pixels at <code>0%</code>, moves to 25 pixels at <code>50%</code>, and ends at -25 pixels at <code>100%</code>."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  div{",
+        "    height:40px;",
+        "    width: 70%;",
+        "    background:black;",
+        "    margin: 50 auto;",
+        "    border-radius: 5px;",
+        "    position: relative;",
+        "  }",
+        "",
+        "#rect {",
+        "  animation-name: rainbow;",
+        "  animation-duration: 4s;",
+        "}",
+        "",
+        "@keyframes rainbow {",
+        "  0% {",
+        "    background-color: blue;",
+        "    top: 0px;",
+        "    ",
+        "  }",
+        "  50% {",
+        "    background-color: green;",
+        "    top: 50px;",
+        "    ",
+        "  }",
+        "  100% {",
+        "    background-color: yellow;",
+        "    top: 0px;",
+        "    ",
+        "  }",
+        "}",
+        "</style>",
+        "",
+        "<div id=\"rect\"></div>"
+      ],
+      "tests": [
+        "assert(code.match(/0%\\s*?{\\s*?background-color:\\s*?blue;\\s*?top:\\s*?0px;\\s*?left:\\s*?0px;\\s*?}/gi), 'message: The <code>@keyframes</code> rule for <code>0%</code> should use the <code>left</code> offset of 0px.');",
+        "assert(code.match(/50%\\s*?{\\s*?background-color:\\s*?green;\\s*?top:\\s*?50px;\\s*?left:\\s*?25px;\\s*?}/gi), 'message: The <code>@keyframes</code> rule for <code>50%</code> should use the <code>left</code> offset of 25px.');",
+        "assert(code.match(/100%\\s*?{\\s*?background-color:\\s*?yellow;\\s*?top:\\s*?0px;\\s*?left:\\s*?-25px;\\s*?}/gi), 'message: The <code>@keyframes</code> rule for <code>100%</code> should use the <code>left</code> offset of -25px.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a7367417b2b2512ae2",
+      "title": "Create Visual Direction by Fading an Element from Left to Right",
+      "description": [
+        "For this challenge, you'll change the <code>opacity</code> of an animated element so it gradually fades as it reaches the right side of the screen.",
+        "In the displayed animation, the round element with the gradient background moves to the right by the 50% mark of the animation per the <code>@keyframes</code> rule.",
+        "<h4>Instructions</h4>",
+        "Target the element with the id of <code>ball</code> and add the <code>opacity</code> property set to 0.1 at <code>50%</code> so the element fades as it moves to the right."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "",
+        "  #ball {",
+        "    width: 70px;",
+        "    height: 70px;",
+        "    margin: 50 auto;",
+        "    position: fixed;",
+        "    left:20%;",
+        "    border-radius: 50%;",
+        "    background: linear-gradient(",
+        "      35deg,",
+        "      #ccffff,",
+        "      #ffcccc",
+        "    );",
+        "  animation-name: fade;",
+        "  animation-duration: 3s;",
+        "  }",
+        "",
+        "  @keyframes fade {",
+        "    50% {",
+        "      left:60%;",
+        "      ",
+        "    }",
+        "  }",
+        "",
+        "</style>",
+        "",
+        "<div id=\"ball\"></div>"
+      ],
+      "tests": [
+        "assert(code.match(/opacity:\\s*?0?\\.1;/gi), 'message: The <code>keyframes</code> rule for fade should set the <code>opacity</code> property to 0.1 at 50%.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a8367417b2b2512ae3",
+      "title": "Animate Elements Continually Using an Infinite Animation Count",
+      "description": [
+        "The previous challenges covered how to use some of the animation properties and the <code>@keyframes</code> rule. Another animation property is the <code>animation-iteration-count</code>, which allows you to control how many times you would like to loop through the animation. Here's an example:",
+        "<code>animation-iteration-count: 3;</code>",
+        "The above animation will stop after running 3 times, but it's possible to make the animation run continuously by setting that value to infinite.",
+        "<h4>Instructions</h4>",
+        "To keep the ball bouncing on the right on a continuous loop, change the <code>animation-iteration-count</code> property to infinite."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "",
+        "  #ball {",
+        "    width: 100px;",
+        "    height: 100px;",
+        "    margin: 50 auto;",
+        "    position: relative;",
+        "    border-radius: 50%;",
+        "    background: linear-gradient(",
+        "      35deg,",
+        "      #ccffff,",
+        "      #ffcccc",
+        "    );",
+        "    animation-name: bounce;",
+        "    animation-duration: 1s;",
+        "    animation-iteration-count: 3;",
+        "  }",
+        "",
+        "  @keyframes bounce{",
+        "    0% {",
+        "      top:0px;",
+        "    }",
+        "    50% {",
+        "      top:249px;",
+        "      width: 130px;",
+        "      height: 70px;",
+        "    }",
+        "    100% {",
+        "      top:0px;",
+        "    }",
+        "  }",
+        "</style>",
+        "<div id=\"ball\"></div>"
+      ],
+      "tests": [
+        "assert($('#ball').css('animation-iteration-count') == 'infinite', 'message: The <code>animation-iteration-count</code> property should have a value of infinite.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a8367417b2b2512ae4",
+      "title": "Make a CSS Heartbeat using an Infinite Animation Count",
+      "description": [
+        "Here's one more continuous animation example with the <code>animation-iteration-count</code> property that uses the heart you designed in a previous challenge.",
+        "The one second long heartbeat animation consists of two animated pieces. The <code>heart</code> elements (including the <code>:before</code> and <code>:after</code> pieces) are animated to change size using the <code>transform</code> property, and the background <code>div</code> is animated to change its color using the <code>background</code> property.",
+        "<h4>Instructions</h4>",
+        "Keep the heart beating by adding the <code>animation-iteration-count</code> property for both the <code>back</code> class and the <code>heart</code> class and setting the value to infinite. The <code>heart:before</code> and <code>heart:after</code> selectors do not need any animation properties."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  .back {",
+        "    position:fixed;",
+        "    padding:0;",
+        "    margin:0;",
+        "    top:0;",
+        "    left:0;",
+        "    width: 100%;",
+        "    height: 100%;",
+        "    background:white;",
+        "    animation-name: backdiv;",
+        "    animation-duration: 1s; ",
+        "    ",
+        "  }",
+        "",
+        "  .heart {",
+        "    position: absolute;",
+        "    margin: auto;",
+        "    top: 0;",
+        "    right: 0;",
+        "    bottom: 0;",
+        "    left: 0;",
+        "    background-color: pink;",
+        "    height: 50px;",
+        "    width: 50px;",
+        "    transform: rotate(-45deg);",
+        "    animation-name: beat;",
+        "    animation-duration: 1s;",
+        "    ",
+        "  }",
+        "  .heart:after {",
+        "    background-color: pink;",
+        "    content: \"\";",
+        "    border-radius: 50%;",
+        "    position: absolute;",
+        "    width: 50px;",
+        "    height: 50px;",
+        "    top: 0px;",
+        "    left: 25px;",
+        "  }",
+        "  .heart:before {",
+        "    background-color: pink;",
+        "    content: \"\";",
+        "    border-radius: 50%;",
+        "    position: absolute;",
+        "    width: 50px;",
+        "    height: 50px;",
+        "    top: -25px;",
+        "    left: 0px;",
+        "  }",
+        "",
+        "  @keyframes backdiv {",
+        "    50% {",
+        "      background:#ffe6f2;",
+        "    }",
+        "  }",
+        "",
+        "  @keyframes beat {",
+        "    0% {",
+        "      transform: scale(1) rotate(-45deg);",
+        "    }",
+        "    50% {",
+        "      transform: scale(.6) rotate(-45deg);",
+        "    }",
+        "  }",
+        "",
+        "</style>",
+        "<div class=\"back\"></div>",
+        "<div class=\"heart\"></div>"
+      ],
+      "tests": [
+        "assert($('.heart').css('animation-iteration-count') == 'infinite', 'message: The <code>animation-iteration-count</code> property for the <code>heart</code> class should have a value of infinite.');",
+        "assert($('.back').css('animation-iteration-count') == 'infinite', 'message: The <code>animation-iteration-count</code> property for the <code>back</code> class should have a value of infinite.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a8367417b2b2512ae5",
+      "title": "Animate Elements at Variable Rates",
+      "description": [
+        "There are a variety of ways to alter the animation rates of similarly animated elements. So far, this has been achieved by applying an <code>animation-iteration-count</code> property and setting <code>@keyframes</code> rules.",
+        "To illustrate, the animation on the right consists of two \"stars\" that each decrease in size and opacity at the 20% mark in the <code>@keyframes</code> rule, which creates the twinkle animation. You can change the <code>@keyframes</code> rule for one of the elements so the stars twinkle at different rates.",
+        "<h4>Instructions</h4>",
+        "Alter the animation rate for the element with the class name of <code>star-1</code> by changing its <code>@keyframes</code> rule to 50%."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  .stars {",
+        "    background-color: white;",
+        "    height: 30px;",
+        "    width: 30px;",
+        "    border-radius: 50%;",
+        "    animation-iteration-count: infinite;",
+        "  }",
+        "",
+        "  .star-1 {",
+        "    margin-top: 15%; ",
+        "    margin-left: 60%;",
+        "    animation-duration: 1s;",
+        "    animation-name: twinkle-1;",
+        "  }",
+        "",
+        "  .star-2 {",
+        "    margin-top: 25%;",
+        "    margin-left: 25%;",
+        "    animation-duration: 1s;",
+        "    animation-name: twinkle-2;",
+        "  }",
+        "",
+        "  @keyframes twinkle-1 {",
+        "    20% {",
+        "      transform: scale(.5);",
+        "      opacity: 0.5;",
+        "    }",
+        "  }",
+        "",
+        "  @keyframes twinkle-2 {",
+        "    20% {",
+        "      transform: scale(.5);",
+        "      opacity: 0.5;",
+        "    }",
+        "  }",
+        "",
+        "  #back {",
+        "    position: fixed;",
+        "    padding: 0;",
+        "    margin: 0;",
+        "    top: 0;",
+        "    left: 0;",
+        "    width: 100%;",
+        "    height: 100%;",
+        "    background: linear-gradient(black,#000099,#66c2ff, #ffcccc, #ffeee6);",
+        "  }",
+        "</style>",
+        "",
+        "<div id=\"back\"></div>",
+        "<div class=\"star-1 stars\"></div>",
+        "<div class=\"star-2 stars\"></div>"
+      ],
+      "tests": [
+        "assert(code.match(/twinkle-1\\s*?{\\s*?50%/g), 'message: The <code>@keyframes</code> rule for the <code>star-1</code> class should be 50%.');"
+      ],
+      "solutions": [],
+      "hints": [
+        "Check the animation-name declared in the star-1 class to find the right @keyframes rule to change."
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a8367417b2b2512ae6",
+      "title": "Animate Multiple Elements at Variable Rates",
+      "description": [
+        "In the previous challenge, you changed the animation rates for two similarly animated elements by altering their <code>@keyframes</code> rules. You can achieve the same goal by manipulating the <code>animation-duration</code> of multiple elements.",
+        "In the animation running in the code editor, there are three \"stars\" in the sky that twinkle at the same rate on a continuous loop. To make them twinkle at different rates, you can set the <code>animation-duration</code> property to different values for each element.",
+        "<h4>Instructions</h4>",
+        "Set the <code>animation-duration</code> of the elements with the classes <code>star-1</code>, <code>star-2</code>, and <code>star-3</code> to 1s, 0.9s, and 1.1s, respectively."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  .stars {",
+        "    background-color: white;",
+        "    height: 30px;",
+        "    width: 30px;",
+        "    border-radius: 50%;",
+        "    animation-iteration-count: infinite;",
+        "  }",
+        "",
+        "  .star-1 {",
+        "    margin-top: 15%; ",
+        "    margin-left: 60%;",
+        "    animation-duration: 1s;",
+        "    animation-name: twinkle;",
+        "  }",
+        "",
+        "  .star-2 {",
+        "    margin-top: 25%;",
+        "    margin-left: 25%;",
+        "    animation-duration: 1s;",
+        "    animation-name: twinkle;",
+        "  }",
+        "",
+        "  .star-3 {",
+        "    margin-top: 10%;",
+        "    margin-left: 50%;",
+        "    animation-duration: 1s;",
+        "    animation-name: twinkle;",
+        "  }",
+        "",
+        "  @keyframes twinkle {",
+        "    20% {",
+        "      transform: scale(.5);",
+        "      opacity: 0.5;",
+        "    }",
+        "  }",
+        "",
+        "  #back {",
+        "    position: fixed;",
+        "    padding: 0;",
+        "    margin: 0;",
+        "    top: 0;",
+        "    left: 0;",
+        "    width: 100%;",
+        "    height: 100%;",
+        "    background: linear-gradient(black,#000099,#66c2ff, #ffcccc, #ffeee6);",
+        "  }",
+        "</style>",
+        "",
+        "<div id=\"back\"></div>",
+        "<div class=\"star-1 stars\"></div>",
+        "<div class=\"star-2 stars\"></div>",
+        "<div class=\"star-3 stars\"></div>"
+      ],
+      "tests": [
+        "assert($('.star-1').css('animation-duration') == '1s', 'message: The <code>animation-duration</code> property for the star with class <code>star-1</code> should remain at 1s.');",
+        "assert($('.star-2').css('animation-duration') == '0.9s', 'message: The <code>animation-duration</code> property for the star with class <code>star-2</code> should be 0.9s.');",
+        "assert($('.star-3').css('animation-duration') == '1.1s', 'message: The <code>animation-duration</code> property for the star with class <code>star-3</code> should be 1.1s.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a8367417b2b2512ae7",
+      "title": "Change Animation Timing with Keywords",
+      "description": [
+        "In CSS animations, the <code>animation-timing-function</code> property controls how quickly an animated element changes over the duration of the animation. If the animation is a car moving from point A to point B in a given time (your <code>animation-duration</code>), the <code>animation-timing-function</code> says how the car accelerates and decelerates over the course of the drive.",
+        "There are a number of predefined keywords available for popular options. For example, the default value is <code>linear</code>, which applies a constant animation speed throughout. Other options include <code>ease-out</code>, which is quick in the beginning then slows down, or <code>ease-in</code>, which is slow in the beginning, then speeds up at the end.",
+        "<h4>Instructions</h4>",
+        "For the elements with id of <code>ball1</code> and <code>ball2</code>, add an <code>animation-timing-function</code> property to each, and set <code>#ball1</code> to <code>linear</code>, and <code>#ball2</code> to <code>ease-out</code>. Notice the difference between how the elements move during the animation but end together, since they share the same <code>animation-duration</code> of 2 seconds."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "",
+        "  .balls{",
+        "    border-radius: 50%;",
+        "    background: linear-gradient(",
+        "    35deg,",
+        "    #ccffff,",
+        "    #ffcccc",
+        "      );",
+        "    position: fixed;  ",
+        "    width: 50px;",
+        "    height: 50px;",
+        "    margin-top: 50px;",
+        "    animation-name: bounce;",
+        "    animation-duration: 2s;",
+        "    animation-iteration-count: infinite;",
+        "  }",
+        "  #ball1 { ",
+        "    left:27%;",
+        "    ",
+        "  }",
+        "  #ball2 { ",
+        "    left:56%;",
+        "    ",
+        "  }",
+        "",
+        "@keyframes bounce{",
+        "  0% {",
+        "    top:0px;",
+        "  } ",
+        "  100% {",
+        "    top:249px;",
+        "  }",
+        "} ",
+        "",
+        "</style>",
+        "",
+        "<div class=\"balls\" id=\"ball1\"></div>",
+        "<div class=\"balls\" id=\"ball2\"></div>"
+      ],
+      "tests": [
+        "assert($('#ball1').css('animation-timing-function') == 'linear', 'message: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be linear.');",
+        "assert($('#ball2').css('animation-timing-function') == 'ease-out', 'message: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should be ease-out.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a9367417b2b2512ae8",
+      "title": "Learn How Bezier Curves Work",
+      "description": [
+        "The last challenge introduced the <code>animation-timing-function</code> property and a few keywords that change the speed of an animation over its duration. CSS offers an option other than keywords that provides even finer control over how the animation plays out, through the use of Bezier curves.",
+        "In CSS animations, Bezier curves are used with the <code>cubic-bezier</code> function. The shape of the curve represents how the animation plays out. The curve lives on a 1 by 1 coordinate system. The X axis of this coordinate system is the duration of the animation (think of it as a time scale), and the Y axis is the change in the animation.",
+        "The <code>cubic-bezier</code> function consists of four main points that sit on this 1 by 1 grid: <code>p0</code>, <code>p1</code>, <code>p2</code>, and <code>p3</code>. <code>p0</code> and <code>p3</code> are set for you - they are the beginning and end points which are always located respectively at the origin (0, 0) and (1, 1). You set the x and y values for the other two points, and where you place them in the grid dictates the shape of the curve for the animation to follow. This is done in CSS by declaring the x and y values of the <code>p1</code> and <code>p2</code> \"anchor\" points in the form: <code>(x1, y1, x2, y2)</code>. Pulling it all together, here's an example of a Bezier curve in CSS code:",
+        "<code>animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);</code>",
+        "In the example above, the x and y values are equivalent for each point (x1 = 0.25 = y1 and x2 = 0.75 = y2), which if you remember from geometry class, results in a line that extends from the origin to point (1, 1). This animation is a linear change of an element during the length of an animation, and is the same as using the <code>linear</code> keyword. In other words, it changes at a constant speed.",
+        "<h4>Instructions</h4>",
+        "For the element with the id of <code>ball1</code>, change the value of the <code>animation-timing-function</code> property from <code>linear</code> to its equivalent <code>cubic-bezier</code> function value. Use the point values given in the example above."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "",
+        "  .balls{",
+        "    border-radius: 50%;",
+        "    background: linear-gradient(",
+        "    35deg,",
+        "    #ccffff,",
+        "    #ffcccc",
+        "      );",
+        "    position: fixed;  ",
+        "    width: 50px;",
+        "    height: 50px;",
+        "    margin-top: 50px;",
+        "    animation-name: bounce;",
+        "    animation-duration: 2s;",
+        "    animation-iteration-count: infinite;",
+        "  }",
+        "  #ball1 { ",
+        "    left:27%;",
+        "    animation-timing-function: linear;",
+        "  }",
+        "  #ball2 { ",
+        "    left:56%;",
+        "    animation-timing-function: ease-out;",
+        "  }",
+        "",
+        "@keyframes bounce{",
+        "  0% {",
+        "    top:0px;",
+        "  } ",
+        "  100% {",
+        "    top:249px;",
+        "  }",
+        "} ",
+        "",
+        "</style>",
+        "",
+        "<div class=\"balls\" id=\"ball1\"></div>",
+        "<div class=\"balls\" id=\"ball2\"></div>"
+      ],
+      "tests": [
+        "assert($('#ball1').css('animation-timing-function') == 'cubic-bezier(0.25, 0.25, 0.75, 0.75)', 'message: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball1</code> should be the linear-equivalent cubic-bezier function.');",
+        "assert($('#ball2').css('animation-timing-function') == 'ease-out', 'message: The value of the <code>animation-timing-function</code> property for the element with the id <code>ball2</code> should not change.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a9367417b2b2512ae9",
+      "title": "Use a Bezier Curve to Move a Graphic",
+      "description": [
+        "A previous challenge discussed the <code>ease-out</code> keyword that describes an animation change that speeds up first and then slows down at the end of the animation. On the right, the difference between the <code>ease-out</code> keyword (for the blue element) and <code>linear</code> keyword (for the red element) are demonstrated. Similar animation progressions to the <code>ease-out</code> keyword can be achieved by using a custom cubic Bezier curve function.",
+        "In general, changing the <code>p1</code> and <code>p2</code> anchor points drives the creation of different Bezier curves, which controls how the animation progresses through time. Here's an example of a Bezier curve using values to mimic the ease-out style:",
+        "<code>animation-timing-function: cubic-bezier(0, 0, 0.58, 1);</code>",
+        "Remember that all <code>cubic-bezier</code> functions start with <code>p0</code> at (0, 0) and end with <code>p3</code> at (1, 1). In this example, the curve moves faster through the Y axis (starts at 0, goes to <code>p1</code> y value of 0, then goes to <code>p2</code> y value of 1) than it moves through the X axis (0 to start, then 0 for <code>p1</code>, up to 0.58 for <code>p2</code>). As a result, the change in the animated element progresses faster than the time of the animation for that segment. Towards the end of the curve, the relationship between the change in x and y values reverses - the y value moves from 1 to 1 (no change), and the x values move from 0.58 to 1, making the animation changes progress slower compared to the animation duration.",
+        "<h4>Instructions</h4>",
+        "To see the effect of this Bezier curve in action, change the <code>animation-timing-function</code> of the element with id of <code>red</code> to a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1. This will make both elements progress through the animation similarly."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  .balls{",
+        "    border-radius: 50%;",
+        "    position: fixed;  ",
+        "    width: 50px;",
+        "    height: 50px;",
+        "    margin-top: 50px;",
+        "    animation-name: bounce;",
+        "    animation-duration: 2s;",
+        "    animation-iteration-count: infinite;",
+        "  }",
+        "  #red {",
+        "    background:red;",
+        "    left:27%;",
+        "    animation-timing-function: linear;",
+        "  }",
+        "  #blue {",
+        "    background:blue;",
+        "    left:56%;",
+        "    animation-timing-function: ease-out;",
+        "  }",
+        "  @keyframes bounce{",
+        "    0% {",
+        "      top:0px;",
+        "    }",
+        "    100% {",
+        "      top:249px;",
+        "    }",
+        "  }",
+        "</style>",
+        "<div class=\"balls\" id= \"red\"></div>",
+        "<div class=\"balls\" id= \"blue\"></div>"
+      ],
+      "tests": [
+        "assert($('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)', 'message: The value of the <code>animation-timing-function</code> property of the element with the id <code>red</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .');",
+        "assert($('#red').css('animation-timing-function') !== 'linear', 'message: The element with the id <code>red</code> should no longer have the <code>animation-timing-function</code> property of linear.');",
+        "assert($('#blue').css('animation-timing-function') == 'ease-out', 'message: The value of the <code>animation-timing-function</code> property for the element with the id <code>blue</code> should not change.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78a9367417b2b2512aea",
+      "title": "Make Motion More Natural Using a Bezier Curve",
+      "description": [
+        "This challenge animates an element to replicate the movement of a ball being juggled. Prior challenges covered the <code>linear</code> and <code>ease-out</code> cubic Bezier curves, however neither depicts the juggling movement accurately. You need to customize a Bezier curve for this.",
+        "The <code>animation-timing-function</code> automatically loops at every keyframe when the <code>animation-iteration-count</code> is set to infinite. Since there is a keyframe rule set in the middle of the animation duration (at <code>50%</code>), it results in two identical animation progressions at the upward and downward movement of the ball.",
+        "The following cubic Bezier curve simulates a juggling movement:",
+        "<code>cubic-bezier(0.3, 0.4, 0.5, 1.6); </code>",
+        "Notice that the value of y2 is larger than 1. Although the cubic Bezier curve is mapped on an 1 by 1 coordinate system, and it can only accept x values from 0 to 1, the y value can be set to numbers larger than one. This results in a bouncing movement that is ideal for simulating the juggling ball.",
+        "<h4>Instructions</h4>",
+        "Change value of the <code>animation-timing-function</code> of the element with the id of <code>green</code> to a <code>cubic-bezier</code> function with x1, y1, x2, y2 values set respectively to 0.311, 0.441, 0.444, 1.649."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  .balls {",
+        "    border-radius: 50%;",
+        "    top:249px;",
+        "    position: fixed;  ",
+        "    width: 50px;",
+        "    height: 50px;",
+        "    top: 60%;",
+        "    animation-name: jump;",
+        "    animation-duration: 2s;",
+        "    animation-iteration-count: infinite;",
+        "  }",
+        "  #red {",
+        "    background:red;",
+        "    left:25%;",
+        "    animation-timing-function: linear;",
+        "  }",
+        "  #blue {",
+        "    background:blue;",
+        "    left:50%;",
+        "    animation-timing-function: ease-out;",
+        "  }",
+        "  #green {",
+        "    background:green;",
+        "    left:75%;",
+        "    animation-timing-function: cubic-bezier(0.69, 0.1, 1, 0.1); ",
+        "  }",
+        "",
+        "  @keyframes jump {",
+        "    50% {",
+        "      top:10%;",
+        "    }",
+        "  }",
+        "</style>",
+        "<div class=\"balls\" id=\"red\"></div>",
+        "<div class=\"balls\" id=\"blue\"></div>",
+        "<div class=\"balls\" id=\"green\"></div>"
+      ],
+      "tests": [
+        "assert($('#green').css('animation-timing-function') == 'cubic-bezier(0.311, 0.441, 0.444, 1.649)', 'message: The value of the <code>animation-timing-function</code> property for the element with the id <code>green</code> should be a <code>cubic-bezier</code> function with x1, y1, x2, y2 values as specified.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/01-front-end-development-certification/html5-and-css.json b/seed/challenges/01-responsive-web-design/basic-css.json
similarity index 61%
rename from seed/challenges/01-front-end-development-certification/html5-and-css.json
rename to seed/challenges/01-responsive-web-design/basic-css.json
index 6d95ffd7ffee8d..13cc10b90cbf98 100644
--- a/seed/challenges/01-front-end-development-certification/html5-and-css.json
+++ b/seed/challenges/01-responsive-web-design/basic-css.json
@@ -1,460 +1,9 @@
 {
-  "name": "HTML5 and CSS",
-  "order": 2,
+  "name": "Basic HTML and HTML5",
+  "order": 0,
   "time": "5 hours",
   "helpRoom": "Help",
   "challenges": [
-    {
-      "id": "bd7123c8c441eddfaeb5bdef",
-      "title": "Say Hello to HTML Elements",
-      "description": [
-        "Welcome to Free Code Camp's first coding challenge.",
-        "You can edit <code>code</code> in your <code>text editor</code>, which we've embedded into this web page.",
-        "Do you see the code in your text editor that says <code>&#60;h1&#62;Hello&#60;/h1&#62;</code>? That's an HTML <code>element</code>.",
-        "Most HTML elements have an <code>opening tag</code> and a <code>closing tag</code>.",
-        "Opening tags look like this:",
-        "<code>&#60;h1&#62;</code>",
-        "Closing tags look like this:",
-        "<code>&#60;/h1&#62;</code>",
-        "Note that the only difference between opening tags and closing tags is that closing tags have a slash after their opening angle bracket.",
-        "Each challenge has tests that you can run at any time by clicking the \"Run tests\" button. Once you get all tests passing, you can advance to the next challenge.",
-        "To pass the test on this challenge, change your <code>h1</code> element's text to say \"Hello World\" instead of \"Hello\". Then click the \"Run tests\" button."
-      ],
-      "challengeSeed": [
-        "<h1>Hello</h1>"
-      ],
-      "tests": [
-        {
-          "text": "Your <code>h1</code> element should have the text \"Hello World\".",
-          "testString": "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your <code>h1</code> element should have the text \"Hello World\".');"
-        }
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "de": {
-          "description": [
-            "Willkommen bei der ersten Programmier-Challenge von Free Code Camp!",
-            "Mithilfe des eingebauten <code>text editor</code> kannst du den <code>code</code> bearbeiten.",
-            "Siehst du den Code <code>&#60;h1&#62;Hallo&#60;/h1&#62;</code> im Editor? Das ist ein HTML <code>element</code>",
-            "Die meisten HTML Elemente haben einen <code>opening tag</code> und einen <code>closing tag</code>.",
-            "Öffnende Tags sehen so aus:",
-            "<code>&#60;h1&#62;</code>",
-            "Schließende Tags so:",
-            "<code>&#60;/h1&#62;</code>",
-            "Beachte, dass der einzige Unterschied zwischen öffnenden und schließenden Tags ist, das schließende Tags ein Slash nach der sich öffnenden spitzen Klammer folgt.",
-            "Jede Challenge hat Tests die du jederzeit starten kannst indem du den \"Run tests\" Button drückst. Wenn alle Tests bestehen kannst du mit der nächsten Challenge fortfahren.",
-            "Um den Test dieser Challenge zu bestehen, ändere den Text deines <code>h1</code> Elements von \"Hello\" zu \"Hello World\". Klicke dann den \"Run tests\" Button."
-          ]
-        },
-        "fr": {
-          "title": "Dites bonjour aux éléments HTML",
-          "description": [
-            "Bienvenue au premier défi de code de Free Code Camp.",
-            "Vous pouvez modifier le <code>code</code> dans votre <code>éditeur texte</code>, lequel est disponible dans cette page.",
-            "Voyez-vous le code dans l'éditeur texte qui dit <code>&#60;h1&#62;Hello&#60;/h1&#62;</code>? C'est un <code>élément</code> HTML.",
-            "La plupart des éléments HTML ont une <code>balise ouvrante</code> et une <code>balise fermante</code>",
-            "Les balises ouvrantes ont cette apparence :",
-            "<code>&#60;h1&#62;</code>",
-            "Les balises fermantes ont cette apparence :",
-            "<code>&#60;/h1&#62;</code>",
-            "Notez que la seule différence entre une balise ouvrante et fermante est que la balise fermante a une barre oblique après son chevron ouvrant.",
-            "Chaque défi contient des tests que vous pouvez éxécuter en cliquant sur le bouton \"Run tests\". Lorsque tous les tests sont réussis, vous pouvez poursuivre avec le défi suivant.",
-            "Pour réussir le test de ce défi, changez le texte de l'élément <code>h1</code> pour \"Hello World\" plutôt que \"Hello\". Cliquez ensuite sur le bouton \"Run tests\"."
-          ]
-        },
-        "pt-br": {
-          "title": "Diga Olá aos Elementos HTML",
-          "description": [
-            "Seja bem vindo ao primeiro desafio de programação do Free Code Camp!",
-            "Você pode editar o seu <code>código</code> em seu <code>editor de texto</code>, que embutimos aqui nesta página da web.",
-            "Consegue ver o código que diz <code>&#60;h1&#62;Hello&#60;/h1&#62;</code> no seu editor de texto? Esse é um elemento HTML.",
-            "A maioria dos elementos HTML tem uma <code>tag de abertura</code> e uma <code>tag de fechamento</code>.",
-            "As tags de abertura são assim: <code>&#60;h1&#62;</code>. E as tags de fechamento são assim: <code>&#60;/h1&#62;</code>.",
-            "Note que a única diferença entre as tags de abertura e fechamento é que as de fechamento possuem uma barra (/) depois do sinal de abertura (<).",
-            "Cada desafio possui testes que você pode executar a qualquer momento ao clicar no botão \"Executar testes\". Quando você conseguir passar em todos os testes, poderá avançar para o próximo desafio.",
-            "Para passar nos testes deste desafio, mude o texto do elemento <code>h1</code> para que diga \"Hello World\" no lugar de \"Hello\". Depois, clique no botão \"Executar testes\"."
-          ]
-        },
-        "ru": {
-          "title": "Скажи привет HTML-элементам",
-          "description": [
-            "Добро пожаловать на первое программное испытание Free Code Camp.",
-            "Вы можете редактировать <code>код</code> в вашем <code>текстовом редакторе</code>, который мы встроили в эту web-страницу.",
-            "Видите этот код в вашем текстовом редакторе: <code>&#60;h1&#62;Hello&#60;/h1&#62;</code>? Это HTML <code>элемент</code>.",
-            "Большинство HTML-элементов имеют <code>открывающую метку</code> <code>закрывающую метку</code>.",
-            "Открывающие метки выглядят так:",
-            "<code>&#60;h1&#62;</code>",
-            "Закрывающие метки выглядят следующим образом:",
-            "<code>&#60;/h1&#62;</code>",
-            "Обратите внимание, что единственная разница между открывающими и закрывающими метками заключается в наличии косой черты после открывающей треугольной скобки.",
-            "Каждое испытание имеет функцию проверки решения, которую вы можете запустить в любой момент нажатием на кнопку \"Run tests\". Как только ваше решение будет удовлетворять всем требованиям, вы сможете перейти к следующему испытанию.",
-            "Для прохождения этого испытания измените текст элемента <code>h1</code> с \"Hello\" на \"Hello World\". Затем нажмите кнопку \"Run tests\"."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bad87fee1348bd9aedf0887a",
-      "title": "Headline with the h2 Element",
-      "description": [
-        "Over the next few challenges, we'll build an HTML5 app that will look something like this:",
-        "<a href=\"//i.imgur.com/jOc1JF1.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/jOc1JF1.png\" title=\"Click to enlarge\" alt=\"A screen shot of our finished Cat Photo App\"></a>",
-        "The <code>h2</code> element you enter will create an <code>h2</code> element on the website.",
-        "This element tells the browser about the structure of your website. <code>h1</code> elements are often used for main headings, while <code>h2</code> elements are generally used for subheadings. There are also <code>h3</code>, <code>h4</code>, <code>h5</code> and <code>h6</code> elements to indicate different and new sections.",
-        "Add an <code>h2</code> tag that says \"CatPhotoApp\" to create a second HTML <code>element</code> below your \"Hello World\" <code>h1</code> element."
-      ],
-      "challengeSeed": [
-        "<h1>Hello World</h1>"
-      ],
-      "tests": [
-        "assert(($(\"h2\").length > 0), 'message: Create an <code>h2</code> element.');",
-        "assert(code.match(/<\\/h2>/g) && code.match(/<\\/h2>/g).length === code.match(/<h2>/g).length, 'message: Make sure your <code>h2</code> element has a closing tag.');",
-        "assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($(\"h2\").text()), 'message: Your <code>h2</code> element should have the text \"CatPhotoApp\".');",
-        "assert.isTrue((/hello(\\s)+world/gi).test($(\"h1\").text()), 'message: Your <code>h1</code> element should have the text \"Hello World\".');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "de": {
-          "description": [
-            "In den nächsten Challenges werden wir eine HTML5 App entwickeln die ungefähr so aussehen wird:",
-            "<a href=\"//i.imgur.com/jOc1JF1.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/jOc1JF1.png\" title=\"Klicke zum Vergrößern\" alt=\"Ein Screenshot von unserer beendeted Katzenfoto App\"></a>",
-            "Das eingetragene <code>h2</code> Element wird ein <code>h2</code> Element auf der Website erzeugen.",
-            "Dieses Element sagt dem Browser, wie die Struktur deiner Website aufgebaut ist. <code>h1</code> Elemente werden oft für Hauptüberschriften verwendet, während <code>h2</code> Elemente üblicherweise für Zwischenüberschriften verwendet werden. Es gibt auch <code>h3</code>, <code>h4</code>, <code>h5</code> und <code>h6</code> Elemente die verschiedene und neue Bereiche kennzeichnen.",
-            "Füge unter <code>h1</code> \"Hello World\" ein zweites HTML Element <code>h2</code> hinzu, in dem \"CatPhotoApp\" steht."
-          ]
-        },
-        "fr": {
-          "title": "Un titre avec l'élément h2",
-          "description": [
-            "Pour les quelques prochains défis, nous construirons une application HTML5 qui ressemblera à ceci :",
-            "<a href=\"//i.imgur.com/jOc1JF1.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/jOc1JF1.png\" title=\"Cliquez pour agrandir\" alt=\"Une capture écran de notre application de photo de chats\"></a>",
-            "L'élément <code>h2</code> que vous entrerez créera un élément <code>h2</code> sur le site.",
-            "Cet élément renseigne votre navigateur sur la structure de votre site. Les éléments <code>h1</code> sont souvent utilisés comme titre, tandis que les éléments <code>h2</code> sont généralement utilisés comme sous-titres. Il existe également les éléments <code>h3</code>, <code>h4</code>, <code>h5</code> et <code>h6</code> qui indiquent une nouvelle et différente section.",
-            "Ajoutez une balise <code>h2</code> contenant \"CatPhotoApp\" pour créer un second <code>élément</code> HTML sous l'élément <code>h1</code> contenant \"Hello World\"."
-          ]
-        },
-        "pt-br": {
-          "title": "Cabeçalho com o Elemento h2",
-          "description": [
-            "Durante os próximos desafios, construiremos um aplicativo em HTML que se parecerá como este:",
-            "<a href=\"//i.imgur.com/jOc1JF1.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/jOc1JF1.png\" title=\"Clique para aumentar\" alt=\"Imagem do aplicativo CatPhotoApp finalizado\"></a>",
-            "O elemento <code>h2</code> que você criar gerará um elemento <code>h2</code> na página da web.",
-            "Este elemento indica ao navegador a forma de mostrar o texto que contém.",
-            "Os elementos <code>h2</code> são ligeiramente menores que os elementos <code>h1</code>. Há também os elementos <code>h3</code>, <code>h4</code>, <code>h5</code> e <code>h6</code>.",
-            "Adicione uma tag <code>h2</code> que diga \"CatPhotoApp\" para criar um segundo <code>elemento</code> HTML abaixo de seu elemento <code>h1</code> chamado \"Hello World\"."
-          ]
-        },
-        "ru": {
-          "title": "Заголовок с применением элемента h2",
-          "description": [
-            "В результате прохождения нескольких следующих испытаний, мы построим HTML5 приложение, которое будет похоже на это:",
-            "<a href=\"//i.imgur.com/jOc1JF1.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/jOc1JF1.png\" title=\"Click to enlarge\" alt=\"A screen shot of our finished Cat Photo App\"></a>",
-            "Вводимый вами элемент <code>h2</code> создаст соответствующий элемент <code>h2</code> на web-странице.",
-            "Этот элемент сообщает браузеру о структуре вашего web-сайта. Элементы <code>h1</code> часто применяют в качестве главных заголовков, в то время как элементы <code>h2</code> обычно используют для обозначения позаголовков. Также существуют элементы <code>h3</code>, <code>h4</code>, <code>h5</code> и <code>h6</code> для обозначения отдельных секций.",
-            "Добавьте метку <code>h2</code> с текстом \"CatPhotoApp\" для создания второго HTML <code>элемента</code> под вашим элементом <code>h1</code> с текстом \"Hello World\"."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bad87fee1348bd9aedf08801",
-      "title": "Inform with the Paragraph Element",
-      "description": [
-        "<code>p</code> elements are the preferred element for normal-sized paragraph text on websites. P is short for \"paragraph\".",
-        "You can create a <code>p</code> element like this:",
-        "<code>&#60;p&#62;I'm a p tag!&#60;/p&#62;</code>",
-        "Create a <code>p</code> element below your <code>h2</code> element, and give it the text \"Hello Paragraph\"."
-      ],
-      "challengeSeed": [
-        "<h1>Hello World</h1>",
-        "<h2>CatPhotoApp</h2>"
-      ],
-      "tests": [
-        "assert(($(\"p\").length > 0), 'message: Create a <code>p</code> element.');",
-        "assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), 'message: Your <code>p</code> element should have the text \"Hello Paragraph\".');",
-        "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/<p/g).length, 'message: Make sure your <code>p</code> element has a closing tag.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "de": {
-          "description": [
-            "<code>p</code> Elemente sind das bevorzugte Element für normale Paragraphentexte auf einer Website. P ist die Abkürzung für \"Paragraph\".",
-            "Du kannst ein <code>p</code> Element so erzeugen:",
-            "<code>&#60;p&#62;Ich bin ein p Element!&#60;/p&#62;</code>",
-            "Erstelle ein <code>p</code> Element unter deinem <code>h2</code> Element und füge den Text \"Hello Paragraph\" ein."
-          ]
-        },
-        "fr": {
-          "title": "Informez avec l'élément paragraphe",
-          "description": [
-            "L'élément <code>p</code> est le préféré pour les textes de paragraphes de taille normale. P est l'acronyme de \"paragraphe\",",
-            "Vous pouvez créer un élément <code>p</code> comme ceci :",
-            "<code>&#60;p&#62;Je suis une balise p!&#60;/p&#62;</code>",
-            "Créez un élément <code>p</code> sous votre élément <code>h2</code> et inscrivez-y le texte \"Hello Paragraph\"."
-          ]
-        },
-        "pt-br": {
-          "title": "Informe com o Elemento Parágrafo",
-          "description": [
-            "Os elementos <code>p</code> são os preferenciais para criar parágrafos de texto com tamanho normal nas páginas da web. P significa a abreviatura de \"parágrafo\".",
-            "Você pode criar um elemento <code>p</code> assim:",
-            "<code>&#60;p&#62;Sou uma tag p!&#60;/p&#62;</code>",
-            "Crie um elemento <code>p</code> abaixo de seu elemento <code>h2</code>, e dê a ele o texto \"Hello Paragraph\"."
-          ]
-        },
-        "ru": {
-          "title": "Проинформируйте с применением элемента p",
-          "description": [
-            "Элементы <code>p</code> предпочтительно использовать для обозначения параграфов с текстом нормального размера в web-сайтах. P - сокращение от \"paragraph\".",
-            "Вы можете создать элемент <code>p</code> следующим образом:",
-            "<code>&#60;p&#62;Я метка p!&#60;/p&#62;</code>",
-            "Создайте элемент <code>p</code> под вашим элементом <code>h2</code> и присвойте ему текст \"Hello Paragraph\"."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bad87fee1348bd9aedf08802",
-      "title": "Uncomment HTML",
-      "description": [
-        "Commenting is a way that you can leave comments within your code without affecting the code itself.",
-        "Commenting is also a convenient way to make code inactive without having to delete it entirely.",
-        "You can start a comment with <code>&#60;!--</code> and end a comment with <code>--&#62;</code>",
-        "Uncomment your <code>h1</code>, <code>h2</code> and <code>p</code> elements."
-      ],
-      "challengeSeed": [
-        "<!--",
-        "<h1>Hello World</h1>",
-        "",
-        "<h2>CatPhotoApp</h2>",
-        "",
-        "<p>Hello Paragraph</p>",
-        "-->"
-      ],
-      "tests": [
-        "assert($(\"h1\").length > 0, 'message: Make your <code>h1</code> element visible on your page by uncommenting it.');",
-        "assert($(\"h2\").length > 0, 'message: Make your <code>h2</code> element visible on your page by uncommenting it.');",
-        "assert($(\"p\").length > 0, 'message: Make your <code>p</code> element visible on your page by uncommenting it.');",
-        "assert(!/[^fc]-->/gi.test(code.replace(/ *<!--[^fc]*\\n/g,'')), 'message: Be sure to delete all trailing comment tags&#44; i.e. <code>--&#62;</code>.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "de": {
-          "description": [
-            "Kommentieren erlaubt dir Kommentare innerhalb des Codes zu hinterlassen, ohne diesen selbst zu beeinflussen.",
-            "Dies ist auch ein guter Weg, um Code inaktiv zu machen ohne diesen komplett löschen zu müssen.",
-            "Du kannst einen Kommentar mit <code>&#60;!--</code> starten und ihn mit <code>--&#62;</code> wieder beenden.",
-            "Entkommentiere deine <code>h1</code>, <code>h2</code> und <code>p</code> Elemente."
-          ]
-        },
-        "fr": {
-          "title": "Décommenter du HTML",
-          "description": [
-            "Commenter est une façon de laisser des commentaires dans votre code sans affecter le fonctionnement du code.",
-            "Commenter est aussi un moyen pratique de rendre du code inactif sans devoir le supprimer entièrement.",
-            "Vous pouvez débuter un commentaire avec <code>&#60;!--</code> et le terminer avec <code>--&#62;</code>.",
-            "Décommenter vos éléments <code>h1</code>, <code>h2</code> et <code>p</code>."
-          ]
-        },
-        "pt-br": {
-          "title": "Descomente o HTML",
-          "description": [
-            "\"Comentar\" é uma forma de deixar anotações em seu código sem afetá-lo.",
-            "Comentar também é um jeito conveniente de deixar seu código inativo sem precisar apagá-lo por completo.",
-            "Você pode iniciar um comentário com <code>&#60;!--</code> e terminar seu comentário com <code>--&#62;</code>.",
-            "Remova o comentário dos elementos <code>h1</code>, <code>h2</code> e <code>p</code>."
-          ]
-        },
-        "ru": {
-          "title": "Раскомментируйте HTML",
-          "description": [
-            "Комментирование - способ хранения заметок по коду без воздействия на сам код.",
-            "Также комментирование - неплохой метод отключения части кода без необходимости его удаления.",
-            "Вы можете начать комментарий с <code>&#60;!--</code> и закончить его <code>--&#62;</code>",
-            "Раскомментируйте свои элементы <code>h1</code>, <code>h2</code> и <code>p</code>."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bad87fee1348bd9aedf08804",
-      "title": "Comment out HTML",
-      "description": [
-        "Remember that in order to start a comment, you need to use <code>&#60;!--</code> and to end a comment, you need to use <code>--&#62;</code>",
-        "Here you'll need to end the comment before your <code>h2</code> element begins.",
-        "Comment out your <code>h1</code> element and your <code>p</code> element, but leave your <code>h2</code> element uncommented."
-      ],
-      "challengeSeed": [
-        "<!--",
-        "<h1>Hello World</h1>",
-        "",
-        "<h2>CatPhotoApp</h2>",
-        "",
-        "<p>Hello Paragraph</p>",
-        "-->"
-      ],
-      "tests": [
-        "assert(($(\"h1\").length === 0), 'message: Comment out your <code>h1</code> element so that it is not visible on your page.');",
-        "assert(($(\"h2\").length > 0), 'message: Leave your <code>h2</code> element uncommented so that it is visible on your page.');",
-        "assert(($(\"p\").length === 0), 'message: Comment out your <code>p</code> element so that it is not visible on your page.');",
-        "assert(code.match(/[^fc]-->/g).length > 1, 'message: Be sure to close each of your comments with <code>--&#62;</code>.');",
-        "assert((code.match(/<([a-z0-9]){1,2}>/g)[0]===\"<h1>\" && code.match(/<([a-z0-9]){1,2}>/g)[1]===\"<h2>\" && code.match(/<([a-z0-9]){1,2}>/g)[2]===\"<p>\") , 'message: Do not change the order of the <code>h1</code> <code>h2</code> or <code>p</code> in the code.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "de": {
-          "description": [
-            "Denk daran, dass du einen Kommentar mit <code>&#60;!--</code> anfangen und mit <code>--&#62;</code> wieder beenden werden.",
-            "Hier wirst du deinen Kommentar vor dem <code>h2</code> Element beenden müssen.",
-            "Kommentiere die <code>h1</code> und <code>p</code> Elemente aus, aber lasse dein <code>h2</code> Element unkommentiert."
-          ]
-        },
-        "fr": {
-          "title": "Commentez du HTML",
-          "description": [
-            "Souvenez-vous que pour débuter un commentaire, vous devez utiliser <code>&#60;!--</code> et que pour le terminer, vous devez utiliser <code>--&#62;</code>.",
-            "Ici vous devrez terminer le commentaire juste avant que l'élément <code>h2</code> commence.",
-            "Commentez les éléments <code>h1</code> et <code>p</code>, mais laissez l'élément <code>h2</code> tel quel."
-          ]
-        },
-        "pt-br": {
-          "title": "Comente o HTML",
-          "description": [
-            "Lembre-se que para iniciar um comentário você precisa utilizar <code>&#60;!--</code>, e para terminar um comentário é necessário usar <code>--&#62;</code>.",
-            "Aqui, você deverá terminar o comentário antes que seu elemento <code>h2</code> inicie.",
-            "Comente o elemento <code>h1</code> e o elemento <code>p</code>, e deixe o elemento <code>h2</code> sem nenhum comentário."
-          ]
-        },
-        "ru": {
-          "title": "Закомментируйте HTML",
-          "description": [
-            "Помните, что для начала комментария вам необходимо использовать <code>&#60;!--</code>, а для завершения комментария - <code>--&#62;</code>",
-            "Тут вам необходимо завершить комментарий до начала вашего элемента <code>h2</code>.",
-            "Закомментируйте ваши элементы <code>h1</code> и <code>p</code>, но оставьте ваш элемент <code>h2</code> раскомментированным."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bad87fee1348bd9aedf08833",
-      "title": "Fill in the Blank with Placeholder Text",
-      "description": [
-        "Web developers traditionally use <code>lorem ipsum text</code> as placeholder text. The 'lorem ipsum' text is randomly scraped from a famous passage by Cicero of Ancient Rome.",
-        "Lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.",
-        "Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called <code>kitty ipsum text</code>.",
-        "Replace the text inside your <code>p</code> element with the first few words of this kitty ipsum text: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
-      ],
-      "challengeSeed": [
-        "<h1>Hello World</h1>",
-        "",
-        "<h2>CatPhotoApp</h2>",
-        "",
-        "<p>Hello Paragraph</p>"
-      ],
-      "tests": [
-        "assert.isTrue((/Kitty(\\s)+ipsum/gi).test($(\"p\").text()), 'message: Your <code>p</code> element should contain the first few words of the provided <code>kitty ipsum text</code>.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "de": {
-          "description": [
-            "Webentwickler nutzen für gewöhnlich \"Lorem Ipsum Text\" als Platzhalter. Es heißt \"Lorem Ipsum\", weil es die ersten zwei Wörter aus einer bekannten Passage von Cicero des alten Roms sind.",
-            "\"Lorem Ipsum\" Text wurde seit dem 16. Jahrhundert von Schriftsetzern als Platzhalter verwendet. Und diese Tradition setzt sich im Web fort.",
-            "Nun gut, fünf Jahrhunderte sind lange genug. Da wir eine CatPhotoApp entwickeln, lass uns stattdessen lieber <code>kitty ipsum text</code> nutzen.",
-            "Ersetze den Text in deinem <code>p</code> Element mit den ersten Wörtern des \"Kitty Ipsum\" Textes: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
-          ]
-        },
-        "fr": {
-          "title": "Remplissez les blancs avec du faux-texte",
-          "description": [
-            "Les développeurs Web utilisent traditionnellement du <code>lorem ipsum</code> comme texte de substitution. Le texte lorem ipsum provient d'un extrait de Cicero, de la Rome antique.",
-            "Le texte lorem ipsum a été utilisé comme faux-texte par des typographes depuis le 16<sup>ème</sup> siècle et cette tradition se poursuit sur le Web.",
-            "Enfin, 5 siècles est suffisament long. Étant donné que nous fabriquons une application de photos de chats, utilisons plutôt du texte <code>Kitty ipsum</code>.",
-            "Remplacez le texte à l'intérieur des éléments <code>p</code> avec ces quelques mots du texte Kitty ipsum : <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
-          ]
-        },
-        "pt-br": {
-          "title": "Preencha Espaços com Texto de Espaço Reservado",
-          "description": [
-            "Desenvolvedores web tradicionalmente usam <code>Lorem Ipsum</code> como texto de preenchimento. Lorem Ipsum é chamado assim pois essas são as duas primeiras palavras de uma passagem famosa de Cícero da Roma Antiga.",
-            "O texto Lorem Ipsum tem sido utilizado como texto de espaço reservado por compositores desde o século 16, e esta tradição continua na web.",
-            "Bem, 5 séculos é um tempo longo o bastante. Já que estamos desenvolvendo um aplicativo sobre fotos de gatos (CatPhotoApp), vamos usar algo chamado <code>Kitty Ipsum</code>.",
-            "Substitua o texto dentro do seu elemento <code>p</code> pelas primeiras palavras deste texto Kitty Ipsum: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
-          ]
-        },
-        "ru": {
-          "title": "Заполните пустоты замещающим текстом",
-          "description": [
-            "Традиционно web-разработчики используют текст <code>lorem ipsum</code> в качестве замещающего текста. Он называется тектсом <code>lorem ipsum</code> по первым двум словам известного пассажа Цицерона из Древнего Рима.",
-            "Текст <code>lorem ipsum</code> применяется в качестве замещающего текста наборщиками с 16-го века, и эта традиция продолжается в сети.",
-            "5 веков довольно долгий период. Так как мы строим приложение CatPhotoApp, давайте используем нечто называемое текстом <code>kitty ipsum</code>.",
-            "Замените текст внутри вашего элемента <code>p</code> первыми двумя словами текста <code>kitty ipsum</code>: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
-          ]
-        }
-      }
-    },
-    {
-      "id": "bad87fed1348bd9aedf08833",
-      "title": "Delete HTML Elements",
-      "description": [
-        "Our phone doesn't have much vertical space.",
-        "Let's remove the unnecessary elements so we can start building our CatPhotoApp.",
-        "Delete your <code>h1</code> element so we can simplify our view."
-      ],
-      "challengeSeed": [
-        "<h1>Hello World</h1>",
-        "",
-        "<h2>CatPhotoApp</h2>",
-        "",
-        "<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>"
-      ],
-      "tests": [
-        "assert(($(\"h1\").length == 0), 'message: Delete your <code>h1</code> element.');",
-        "assert(($(\"h2\").length > 0), 'message: Leave your <code>h2</code> element on the page.');",
-        "assert(($(\"p\").length > 0), 'message: Leave your <code>p</code> element on the page.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "de": {
-          "description": [
-            "Unser Smartphone hat nicht sehr viel vertikalen Platz.",
-            "Lass uns die unwichtigen Elemente entfernen, damit wir unsere CatPhotoApp entwickeln können.",
-            "Lösche die Elemente <code>h1</code>, damit wir etwas Ordnung schaffen."
-          ]
-        },
-        "fr": {
-          "title": "Supprimer des éléments HTML",
-          "description": [
-            "Notre téléphone n'a pas beaucoup d'espace vertical.",
-            "Enlevons les éléments superflus pour débuter la construction de notre application de photos de chats.",
-            "Supprimez l'élément <code>h1</code> afin de simplifier l'affichage."
-          ]
-        },
-        "pt-br": {
-          "title": "Apague Elementos HTML",
-          "description": [
-            "Nosso celular não possui muito espaço vertical.",
-            "Vamos eliminar os elementos desnecessários para começar a construir nosso CatPhotoApp.",
-            "Apague o elemento <code>h1</code> para simplificar o nosso espaço."
-          ]
-        },
-        "ru": {
-          "title": "Удалите HTML-элементы",
-          "description": [
-            "Наш телефон не очень большой по-вертикали.",
-            "Давайте удалим некоторые ненужные элементы, чтобы мы могли приступить к созданию приложения CatPhotoApp.",
-            "Удалите ваш <code>h1</code> элемент, чтобы упростить общий вид."
-          ]
-        }
-      }
-    },
     {
       "id": "bad87fee1348bd9aedf08803",
       "title": "Change the Color of Text",
@@ -1081,1604 +630,26 @@
           ]
         },
         "ru": {
-          "title": "Укажите порядок деградации шрифтов",
-          "description": [
-            "Существует несколько стандартных шрифтов, которые доступны во всех браузерах. Среди них <code>Monospace</code>, <code>Serif</code> и <code>Sans-Serif</code>",
-            "Когда один шрифт недоступен, вы можете сообщить браузеру \"деградировать\" до другого шрифта.",
-            "Например, если бы вы хотели, чтобы элемент использовал шрифт <code>Helvetica</code>, но также деградировал до шрифта <code>Sans-Serif</code>, когда <code>Helvetica</code> недоступен, вы могли бы использовать этот CSS-стиль:",
-            "<blockquote>p {<br>&nbsp;&nbsp;font-family: Helvetica, Sans-Serif;<br>}</blockquote>",
-            "Теперь закомментируйте ваш запрос к Google Fonts, таким образом шрифт <code>Lobster</code> становится недоступен. Обратите внимание как происходит деградация до шрифта <code>Monospace</code>."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bad87fee1348bd9aedf08812",
-      "title": "Add Images to your Website",
-      "description": [
-        "You can add images to your website by using the <code>img</code> element, and point to a specific image's URL using the <code>src</code> attribute.",
-        "An example of this would be:",
-        "<code>&#60img src=\"https://www.your-image-source.com/your-image.jpg\"&#62</code>",
-        "All <code>img</code> elements <strong>must</strong> have an <code>alt</code> attribute. The text inside an <code>alt</code> attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.",
-        "Let's add an <code>alt</code> attribute to our <code>img</code> example above:",
-        "<code>&#60img src=\"https://www.your-image-source.com/your-image.jpg\" alt=\"Author standing on a beach with two thumbs up.\"&#62</code>",
-        "Note that in most cases, <code>img</code> elements are self-closing.",
-        "Try it with this image:",
-        "<code>https://bit.ly/fcc-relaxing-cat</code>"
-      ],
-      "challengeSeed": [
-        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
-        "<style>",
-        "  .red-text {",
-        "    color: red;",
-        "  }",
-        "",
-        "  h2 {",
-        "    font-family: Lobster, Monospace;",
-        "  }",
-        "",
-        "  p {",
-        "    font-size: 16px;",
-        "    font-family: Monospace;",
-        "  }",
-        "</style>",
-        "",
-        "<h2 class=\"red-text\">CatPhotoApp</h2>",
-        "",
-        "<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
-        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
-      ],
-      "tests": [
-        "assert($(\"img\").length > 0, 'message: Your page should have an image element.');",
-        "assert(new RegExp(\"\\/\\/bit.ly\\/fcc-relaxing-cat|\\/\\/s3.amazonaws.com\\/freecodecamp\\/relaxing-cat.jpg\", \"gi\").test($(\"img\").attr(\"src\")), 'message: Your image should have a <code>src</code> attribute that points to the kitten image.');",
-        "assert(code.match(/alt\\s*?=\\s*?(\\\"|\\').*(\\\"|\\')/), 'message: Your image element <strong>must</strong> have an <code>alt</code> attribute.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "de": {
-          "description": [
-            "Du kannst <code>img</code> Elemente verwenden, um Bilder in deine Website einzubauen. Um zur URL des Bildes zu verweisen, benutzt du das <code>src</code> Attribut.",
-            "Ein Beispiel dafür wäre:",
-            "<code>&#60img src=\"https://www.deine-bild-quelle.com/dein-bild.jpg\"&#62</code>",
-            "Beachte dass in den meisten Fällen <code>img<code> Elemente selbstschließend sind.",
-            "Versuche es mit diesem Bild:",
-            "<code>https://bit.ly/fcc-relaxing-cat</code>"
-          ]
-        },
-        "fr": {
-          "title": "Ajouter des images à votre site Web",
-          "description": [
-            "Vous pouvez ajouter des images à votre site Web en utilisant l'élément <code>img</code> et pointer vers une URL d'image spécifique en utilisant l'attribut <code>src</code>.",
-            "Un exemple de cette procédure serait :",
-            "<code>&#60img src=\"https://www.your-image-source.com/your-image.jpg\"&#62</code>",
-            "Note that in most cases, <code>img</code> elements are self-closing.",
-            "Prenez note que dans la plupart des cas, les éléments <code>img</code> sont auto-fermants.",
-            "Essayez avec cette image :",
-            "<code>https://bit.ly/fcc-relaxing-cat</code>"
-          ]
-        },
-        "pt-br": {
-          "title": "Adicione Imagens em sua Página Web",
-          "description": [
-            "Você pode adicionar imagens à sua página da internet com o uso do elemento <code>img</code>, e apontar para a URL específica de uma imagem utilizando o atributo <code>src</code>.",
-            "Um exemplo para isso seria:",
-            "<code>&#60img src=\"https://www.your-image-source.com/your-image.jpg\"&#62</code>",
-            "Observe que na maior parte dos casos, os elementos <code>img</code> são de fechamento automático.",
-            "Agora, tente fazer isso com essa imagem:",
-            "<code>https://bit.ly/fcc-relaxing-cat</code>"
-          ]
-        },
-        "ru": {
-          "title": "Добавьте изображения к вашему сайту",
-          "description": [
-            "Вы можете добавлять изображения к вашему сайту с помощью элемента <code>img</code> и указывать ссылки определённых изображений с помощтю атрибута <code>src</code>.",
-            "Примером добавления мзображения может служить:",
-            "<code>&#60img src=\"https://www.your-image-source.com/your-image.jpg\"&#62</code>",
-            "Обратите внимание, что в большинстве случаев элементы <code>img</code> являются самозакрывающимися.",
-            "Попробуйте добавить изображение используя следующую ссылку:",
-            "<code>https://bit.ly/fcc-relaxing-cat</code>"
-          ]
-        }
-      }
-    },
-    {
-      "id": "bad87fee1348bd9acdf08812",
-      "title": "Size your Images",
-      "description": [
-        "CSS has a property called <code>width</code> that controls an element's width. Just like with fonts, we'll use <code>px</code> (pixels) to specify the image's width.",
-        "For example, if we wanted to create a CSS class called <code>larger-image</code> that gave HTML elements a width of 500 pixels, we'd use:",
-        "<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.larger-image {<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 500px;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote>",
-        "Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide.",
-        "<strong>Note</strong><br>Due to browser implementation differences, you may need to be at 100% zoom to pass the tests on this challenge."
-      ],
-      "challengeSeed": [
-        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
-        "<style>",
-        "  .red-text {",
-        "    color: red;",
-        "  }",
-        "",
-        "  h2 {",
-        "    font-family: Lobster, Monospace;",
-        "  }",
-        "",
-        "  p {",
-        "    font-size: 16px;",
-        "    font-family: Monospace;",
-        "  }",
-        "</style>",
-        "",
-        "<h2 class=\"red-text\">CatPhotoApp</h2>",
-        "",
-        "<img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
-        "",
-        "<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
-        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
-      ],
-      "tests": [
-        "assert($(\"img[src='https://bit.ly/fcc-relaxing-cat']\").attr('class') === \"smaller-image\", 'message: Your <code>img</code> element should have the class <code>smaller-image</code>.');",
-        "assert($(\"img\").width() === 100, 'message: Your image should be 100 pixels wide. Browser zoom should be at 100%.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "de": {
-          "description": [
-            "Die Breite eines Elements wird mit dem CSS Attribut <code>width</code> kontrolliert. Wie bei Schriftarten verwenden wir Pixel <code>px</code> um die Größe zu definieren.",
-            "Wenn wir also die CSS Klasse <code>larger-image</code> erstellen wollen, um HTML Elementen eine Breite von 500 Pixeln zu verleihen, verwenden wir:",
-            "<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.larger-image {<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 500px;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote>",
-            "Erstelle eine Klasse mit dem Namen <code>smaller-image</code> und verwende sie, um dein Bild auf 100 Pixel zu skalieren.",
-            "<strong>Notiz</strong><br>Aufgrund verschiedener Brower Implementierungen, könnte es sein dass du auf 100% Zoom sein musst um die Tests zu bestehen."
-          ]
-        },
-        "fr": {
-          "title": "Redimensionner vos images",
-          "description": [
-            "Le CSS a une propriété nommé <code>width</code> qui contrôle la largeur d'un élément. Comme pour les polices, nous utiliserons <code>px</code> (pixels) pour déterminer la largeur d'une image.",
-            "Par exemple, si nous voulons créer une classe CSS nommée <code>larger-image</code> qui donnne aux éléments une largeur de 500 pixels, nous utilisons :",
-            "<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.larger-image {<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 500px;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote>",
-            "Créez une classe nommée <code>smaller-image</code> et utilisez la pour redimensionner l'image pour qu'elle ai 100 pixels de large.",
-            "<strong>Prenez note</strong><br>Dû aux différences entre les navigateurs Web, votre niveau de zoom devrait être à 100% pour passer les tests de ce défi."
-          ]
-        },
-        "pt-br": {
-          "title": "Dê um Tamanho para suas Imagens",
-          "description": [
-            "O CSS possui uma propriedade chamada <code>width</code>, que controla a largura de um elemento. Da mesma forma que com as fontes, vamos utilizar <code>px</code> (pixels) como medida para especificar a largura de nossa imagem.",
-            "Por exemplo, se queremos criar uma classe CSS chamada <code>larger-image</code> que dê aos elementos HTML uma largura de 500px, vamos usar:",
-            "<code>&#60;estilo&#62;</code>",
-            "<code>&nbsp;&nbsp;.larger-image{</code>",
-            "<code>&nbsp;&nbsp;&nbsp;&nbsp;width: 500px;</code>",
-            "<code>&nbsp;&nbsp;}</code>",
-            "<code>&#60;/style&#62;</code>",
-            "Crie uma classe chamada <code>smaller-image</code> e a utilize para mudar o tamanho da imagem para que ela tenha apenas 100 pixels de largura."
-          ]
-        },
-        "ru": {
-          "title": "Установите размер ваших изображений",
-          "description": [
-            "В CSS есть свойтсво, называемое <code>width</code>, которе управляет шириной элемента. По аналогии со шрифтами, мы используем <code>px</code> (пиксели) для указания ширины изображения.",
-            "Например, если бы мы хотели создать CSS-класс <code>larger-image</code>, который присваивал бы HTML-эементам ширину равную 500 пикселей, мы бы использовали:",
-            "<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.larger-image {<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 500px;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote>",
-            "Создайте класс <code>smaller-image</code> и используйте его для изменения размера изображений до 100 пикселей в ширину.",
-            "<strong>Внимание</strong><br>По причине разницы в реализации браузеров, вам может понадобиться установить 100% масштаб окна браузера для прохождения этого испытания."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bad87fee1348bd9bedf08813",
-      "title": "Add Borders Around your Elements",
-      "description": [
-        "CSS borders have properties like <code>style</code>, <code>color</code> and <code>width</code>",
-        "For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:",
-        "<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.thin-red-border {<br>&nbsp;&nbsp;&nbsp;&nbsp;border-color: red;<br>&nbsp;&nbsp;&nbsp;&nbsp;border-width: 5px;<br>&nbsp;&nbsp;&nbsp;&nbsp;border-style: solid;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote>",
-        "Create a class called <code>thick-green-border</code> that puts a 10-pixel-wide green border with a style of <code>solid</code> around an HTML element, and apply that class to your cat photo.",
-        "Remember that you can apply multiple classes to an element by separating each class with a space within its <code>class</code> attribute. For example:",
-        "<code>&lt;img class=\"class1 class2\"&gt;</code>"
-      ],
-      "challengeSeed": [
-        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
-        "<style>",
-        "  .red-text {",
-        "    color: red;",
-        "  }",
-        "",
-        "  h2 {",
-        "    font-family: Lobster, Monospace;",
-        "  }",
-        "",
-        "  p {",
-        "    font-size: 16px;",
-        "    font-family: Monospace;",
-        "  }",
-        "",
-        "  .smaller-image {",
-        "    width: 100px;",
-        "  }",
-        "</style>",
-        "",
-        "<h2 class=\"red-text\">CatPhotoApp</h2>",
-        "",
-        "<img class=\"smaller-image\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
-        "",
-        "<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
-        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
-      ],
-      "tests": [
-        "assert($(\"img\").hasClass(\"smaller-image\"), 'message: Your <code>img</code> element should have the class <code>smaller-image</code>.');",
-        "assert($(\"img\").hasClass(\"thick-green-border\"), 'message: Your <code>img</code> element should have the class <code>thick-green-border</code>.');",
-        "assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\"), 10) >= 8 && parseInt($(\"img\").css(\"border-top-width\"), 10) <= 12, 'message: Give your image a border width of <code>10px</code>.');",
-        "assert($(\"img\").css(\"border-right-style\") === \"solid\", 'message: Give your image a border style of <code>solid</code>.');",
-        "assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", 'message: The border around your <code>img</code> element should be green.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "de": {
-          "description": [
-            "CSS Rahmen haben Attribute wie <code>style</code>, <code>color</code> und <code>width</code>",
-            "Wenn wir nun einen roten, 5 Pixel dicken Rahmen um ein HTML Element setzen wollen, könnten wir diese Klasse verwenden:",
-            "<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.thin-red-border {<br>&nbsp;&nbsp;&nbsp;&nbsp;border-color: red;<br>&nbsp;&nbsp;&nbsp;&nbsp;border-width: 5px;<br>&nbsp;&nbsp;&nbsp;&nbsp;border-style: solid;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote>",
-            "Erstelle die Klasse <code>thick-green-border</code>, welche einen 10 Pixel dicken, grünen Rahmen mit dem Style <code>solid</code> um ein HTML Element setzt. Füge diese Klasse deinem Katzenfoto hinzu.",
-            "Vergiss nicht, dass du einem Element mehrere Klassen geben kannst indem du jede Klasse mit einem Leerzeichen im <code>class</code> Attribut trennst. Zum Beispiel:",
-            "<code>&lt;img class=\"class1 class2\"&gt;</code>"
-          ]
-        },
-        "fr": {
-          "title": "Ajouter des bordures autour de vos éléments",
-          "description": [
-            "Les bordures CSS ont des propriétés comme <code>style</code>, <code>color</code> et <code>width</code>",
-            "Par exemple, si nous voulons créer une bordure de 5 pixel rouge autour d'un élément HTML, nous pouvons utiliser cette classe :",
-            "<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.thin-red-border {<br>&nbsp;&nbsp;&nbsp;&nbsp;border-color: red;<br>&nbsp;&nbsp;&nbsp;&nbsp;border-width: 5px;<br>&nbsp;&nbsp;&nbsp;&nbsp;border-style: solid;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote>",
-            "Créer une classe nommée <code>thick-green-border</code> qui ajoute une bordure verte de 10 pixel avec un style <code>solid</code> autour d'un élément HTML. Appliquez ensuite cette classe sur votre photo de chat.",
-            "Souvenez-vous que vous pouvez appliquer plus d'une classe sur un élément en les séparant par un espace, le tout dans l'attribut <code>class</code> de l'élément. Par exemple :",
-            "<code>&lt;img class=\"class1 class2\"&gt;</code>"
-          ]
-        },
-        "pt-br": {
-          "title": "Adicione Bordas ao Redor de seus Elementos",
-          "description": [
-            "As bordas em CSS possuem propriedades como <code>style</code>, <code>color</code> e <code>width</code>",
-            "Por exemplo, se queremos criar uma borda com tamanho de 5 pixels de cor vermelha ao redor de um elemento HTML, podemos utilizar esta classe:",
-            "<code>&#60;style&#62;</code>",
-            "<code>&nbsp;&nbsp;.thin-red-border {</code>",
-            "<code>&nbsp;&nbsp;&nbsp;&nbsp;border-color: red;</code>",
-            "<code>&nbsp;&nbsp;&nbsp;&nbsp;border-width: 5px;</code>",
-            "<code>&nbsp;&nbsp;&nbsp;&nbsp;border-style: solid;</code>",
-            "<code>&nbsp;&nbsp;}</code>",
-            "<code>&#60;/style&#62;</code>",
-            "Crie uma classe chamada <code>thick-green-border</code> que insira uma borda verde de 10 pixels de largura com um estilo <code>solid</code> ao redor de um elemento HTML, e então adicione essa classe em sua foto com o gato.",
-            "Lembre que você pode aplicar diversas classes a um elemento separando cada uma das classes com um espaço, dentro do atributo <code>class</code>. Por exemplo:",
-            "<code>&lt;img class=\"clase1 clase2\"&gt;</code>"
-          ]
-        },
-        "ru": {
-          "title": "Дбавьте границы вокруг ваших элементов",
-          "description": [
-            "CSS-границы имеют свойства: <code>style</code>, <code>color</code> и <code>width</code>",
-            "Например, если бы мы хотели создать красную границу шириной в 5 пикселей вокруг HTML-элемента, мы могли бы использовать этот класс:",
-            "<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.thin-red-border {<br>&nbsp;&nbsp;&nbsp;&nbsp;border-color: red;<br>&nbsp;&nbsp;&nbsp;&nbsp;border-width: 5px;<br>&nbsp;&nbsp;&nbsp;&nbsp;border-style: solid;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote>",
-            "Создайте класс <code>thick-green-border</code>, который добавляет зелёную границу шириной в 10 пикселей со стилем <code>solid</code> вокруг HTML-элемента и примените этот класс к вашему фото кота.",
-            "Помните, что вы можете может применить множество классов к одному элементу путём разделения их с помощью пробела внутри атрибута <code>class</code>. Например:",
-            "<code>&lt;img class=\"class1 class2\"&gt;</code>"
-          ]
-        }
-      }
-    },
-    {
-      "id": "bad87fee1348bd9aedf08814",
-      "title": "Add Rounded Corners with a Border Radius",
-      "description": [
-        "Your cat photo currently has sharp corners. We can round out those corners with a CSS property called <code>border-radius</code>.",
-        "You can specify a <code>border-radius</code> with pixels. Give your cat photo a <code>border-radius</code> of <code>10px</code>.",
-        "Note: this waypoint allows for multiple possible solutions. For example, you may add <code>border-radius</code> to either the <code>.thick-green-border</code> class or <code>.smaller-image</code> class."
-      ],
-      "challengeSeed": [
-        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
-        "<style>",
-        "  .red-text {",
-        "    color: red;",
-        "  }",
-        "",
-        "  h2 {",
-        "    font-family: Lobster, Monospace;",
-        "  }",
-        "",
-        "  p {",
-        "    font-size: 16px;",
-        "    font-family: Monospace;",
-        "  }",
-        "",
-        "  .thick-green-border {",
-        "    border-color: green;",
-        "    border-width: 10px;",
-        "    border-style: solid;",
-        "  }",
-        "",
-        "  .smaller-image {",
-        "    width: 100px;",
-        "  }",
-        "</style>",
-        "",
-        "<h2 class=\"red-text\">CatPhotoApp</h2>",
-        "",
-        "<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
-        "",
-        "<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
-        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
-      ],
-      "tests": [
-        "assert($(\"img\").hasClass(\"thick-green-border\"), 'message: Your image element should have the class \"thick-green-border\".');",
-        "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'message: Your image should have a border radius of <code>10px</code>');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "de": {
-          "title": "Füge abgerundete Ecken mit Border Radius hinzu",
-          "description": [
-            "Dein Katzenfoto hat momentan spitze Ecken. Wir können diese Ecken mit dem CSS Attribut <code>border-radius</code> abrunden.",
-            "Du kannst einen <code>border-radius</code> mit Pixeln deklarieren. Gib deinem Katzenfoto einen <code>border-radius</code> von <code>10px</code>.",
-            "Beachte dass es für diese Challenge verschiedene mögliche Lösungsansätze gibt. Zum Beispiel könntest du einen <code>border-radius</code> zu der <code>.thick-green-border</code> oder <code>.smaller-image</code> Klasse hinzufügen."
-          ]
-        },
-        "es": {
-          "title": "Agrega esquinas redondeadas usando Border Radius",
-          "description": [
-            "Tu foto del gato tiene actualmente esquinas angulares. Podemos redondear esas esquinas con una propiedad CSS llamada <code>border-radius</code>.",
-            "Puedes especificar <code>border-radius</code> usando pixeles. Dale a tu foto del gato un <code>border-radius</code> de <code>10px</code>.",
-            "Nota: este desafío acepta múltiples soluciones. Por ejemplo, puedes agregar <code>border-radius</code> ya sea a la clase <code>.thick-green-border</code> o a la clase <code>.smaller-image</code>."
-          ]
-        },
-        "pt-br": {
-          "title": "Insira Bordas Arredondadas com o Border Radius",
-          "description": [
-            "Sua foto com o gato possui cantos pontiagudos. Podemos arredondar os cantos com uma propriedade CSS chamado <code>border-radius</code>.",
-            "Você pode especificar um <code>border-radius</code> com pixels. Adicione um <code>border-radius</code> de <code>10px</code> para a sua foto.",
-            "Nota: Este desafio permite várias soluções possíveis. Por exemplo, você pode adicionar o <code>border-radius</code> tanto para a classe <code>.thick-green-border</code> como para a classe <code>.smaller-image</code>."
-          ]
-        },
-        "ru": {
-          "title": "Добавьте скруглённые углы с помощью радиуса границы",
-          "description": [
-            "У вашего фото кота сейчас острые углы. Мы можем скруглить углы используя CSS-свойство <code>border-radius</code>.",
-            "Вы можете указать значения <code>border-radius</code> в пикселях. Присвойте вашему фото кота свойство <code>border-radius</code> со значением <code>10px</code>.",
-            "Внимание: это задание подразумевает наличие нескольких возможных решений. Например, вы можете добавить <code>border-radius</code> как к классу <code>.thick-green-border</code>, так и к классу <code>.smaller-image</code>."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bad87fee1348bd9aedf08815",
-      "title": "Make Circular Images with a Border Radius",
-      "description": [
-        "In addition to pixels, you can also specify a <code>border-radius</code> using a percentage.",
-        "Give your cat photo a <code>border-radius</code> of <code>50%</code>."
-      ],
-      "challengeSeed": [
-        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
-        "<style>",
-        "  .red-text {",
-        "    color: red;",
-        "  }",
-        "",
-        "  h2 {",
-        "    font-family: Lobster, Monospace;",
-        "  }",
-        "",
-        "  p {",
-        "    font-size: 16px;",
-        "    font-family: Monospace;",
-        "  }",
-        "",
-        "  .thick-green-border {",
-        "    border-color: green;",
-        "    border-width: 10px;",
-        "    border-style: solid;",
-        "    border-radius: 10px;",
-        "  }",
-        "",
-        "  .smaller-image {",
-        "    width: 100px;",
-        "  }",
-        "</style>",
-        "",
-        "<h2 class=\"red-text\">CatPhotoApp</h2>",
-        "",
-        "<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
-        "",
-        "<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
-        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
-      ],
-      "tests": [
-        "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'message: Your image should have a border radius of <code>50&#37;</code>&#44; making it perfectly circular.');",
-        "assert(code.match(/50%/g), 'message: Be sure to use a percentage value of <code>50&#37;</code>.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "de": {
-          "title": "Erstelle runde Bilder mit einem Border Radius",
-          "description": [
-            "Du kannst einem <code>border-radius</code> neben Pixeln auch Prozentwerte zuweisen.",
-            "Gib deinem Katzenfoto einen <code>border-radius</code> von <code>50%</code>."
-          ]
-        },
-        "es": {
-          "title": "Crea imágenes circulares usando Border Radius",
-          "description": [
-            "Además de pixeles, puedes especificar un <code>border-radius</code> usando porcentajes.",
-            "Dale a tu foto del gato un <code>border-radius</code> de <code>50%</code>."
-          ]
-        },
-        "pt-br": {
-          "title": "Deixe as Imagens Circulares com o Border Radius",
-          "description": [
-            "Assim como pixels, você também pode usar o <code>border-radius</code> com porcentagens.",
-            "Dê para a sua foto de gato um <code>border-radius</code> de <code>50%</code>."
-          ]
-        },
-        "ru": {
-          "title": "Сделайте круглые изображения с помощью радиуса границы",
-          "description": [
-            "В дополнение к пикселям, вы также может использовать проценты для указания значения свойства <code>border-radius</code>.",
-            "Присвойте вашему фото кота свойство <code>border-radius</code> со значением <code>50%</code>."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bad87fee1348bd9aedf08816",
-      "title": "Link to External Pages with Anchor Elements",
-      "description": [
-        "<code>a</code> elements, also known as <code>anchor</code> elements, are used to link to content outside of the current page.",
-        "Here's a diagram of an <code>a</code> element. In this case, the <code>a</code> element is used in the middle of a paragraph element, which means the link will appear in the middle of a sentence.",
-        "<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
-        "Here's an example:",
-        "<code>&#60;p&#62;Here's a &#60;a href=\"http://freecodecamp.com\"&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>",
-        "Create an <code>a</code> element that links to <code>http://freecatphotoapp.com</code> and has \"cat photos\" as its <code>anchor text</code>."
-      ],
-      "challengeSeed": [
-        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
-        "<style>",
-        "  .red-text {",
-        "    color: red;",
-        "  }",
-        "",
-        "  h2 {",
-        "    font-family: Lobster, Monospace;",
-        "  }",
-        "",
-        "  p {",
-        "    font-size: 16px;",
-        "    font-family: Monospace;",
-        "  }",
-        "",
-        "  .thick-green-border {",
-        "    border-color: green;",
-        "    border-width: 10px;",
-        "    border-style: solid;",
-        "    border-radius: 50%;",
-        "  }",
-        "",
-        "  .smaller-image {",
-        "    width: 100px;",
-        "  }",
-        "</style>",
-        "",
-        "<h2 class=\"red-text\">CatPhotoApp</h2>",
-        "",
-        "<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
-        "",
-        "<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
-        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
-      ],
-      "tests": [
-        "assert((/cat photos/gi).test($(\"a\").text()), 'message: Your <code>a</code> element should have the <code>anchor text</code> of \"cat photos\".');",
-        "assert(/http:\\/\\/(www\\.)?freecatphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'message: You need an <code>a</code> element that links to <code>http&#58;//freecatphotoapp<wbr>.com</code>');",
-        "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/<a/g).length, 'message: Make sure your <code>a</code> element has a closing tag.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "de": {
-          "title": "Verlinke externe Seiten mit Anker Elementen",
-          "description": [
-            "<code>a</code> Elemente, auch bekannt als <code>anchor</code> (Anker) Elemente, werden verwendet um auf Inhalte außerhalb der aktuellen Seite zu verlinken.",
-            "So sieht ein <code>a</code> Element aus. In diesem Fall wird es innerhalb eines Paragraphen Elements verwendet. Das bedeutet dein Link wird innerhalb des Satzes erscheinen.",
-            "<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"Eine Darstellung wie man Anker Elemente geschrieben werden mit dem gleichen Text wie in der folgenden Zeile\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
-            "Hier ist ein Beispiel:",
-            "<code>&#60;p&#62;Hier ist ein &#60;a href=\"http://freecodecamp.com\"&#62; Link zu Free Code Camp&#60;/a&#62; dem du folgen kannst.&#60;/p&#62;</code>",
-            "Erstelle ein <code>a</code> Element, das auf <code>http://freecatphotoapp.com</code> verlinkt und den \"cat photos\" als <code>anchor text</code> (Link-Text) beinhaltet."
-          ]
-        },
-        "es": {
-          "title": "Enlaza páginas externas con elementos ancla",
-          "description": [
-            "Los elementos <code>a</code>, también conocidos como elementos <code>ancla</code>, se utilizan para enlazar a contenido fuera de la página actual.",
-            "Aquí está un diagrama de un elemento <code>a</code>. En este caso, el elemento <code>a</code> se utiliza en el medio de un elemento de párrafo, lo que significa que el enlace aparecerá en el medio de una frase. ",
-            "<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"> <img class=\"img-responsive\" title=\"Haz clic para ampliar\" alt=\"un diagrama de cómo las etiquetas de ancla se componen con el mismo texto, como en la siguiente línea\" src=\"//i.imgur.com/hviuZwe.png\"></a> ",
-            "He aquí un ejemplo:",
-            "<code>&#60;p&#62;Aquí está un &#60;a href=\"https://freecodecamp.com\"&#62; enlace a Free Code Camp&#60;/a&#62; para que lo sigas.&#60;/p&#62;</code>",
-            "Crea un elemento <code>a</code> que se vincule a <code>http://freecatphotoapp.com</code> y tenga como <code>texto de ancla</code> \"fotos de gatos\"."
-          ]
-        },
-        "pt-br": {
-          "title": "Ligue Páginas Externas com o Elemento Âncora",
-          "description": [
-            "Os elementos <code>a</code>, também conhecidos como elementos <code>âncora</code>, são utilizados para ligar conteúdo fora da página atual.",
-            "Aqui está um diagrama de um elemento <code>a</code>. Neste caso, o elemento <code>a</code> é utilizado no meio de um elemento de parágrafo, o que significa que o link externo aparecerá no meio de uma frase.",
-            "<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"> <img class=\"img-responsive\" title=\"Clique para ampliar\" alt=\"diagrama de como as tags de âncora se compõem com o texto, como na próxima linha\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
-            "Veja um exemplo:",
-            "<code>&#60;p&#62;Aqui está um &#60;a href=\"https://freecodecamp.com\"&#62; link ligado ao Free Code Camp&#60;/a&#62; para que você o siga.&#60;/p&#62;</code>",
-            "Crie um elemento <code>a</code> que esteja ligado ao site <code>http://freecatphotoapp.com</code> e tenha como <code>texto de âncora</code> \"fotos de gatos\"."
-          ]
-        },
-        "ru": {
-          "title": "Присоедините внешние страницы с помощью якорных элементов",
-          "description": [
-            "Элементы <code>a</code>, также известные как <code>якорные</code> элементы, применяют для связи с содержимым вне текущей страницы.",
-            "Вот диаграмма элемента <code>a</code>. В этом случае, элемент <code>a</code> использован в середине элемента параграфа, что значит, что ссылка появится в середине предложения.",
-            "<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
-            "Вот пример:",
-            "<code>&#60;p&#62;Вот &#60;a href=\"http://freecodecamp.com\"&#62; ссылка на Free Code Camp&#60;/a&#62; для перехода на ресурс.&#60;/p&#62;</code>",
-            "Создайте элемент <code>a</code>, который присоединяет <code>http://freecatphotoapp.com</code> и имеет значение \"cat photos\" в качестве <code>текста якоря</code>."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bad87fee1348bd9aede08817",
-      "title": "Nest an Anchor Element within a Paragraph",
-      "description": [
-        "Again, here's a diagram of an <code>a</code> element for your reference:",
-        "<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
-        "Here's an example:",
-        "<code>&#60;p&#62;Here's a &#60;a href=\"https://freecodecamp.com\"&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>",
-        "<code>Nesting</code> just means putting one element inside of another element.",
-        "Now nest your existing <code>a</code> element within a new <code>p</code> element (just after the existing <code>h2</code> element) so that the surrounding paragraph says \"View more cat photos\", but where only \"cat photos\" is a link, and the rest of the text is plain text."
-      ],
-      "challengeSeed": [
-        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
-        "<style>",
-        "  .red-text {",
-        "    color: red;",
-        "  }",
-        "",
-        "  h2 {",
-        "    font-family: Lobster, Monospace;",
-        "  }",
-        "",
-        "  p {",
-        "    font-size: 16px;",
-        "    font-family: Monospace;",
-        "  }",
-        "",
-        "  .thick-green-border {",
-        "    border-color: green;",
-        "    border-width: 10px;",
-        "    border-style: solid;",
-        "    border-radius: 50%;",
-        "  }",
-        "",
-        "  .smaller-image {",
-        "    width: 100px;",
-        "  }",
-        "</style>",
-        "",
-        "<h2 class=\"red-text\">CatPhotoApp</h2>",
-        "",
-        "<a href=\"http://freecatphotoapp.com\">cat photos</a>",
-        "",
-        "<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
-        "",
-        "<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
-        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
-      ],
-      "tests": [
-        "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").length > 0 || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").length > 0), 'message: You need an <code>a</code> element that links to \"http://freecatphotoapp.com\".');",
-        "assert($(\"a\").text().match(/cat\\sphotos/gi), 'message: Your <code>a</code> element should have the anchor text of \"cat photos\"');",
-        "assert($(\"p\") && $(\"p\").length > 2, 'message: Create a new <code>p</code> element around your <code>a</code> element.');",
-        "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").parent().is(\"p\") || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().is(\"p\")), 'message: Your <code>a</code> element should be nested within your new <code>p</code> element.');",
-        "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").parent().text().match(/View\\smore\\s/gi) || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().text().match(/View\\smore\\s/gi)), 'message: Your <code>p</code> element should have the text \"View more \" (with a space after it).');",
-        "assert(!$(\"a\").text().match(/View\\smore/gi), 'message: Your <code>a</code> element should <em>not</em> have the text \"View more\".');",
-        "assert(code.match(/<\\/p>/g) && code.match(/<p/g) && code.match(/<\\/p>/g).length === code.match(/<p/g).length, 'message: Make sure each of your <code>p</code> elements has a closing tag.');",
-        "assert(code.match(/<\\/a>/g) && code.match(/<a/g) && code.match(/<\\/a>/g).length === code.match(/<a/g).length, 'message: Make sure each of your <code>a</code> elements has a closing tag.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "de": {
-          "title": "Umschließe ein Anker Element mit einem Paragraphen",
-          "description": [
-            "Hier ist nochmal ein Beispiel für ein <code>a</code> Element:",
-            "<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Klick zum Vergrößern\" alt=\"Eine Darstellung wie Anker Elemente geschrieben werden mit dem gleichen Text wie in der folgenden Zeile\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
-            "Hier ist ein Beispiel:",
-            "<code>&#60;p&#62;Hier ist ein &#60;a href=\"https://freecodecamp.com\"&#62; Link zu Free Code Camp&#60;/a&#62; dem du folgen kannst.&#60;/p&#62;</code>",
-            "<code>Nesting</code> bedeuted ein Element innerhalb eines anderen Elements zu schreiben",
-            "Jetzt umschließe dein <code>a</code> Element mit einem neuen <code>p</code> Element (direkt nach dem bereits existierenden <code>h2</code> Element) indem steht \"View more cat photos\", wo allerdings nur \"cat photos\" ein Link ist und der Rest normaler Text."
-          ]
-        },
-        "es": {
-          "title": "Anida un elemento de ancla dentro de un párrafo",
-          "description": [
-            "Una vez más, aquí está un diagrama de un elemento <code>a</code> para tu referencia:",
-            "<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Pulse para ampliar\" alt=\"un diagrama de como se componen las etiquetas de anclaje con el texto como en la siguiente línea\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
-            "He aquí un ejemplo:",
-            "<code>&#60;p&#62;Aquí hay un &#60;a href=\"https://freecodecamp.com\"&#62; enlace a Free Code Camp&#60;/a&#62; para que lo sigas.&#60;/p&#62;</code>",
-            "<code>Anidamiento</code> simplemente significa poner un elemento dentro de otro elemento.",
-            "Ahora anida el elemento <code>a</code> existente dentro de un nuevo elemento <code>p</code> (justo después del elemento <code>h2</code> que ya tienes) de tal forma que el párrafo que lo rodee diga \"View more cat photos\", pero que sólo \"cat photos\" sea un enlace, y el resto sea texto plano ."
-          ]
-        },
-        "pt-br": {
-          "title": "Aninhe o Elemento Âncora no Interior de um Parágrafo",
-          "description": [
-            "Outra vez, aqui está um diagrama de um elemento <code>a</code> para você usar como referência.",
-            "<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Clique para ampliar\" alt=\"diagrama de como são as tags de âncora com o texto como na linha seguinte\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
-            "Veja um exemplo:",
-            "<code>&#60;p&#62;Este é um &#60;a href=\"https://freecodecamp.com\"&#62; link ligado ao Free Code Camp&#60;/a&#62; para que você o siga.&#60;/p&#62;</code>",
-            "<code>Aninhamento</code> significa ter um elemento no interior de outro elemento.",
-            "Agora, aninhe o elemento <code>a</code> existente dentro de um novo elemento <code>p</code> de forma que o parágrafo diga \"View more cat photos\", mas onde apenas \"cat photos\" seja um link, e o resto seja texto comum."
-          ]
-        },
-        "ru": {
-          "title": "Создайте вложенный якорный элемент внутри параграфа",
-          "description": [
-            "Вот диаграмма элемента <code>a</code>:",
-            "<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
-            "Вот пример:",
-            "<code>&#60;p&#62;Вот &#60;a href=\"https://freecodecamp.com\"&#62; ссылка на Free Code Camp&#60;/a&#62; для перехода на ресурс.&#60;/p&#62;</code>",
-            "<code>Вложенность</code> значит установку одного элемента внутрь друго элемента.",
-            "Теперь вложите ваш существующий элемент <code>a</code> внутрь нового элемента <code>p</code> (сразу после существующего элемента <code>h2</code>) таким образом, что добавляемый параграф сообщает: \"View more cat photos\", но где только \"cat photos\" является ссылкой, а остальной текст обычный."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bad87fee1348bd9aedf08817",
-      "title": "Make Dead Links using the Hash Symbol",
-      "description": [
-        "Sometimes you want to add <code>a</code> elements to your website before you know where they will link.",
-        "This is also handy when you're changing the behavior of a link using <code>jQuery</code>, which we'll learn about later.",
-        "The current value of the <code>href</code> attribute is a link that points to \"http://freecatphotoapp.com\". Replace the <code>href</code> attribute value with a <code>#</code>, also known as a hash symbol, to create a dead link."
-      ],
-      "challengeSeed": [
-        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
-        "<style>",
-        "  .red-text {",
-        "    color: red;",
-        "  }",
-        "",
-        "  h2 {",
-        "    font-family: Lobster, Monospace;",
-        "  }",
-        "",
-        "  p {",
-        "    font-size: 16px;",
-        "    font-family: Monospace;",
-        "  }",
-        "",
-        "  .thick-green-border {",
-        "    border-color: green;",
-        "    border-width: 10px;",
-        "    border-style: solid;",
-        "    border-radius: 50%;",
-        "  }",
-        "",
-        "  .smaller-image {",
-        "    width: 100px;",
-        "  }",
-        "</style>",
-        "",
-        "<h2 class=\"red-text\">CatPhotoApp</h2>",
-        "",
-        "<p>Click here to view more <a href=\"http://freecatphotoapp.com\">cat photos</a>.</p>",
-        "",
-        "<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
-        "",
-        "<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
-        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
-      ],
-      "tests": [
-        "assert($(\"a\").attr(\"href\") === \"#\", 'message: Your <code>a</code> element should be a dead link with the value of the <code>href</code> attribute set to \"#\".');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "de": {
-          "title": "Erstelle tote Links mit dem Hash Symbol",
-          "description": [
-            "Manchmal wirst du <code>a</code> Elemente zu deiner Website hinzufügen möchten, ohne dass du das Ziel des Links kennst.",
-            "Das ist auch nützlich, wenn du die Funktion eines Links mit <code>jQuery</code> verändern willst. Das werden wir später noch behandeln.",
-            "Ersetze den Inhalt des <code>href</code> Attributs deines <code>a</code> Elements mit einem <code>#</code>, auch bekannt als Hash Symbol, um einen toten Link zu erzeugen."
-          ]
-        },
-        "es": {
-          "title": "Haz vínculos muertos utilizando el símbolo de numero",
-          "description": [
-            "A veces quieres agregar elementos <code>a</code> a tu sitio web antes de saber qué enlazarán.",
-            "Esto también es útil cuando estás cambiando el comportamiento de un enlace usando <code>jQuery</code>, lo cual aprenderemos más adelante.",
-            "Reemplaza el atributo <code>href</code> de tu elemento <code>a</code> con un <code>#</code>, también conocido como un símbolo de número o de <em>hash</em>, para convertirlo en un vínculo muerto."
-          ]
-        },
-        "pt-br": {
-          "title": "Crie Links Inativos com o Símbolo Cerquilha",
-          "description": [
-            "As vezes você pode querer adicionar elementos <code>a</code> em sua página web antes de saber o link que as ligará.",
-            "Isso também é útil quando você desejar mudar o comportamento de um link utilizando <code>jQuery</code>, o que vamos aprender mais adiante.",
-            "Substitua o atributo <code>href</code> de seu elemento <code>a</code> por um <code>#</code>, também conhecido como símbolo de <em>hash</em> ou hashtag. Isso o transformará em um link inativo."
-          ]
-        },
-        "ru": {
-          "title": "Создайте мёртвые ссылки используя хэш-символ",
-          "description": [
-            "Иногда вам нужно добавить элементы <code>a</code> к вашему сайту до того, как вы знаете куда будут вести ссылки.",
-            "Также это может оказаться полезно, когда вы меняете поведение ссылки используя <code>jQuery</code>, что мы изучим позже.",
-            "Замените значение атрибута <code>href</code> вашего элемента <code>a</code> на <code>#</code>, известное как хэш-символ, для превращения элемента в мёртвую ссылку."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bad87fee1348bd9aedf08820",
-      "title": "Turn an Image into a Link",
-      "description": [
-        "You can make elements into links by nesting them within an <code>a</code> element.",
-        "Nest your image within an <code>a</code> element. Here's an example:",
-        "<code>&#60;a href=\"#\"&#62;&#60;img src=\"https://bit.ly/fcc-running-cats\" alt=\"Three kittens running towards the camera.\"&#62;&#60;/a&#62;</code>",
-        "Remember to use <code>#</code> as your <code>a</code> element's <code>href</code> property in order to turn it into a dead link.",
-        "Place the existing image element within an anchor element.",
-        "Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link."
-      ],
-      "challengeSeed": [
-        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
-        "<style>",
-        "  .red-text {",
-        "    color: red;",
-        "  }",
-        "",
-        "  h2 {",
-        "    font-family: Lobster, Monospace;",
-        "  }",
-        "",
-        "  p {",
-        "    font-size: 16px;",
-        "    font-family: Monospace;",
-        "  }",
-        "",
-        "  .thick-green-border {",
-        "    border-color: green;",
-        "    border-width: 10px;",
-        "    border-style: solid;",
-        "    border-radius: 50%;",
-        "  }",
-        "",
-        "  .smaller-image {",
-        "    width: 100px;",
-        "  }",
-        "</style>",
-        "",
-        "<h2 class=\"red-text\">CatPhotoApp</h2>",
-        "",
-        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
-        "",
-        "<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
-        "",
-        "<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
-        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
-      ],
-      "tests": [
-        "assert($(\"a\").children(\"img.smaller-image\").length > 0, 'message: Nest the existing <code>img</code> element within an <code>a</code> element.');",
-        "assert(new RegExp(\"#\").test($(\"a\").children(\"img\").parent().attr(\"href\")), 'message: Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.');",
-        "assert(code.match(/<\\/a>/g) && code.match(/<a/g) && code.match(/<\\/a>/g).length === code.match(/<a/g).length, 'message: Make sure each of your <code>a</code> elements has a closing tag.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "de": {
-          "title": "Verlinke ein Bild",
-          "description": [
-            "Du kannst jedes Element in einen Link verwandeln, indem du es mit einem <code>a</code> Element umschließt.",
-            "Umschließe dein Bild mit einem <code>a</code> Element. Hier ist ein Beispiel:",
-            "<code>&#60;a href=\"#\"&#62;&#60;img src=\"https://bit.ly/fcc-running-cats\"&#62;&#60;/a&#62;</code>",
-            "Vergewissere dich, dass du ein <code>#</code> innerhalb des <code>href</code> Attributs des <code>a</code> Elements nutzt, um daraus einen toten Link zu machen.",
-            "Sobald du das gemacht hast, kannst du mit der Maus über dein Bild fahren. Der normale Mauszeiger sollte nun zu einer Hand für Links werden. Das Bild ist jetzt ein Link."
-          ]
-        },
-        "es": {
-          "title": "Convierte una imagen en un vínculo",
-          "description": [
-            "Puedes convertir elementos en enlaces al anidarlos dentro de un elemento <code>a</code>.",
-            "Anida tu imagen dentro de un elemento <code>a</code>. He aquí un ejemplo: ",
-            "<code>&#60;a href=\"#\"&#62;&#60;img src=\"https://bit.ly/fcc-running-cats\"/&#62;&#60;/a&#62;</code>",
-            "Recuerda usar <code>#</code> como atributo <code>href</code> de tu elemento <code>a</code> con el fin de convertirlo en un vínculo muerto.",
-            "Una vez hayas hecho esto, coloca el cursor sobre tu imagen. El puntero normal de tu cursor debería convertirse en el puntero de enlace. La foto es ahora un vínculo ."
-          ]
-        },
-        "pt-br": {
-          "title": "Transforme uma Imagem em um Link",
-          "description": [
-            "Você pode transformar elementos em links ao aninhá-los com um elemento <code>a</code>.",
-            "Aninhe sua imagem dentro de um elemento <code>a</code>. Temos aqui um exemplo.",
-            "<code>&#60;a href=\"#\"&#62;&#60;img src=\"https://bit.ly/fcc-running-cats\"/&#62;&#60;/a&#62;</code>",
-            "Lembre de usar <code>#</code> como atributo <code>href</code> de seu elemento <code>a</code> para tornar o link inativo."
-          ]
-        },
-        "ru": {
-          "title": "Превратите изображение в ссылку",
-          "description": [
-            "Вы можете превратить элементы в ссылки путём их вложения внутрь элементов <code>a</code>.",
-            "Вложите ваше изображение в элемент <code>a</code>. Вот пример:",
-            "<code>&#60;a href=\"#\"&#62;&#60;img src=\"https://bit.ly/fcc-running-cats\"&#62;&#60;/a&#62;</code>",
-            "Не забывайте использовать <code>#</code> в качестве значения атрибута <code>href</code> вашего элемента <code>a</code> для превращения ссылки в мёртвую.",
-            "Как только вы это сделаете, наведите курсор мыши на ваше изображение. При этом курсор должен изменить вид с обычного на используемый при наведении на ссылки. Ваше фото теперь является ссылкой."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bad87fee1348bd9aedf08827",
-      "title": "Create a Bulleted Unordered List",
-      "description": [
-        "HTML has a special element for creating <code>unordered lists</code>, or bullet point-style lists.",
-        "Unordered lists start with a <code>&#60;ul&#62;</code> element. Then they contain some number of <code>&#60;li&#62;</code> elements.",
-        "For example: ",
-        "<blockquote>&#60;ul&#62;<br>&nbsp;&nbsp;&#60;li&#62;milk&#60;/li&#62;<br>&nbsp;&nbsp;&#60;li&#62;cheese&#60;/li&#62;<br>&#60;/ul&#62;</blockquote>",
-        "would create a bullet point-style list of \"milk\" and \"cheese\".",
-        "Remove the last two <code>p</code> elements and create an unordered list of three things that cats love at the bottom of the page."
-      ],
-      "challengeSeed": [
-        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
-        "<style>",
-        "  .red-text {",
-        "    color: red;",
-        "  }",
-        "",
-        "  h2 {",
-        "    font-family: Lobster, Monospace;",
-        "  }",
-        "",
-        "  p {",
-        "    font-size: 16px;",
-        "    font-family: Monospace;",
-        "  }",
-        "",
-        "  .thick-green-border {",
-        "    border-color: green;",
-        "    border-width: 10px;",
-        "    border-style: solid;",
-        "    border-radius: 50%;",
-        "  }",
-        "",
-        "  .smaller-image {",
-        "    width: 100px;",
-        "  }",
-        "</style>",
-        "",
-        "<h2 class=\"red-text\">CatPhotoApp</h2>",
-        "",
-        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
-        "",
-        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
-        "",
-        "<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
-        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
-      ],
-      "tests": [
-        "assert($(\"ul\").length > 0, 'message: Create a <code>ul</code> element.');",
-        "assert($(\"ul li\").length > 2, 'message: You should have three <code>li</code> elements within your <code>ul</code> element.');",
-        "assert(code.match(/<\\/ul>/gi) && code.match(/<ul/gi) && code.match(/<\\/ul>/gi).length === code.match(/<ul/gi).length, 'message: Make sure your <code>ul</code> element has a closing tag.');",
-        "assert(code.match(/<\\/li>/gi) && code.match(/<li[\\s>]/gi) && code.match(/<\\/li>/gi).length === code.match(/<li[\\s>]/gi).length, 'message: Make sure your <code>li</code> elements have closing tags.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "de": {
-          "title": "Erstelle eine ungeordnete Liste",
-          "description": [
-            "HTML hat ein spezielles Element zum Erstellen von <code>unordered lists</code> (ungeordneten Listen).",
-            "Ungeordnete Listen starten mit einem <code>&#60;ul&#62;</code> Element. Dann beinhalten sie eine gewisse Anzahl an <code>&#60;li&#62;</code> Elementen.",
-            "Zum Beispiel:",
-            "<blockquote>&#60;ul&#62;<br>&nbsp;&nbsp;&#60;li&#62;Milch&#60;/li&#62;<br>&nbsp;&nbsp;&#60;li&#62;Käse&#60;/li&#62;<br>&#60;/ul&#62;</blockquote>",
-            "würde eine ungeordnete Liste für \"Milch\" und \"Käse\" erstellen.",
-            "Entferne die letzten zwei <code>p</code> Elemente und erstelle eine ungeordnete Liste von drei Dingen die Katzen lieben am Ende der Seite"
-          ]
-        },
-        "es": {
-          "title": "Crea una lista no ordenada con viñetas",
-          "description": [
-            "HTML tiene un elemento especial para la creación de <code>listas no ordenadas</code>, o listas con estilo viñeta.",
-            "Las listas no ordenadas comienzan con un elemento <code>&#60;ul&#62;</code>. A continuación contienen una cantidad de elementos <code>&#60;li&#62;.</code>",
-            "Por ejemplo: ",
-            "<blockquote>&#60;ul&#62;<br>&nbsp;&nbsp;&#60;li&#62;leche&#60;/li&#62;<br>&nbsp;&nbsp;&#60;li&#62;queso&#60;/li&#62;<br>&#60;/ul&#62;</blockquote>",
-            "creará una lista con viñetas y con elementos \"leche\" y \"queso\".",
-            "Elimina los dos últimos elementos <code>p</code> y en la parte inferior de la página crea una lista no ordenada de tres cosas que los gatos aman."
-          ]
-        },
-        "pt-br": {
-          "title": "Crie uma Lista Não Ordenada com Marcadores",
-          "description": [
-            "O HTML possui um elemento especial para a criação de <code>listas não ordenadas</code>, ou listas com marcadores.",
-            "As listas não ordenadas iniciam com um elemento <code>&#60;ul&#62;</code>. Logo após, possuem uma série de elementos <code>&#60;li&#62;.</code>",
-            "Por exemplo:",
-            "<code>&#60;ul&#62;</code>",
-            "&nbsp;&nbsp;<code>&#60;li&#62;leite&#60;/li&#62;</code>",
-            "&nbsp;&nbsp;<code>&#60;li&#62;queijo&#60;/li&#62;</code>",
-            "<code>&#60;/ul&#62;</code>",
-            "Isso criará uma lista com marcadores que tem como elementos \"leite\" e \"queijo\".",
-            "Apague os dois últimos elementos <code>p</code> e no final da página crie uma lista não ordenada com três coisas que os gatos adoram."
-          ]
-        },
-        "ru": {
-          "title": "Создайте ненумерованный неупорядоченный список",
-          "description": [
-            "В HTML есть специальный элемент для создания <code>неупорядоченного списка</code>, или списка с точками в виде меток элементов.",
-            "Неупорядоченные списки начинаются с элемента <code>&#60;ul&#62;</code>. Затем они содержат некоторе количество элементов <code>&#60;li&#62;</code>.",
-            "Например: ",
-            "<blockquote>&#60;ul&#62;<br>&nbsp;&nbsp;&#60;li&#62;milk&#60;/li&#62;<br>&nbsp;&nbsp;&#60;li&#62;cheese&#60;/li&#62;<br>&#60;/ul&#62;</blockquote>",
-            "создаст ненумерованный список из \"milk\" и \"cheese\".",
-            "Удалите последние два элемента <code>p</code> и создайте неупорядоченный список из трёх вещей, которые любят кошки."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bad87fee1348bd9aedf08828",
-      "title": "Create an Ordered List",
-      "description": [
-        "HTML has a special element for creating <code>ordered lists</code>, or numbered-style lists.",
-        "Ordered lists start with a <code>&#60;ol&#62;</code> element. Then they contain some number of <code>&#60;li&#62;</code> elements.",
-        "For example:",
-        "<blockquote>&#60;ol&#62;<br>&nbsp;&nbsp;&#60;li&#62;Garfield&#60;/li&#62;<br>&nbsp;&nbsp;&#60;li&#62;Sylvester&#60;/li&#62;<br>&#60;/ol&#62;</blockquote>",
-        "would create a numbered list of \"Garfield\" and \"Sylvester\".",
-        "Create an ordered list of the top 3 things cats hate the most."
-      ],
-      "challengeSeed": [
-        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
-        "<style>",
-        "  .red-text {",
-        "    color: red;",
-        "  }",
-        "",
-        "  h2 {",
-        "    font-family: Lobster, Monospace;",
-        "  }",
-        "",
-        "  p {",
-        "    font-size: 16px;",
-        "    font-family: Monospace;",
-        "  }",
-        "",
-        "  .thick-green-border {",
-        "    border-color: green;",
-        "    border-width: 10px;",
-        "    border-style: solid;",
-        "    border-radius: 50%;",
-        "  }",
-        "",
-        "  .smaller-image {",
-        "    width: 100px;",
-        "  }",
-        "</style>",
-        "",
-        "<h2 class=\"red-text\">CatPhotoApp</h2>",
-        "",
-        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
-        "",
-        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back.\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
-        "",
-        "<p>Things cats love:</p>",
-        "<ul>",
-        "  <li>cat nip</li>",
-        "  <li>laser pointers</li>",
-        "  <li>lasagna</li>",
-        "</ul>",
-        "<p>Top 3 things cats hate:</p>"
-      ],
-      "tests": [
-        "assert((/Top 3 things cats hate:/i).test($(\"ol\").prev().text()), 'message: You should have an ordered list for \"Top 3 things cats hate:\"');",
-        "assert((/Things cats love:/i).test($(\"ul\").prev().text()), 'message: You should have an unordered list for \"Things cats love:\"');",
-        "assert.equal($(\"ul li\").length, 3, 'message: You should have three <code>li</code> elements within your <code>ul</code> element.');",
-        "assert.equal($(\"ol li\").length, 3, 'message: You should have three <code>li</code> elements within your <code>ol</code> element.');",
-        "assert(code.match(/<\\/ul>/g) && code.match(/<\\/ul>/g).length === code.match(/<ul>/g).length, 'message: Make sure your <code>ul</code> element has a closing tag.');",
-        "assert(code.match(/<\\/ol>/g) && code.match(/<\\/ol>/g).length === code.match(/<ol>/g).length, 'message: Make sure your <code>ol</code> element has a closing tag.');",
-        "assert(code.match(/<\\/li>/g) && code.match(/<li>/g) && code.match(/<\\/li>/g).length === code.match(/<li>/g).length, 'message: Make sure your <code>li</code> element has a closing tag.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "de": {
-          "title": "Erstelle eine geordnete Liste",
-          "description": [
-            "HTML beinhaltet ein spezielles Element für <code>ordered lists</code> (geordnete Listen).",
-            "Geordnete Listen starten mit einem <code>&#60;ol&#62;</code> Element. Dann enthalten sie eine gewisse Anzahl an <code>&#60;li&#62;</code> Elementen.",
-            "Zum Beispiel:",
-            "<blockquote>&#60;ol&#62;<br>&nbsp;&nbsp;&#60;li&#62;Garfield&#60;/li&#62;<br>&nbsp;&nbsp;&#60;li&#62;Sylvester&#60;/li&#62;<br>&#60;/ol&#62;</blockquote>",
-            "würde eine nummerierte Liste mit \"Garfield\" und \"Sylvester\" erstellen.",
-            "Erstelle eine geordnete Liste von den drei Dingen, die Katzen am meisten hassen."
-          ]
-        },
-        "es": {
-          "title": "Crear una lista ordenada",
-          "description": [
-            "HTML tiene un elemento especial para la creación de <code>listas ordenadas</code>, o listas de estilo numerado.",
-            "Las listas ordenadas comienzan con un elemento <code>&#60;ol&#62;</code>. Luego contienen un número de elementos <code>&#60;li&#62;.</code>",
-            "Por ejemplo:",
-            "<blockquote>&#60;ol&#62;<br>&nbsp;&nbsp;&#60;li&#62;Garfield&#60;/li&#62;<br>&nbsp;&nbsp;&#60;li&#62;Sylvester&#60;/li&#62;<br>&#60;/ol&#62;</blockquote>",
-            "creará una lista numerada con \"Garfield\" y \"Sylvester\".",
-            "Crea una lista ordenada de los 3 cosas que más odian los gatos."
-          ]
-        },
-        "pt-br": {
-          "title": "Crie uma Lista Ordenada",
-          "description": [
-            "O HTML possui um elemento especial para a criação de <code>listas ordenadas</code>, ou listas numeradas.",
-            "As listas ordenadas iniciam com um elemento <code>&#60;ol&#62;</code>. Logo após, contém uma série de elementos <code>&#60;li&#62;.</code>",
-            "Por exemplo:",
-            "<code>&#60;ol&#62;</code>",
-            "&nbsp;&nbsp;<code>&#60;li&#62;Garfield&#60;/li&#62;</code>",
-            "&nbsp;&nbsp;<code>&#60;li&#62;Sylvester&#60;/li&#62;</code>",
-            "<code>&#60;/ol&#62;</code>",
-            "Isso criará uma lista numerada com \"Garfield\" e \"Sylvester\".",
-            "Crie uma lista ordenada com as três coisas que os gatos mais odeiam."
-          ]
-        },
-        "ru": {
-          "title": "Создайте упорядоченный список",
-          "description": [
-            "В HTML есть специальный элемент для создания <code>упорядоченных списков</code>, или списков с номерами в качестве меток элементов.",
-            "Упорядоченные списки начинаются с элемента <code>&#60;ol&#62;</code>. Далее они содержат некоторое количество элементов <code>&#60;li&#62;</code>.",
-            "Например:",
-            "<blockquote>&#60;ol&#62;<br>&nbsp;&nbsp;&#60;li&#62;Garfield&#60;/li&#62;<br>&nbsp;&nbsp;&#60;li&#62;Sylvester&#60;/li&#62;<br>&#60;/ol&#62;</blockquote>",
-            "создаст нумерованный список из \"Garfield\" и \"Sylvester\".",
-            "Создайте нумерованный список из 3-х вещей, который кошки больше всего ненавидят."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bad87fee1348bd9aedf08829",
-      "title": "Create a Text Field",
-      "description": [
-        "Now let's create a web form.",
-        "Text inputs are a convenient way to get input from your user.",
-        "You can create one like this:",
-        "<code>&#60;input type=\"text\"&#62;</code>",
-        "Note that <code>input</code> elements are self-closing.",
-        "Create an <code>input</code> element of type <code>text</code> below your lists."
-      ],
-      "challengeSeed": [
-        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
-        "<style>",
-        "  .red-text {",
-        "    color: red;",
-        "  }",
-        "",
-        "  h2 {",
-        "    font-family: Lobster, Monospace;",
-        "  }",
-        "",
-        "  p {",
-        "    font-size: 16px;",
-        "    font-family: Monospace;",
-        "  }",
-        "",
-        "  .thick-green-border {",
-        "    border-color: green;",
-        "    border-width: 10px;",
-        "    border-style: solid;",
-        "    border-radius: 50%;",
-        "  }",
-        "",
-        "  .smaller-image {",
-        "    width: 100px;",
-        "  }",
-        "</style>",
-        "",
-        "<h2 class=\"red-text\">CatPhotoApp</h2>",
-        "",
-        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
-        "",
-        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back.\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
-        "",
-        "<p>Things cats love:</p>",
-        "<ul>",
-        "  <li>cat nip</li>",
-        "  <li>laser pointers</li>",
-        "  <li>lasagna</li>",
-        "</ul>",
-        "<p>Top 3 things cats hate:</p>",
-        "<ol>",
-        "  <li>flea treatment</li>",
-        "  <li>thunder</li>",
-        "  <li>other cats</li>",
-        "</ol>"
-      ],
-      "tests": [
-        "assert($(\"input[type=text]\").length > 0, 'message: Your app should have an <code>input</code> element of type <code>text</code>.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "de": {
-          "title": "Erstelle ein Textfeld",
-          "description": [
-            "Nun erstellen wir ein Web Formular.",
-            "Eingabefelder sind eine bewährte Möglichkeit um Daten von Usern zu erhalten.",
-            "So kannst du eines erstellen:",
-            "<code>&#60;input type=\"text\"&#62;</code>",
-            "Beachte, dass <code>input</code> Elemente selbstschließend sind.",
-            "Erstelle ein <code>input</code> Element des Typ (\"type\") <code>text</code> unter deinen Listen."
-          ]
-        },
-        "es": {
-          "title": "Crea un campo de texto",
-          "description": [
-            "Ahora vamos a crear un formulario web.",
-            "Los campos de texto son una manera conveniente de obtener retroalimentación de tu usuario.",
-            "Puedes crear uno como este:",
-            "<code>&#60;input type=\"text\"&#62;</code>",
-            "Ten en cuenta que los elementos <code>input</code> son de cierre automático.",
-            "Crea un elemento <code>input</code> de tipo <code>text</code> debajo de tus listas."
-          ]
-        },
-        "pt-br": {
-          "title": "Crie um Campo de Texto",
-          "description": [
-            "Agora vamos criar um formulário web.",
-            "Os campos de texto são uma forma conveniente de obter uma resposta do usuário.",
-            "Você pode criar um assim:",
-            "<code>&#60;input type=\"text\"&#62;</code>",
-            "Note que os elementos <code>input</code> são de fechamento automático.",
-            "Crie um elemento <code>input</code> de tipo <code>text</code> abaixo de suas listas."
-          ]
-        },
-        "ru": {
-          "title": "Создайте текстовое поле",
-          "description": [
-            "Теперь давайте создадим web-форму.",
-            "Поля текстового ввода - удобный способ получения данных от пользователя.",
-            "Вы можете создать текстовое поле следующим образом:",
-            "<code>&#60;input type=\"text\"&#62;</code>",
-            "Обратите внимание, что элементы <code>input</code> самозакрывающиеся.",
-            "Создайте элемент <code>input</code> типа <code>text</code> под вашими списками."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bad87fee1348bd9aedf08830",
-      "title": "Add Placeholder Text to a Text Field",
-      "description": [
-        "Your placeholder text is what appears in your text <code>input</code> before your user has input anything.",
-        "You can create placeholder text like so:",
-        "<code>&#60;input type=\"text\" placeholder=\"this is placeholder text\"&#62;</code>",
-        "Set the <code>placeholder</code> value of your text <code>input</code> to \"cat photo URL\"."
-      ],
-      "challengeSeed": [
-        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
-        "<style>",
-        "  .red-text {",
-        "    color: red;",
-        "  }",
-        "",
-        "  h2 {",
-        "    font-family: Lobster, Monospace;",
-        "  }",
-        "",
-        "  p {",
-        "    font-size: 16px;",
-        "    font-family: Monospace;",
-        "  }",
-        "",
-        "  .thick-green-border {",
-        "    border-color: green;",
-        "    border-width: 10px;",
-        "    border-style: solid;",
-        "    border-radius: 50%;",
-        "  }",
-        "",
-        "  .smaller-image {",
-        "    width: 100px;",
-        "  }",
-        "</style>",
-        "",
-        "<h2 class=\"red-text\">CatPhotoApp</h2>",
-        "",
-        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
-        "",
-        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back.\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
-        "",
-        "<p>Things cats love:</p>",
-        "<ul>",
-        "  <li>cat nip</li>",
-        "  <li>laser pointers</li>",
-        "  <li>lasagna</li>",
-        "</ul>",
-        "<p>Top 3 things cats hate:</p>",
-        "<ol>",
-        "  <li>flea treatment</li>",
-        "  <li>thunder</li>",
-        "  <li>other cats</li>",
-        "</ol>",
-        "<input type=\"text\">"
-      ],
-      "tests": [
-        "assert($(\"input[placeholder]\").length > 0, 'message: Add a <code>placeholder</code> attribute to the existing text <code>input</code> element.');",
-        "assert($(\"input\") && $(\"input\").attr(\"placeholder\") && $(\"input\").attr(\"placeholder\").match(/cat\\s+photo\\s+URL/gi), 'message: Set the value of your placeholder attribute to \"cat photo URL\".');",
-        "assert($(\"input[type=text]\").length > 0 && code.match(/<input((\\s+\\w+(\\s*=\\s*(?:\".*?\"|'.*?'|[\\^'\">\\s]+))?)+\\s*|\\s*)\\/?>/gi), 'message: The finished <code>input</code> element should have valid syntax.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "de": {
-          "title": "Füge Platzhalter zu einem Textfeld hinzu",
-          "description": [
-            "Platzhaltertexte erscheinen in deinen <code>input</code> Feldern, bevor der Nutzer etwas eingibt.",
-            "Du kannst Platzhalter auf folgende Weise erstellen:",
-            "<code>&#60;input type=\"text\" placeholder=\"Das ist ein Platzhalter.\"&#62;</code>",
-            "Setze bei deinem <code>input</code> Element den Wert für <code>placeholder</code> auf \"cat photo URL\"."
-          ]
-        },
-        "es": {
-          "title": "Agrega un texto de relleno a un campo de texto",
-          "description": [
-            "El texto de relleno es el que aparece en un campo de texto antes de que un usuario haya ingresado datos.",
-            "Puedes crear un texto de relleno de esta manera:",
-            "<code>&#60;input type=\"text\" placeholder=\"este es un texto de relleno\"&#62;</code>",
-            "Establece el valor del <code>texto de relleno</code> de tu campo de texto como \"cat photo URL\"."
-          ]
-        },
-        "pt-br": {
-          "title": "Adicione Texto Indicativo a um Campo de Texto",
-          "description": [
-            "O texto indicativo é o que aparece em um campo de texto antes que um usuário tenha escrito algo.",
-            "Você pode criar um texto indicativo assim:",
-            "<code>&#60;input type=\"text\" placeholder=\"isso é um texto indicativo\"&#62;</code>",
-            "Estabeleça o valor do <code>texto indicativo</code> do seu campo de texto como \"cat photo URL\"."
-          ]
-        },
-        "ru": {
-          "title": "Добавьте замещающий текст к текстовому полю",
-          "description": [
-            "Ваш замещающий текст - это то, что отображается в виде текста внутри <code>input</code> пока пользователь не ввёл туда что-либо.",
-            "Вы можете создать замещающий текст следующим образом:",
-            "<code>&#60;input type=\"text\" placeholder=\"это замещающий текст\"&#62;</code>",
-            "Установите значение атрибута <code>placeholder</code> вашего текстового поля <code>input</code> равными \"cat photo URL\"."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bad87fee1348bd9aede08830",
-      "title": "Create a Form Element",
-      "description": [
-        "You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your <code>form</code> element.",
-        "For example:",
-        "<code>&#60;form action=\"/url-where-you-want-to-submit-form-data\"&#62;&#60;/form&#62;</code>",
-        "Nest your text field in a <code>form</code> element. Add the <code>action=\"/submit-cat-photo\"</code> attribute to this form element."
-      ],
-      "challengeSeed": [
-        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
-        "<style>",
-        "  .red-text {",
-        "    color: red;",
-        "  }",
-        "",
-        "  h2 {",
-        "    font-family: Lobster, Monospace;",
-        "  }",
-        "",
-        "  p {",
-        "    font-size: 16px;",
-        "    font-family: Monospace;",
-        "  }",
-        "",
-        "  .thick-green-border {",
-        "    border-color: green;",
-        "    border-width: 10px;",
-        "    border-style: solid;",
-        "    border-radius: 50%;",
-        "  }",
-        "",
-        "  .smaller-image {",
-        "    width: 100px;",
-        "  }",
-        "</style>",
-        "",
-        "<h2 class=\"red-text\">CatPhotoApp</h2>",
-        "",
-        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
-        "",
-        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back.\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
-        "",
-        "<p>Things cats love:</p>",
-        "<ul>",
-        "  <li>cat nip</li>",
-        "  <li>laser pointers</li>",
-        "  <li>lasagna</li>",
-        "</ul>",
-        "<p>Top 3 things cats hate:</p>",
-        "<ol>",
-        "  <li>flea treatment</li>",
-        "  <li>thunder</li>",
-        "  <li>other cats</li>",
-        "</ol>",
-        "<input type=\"text\" placeholder=\"cat photo URL\">"
-      ],
-      "tests": [
-        "assert($(\"form\") && $(\"form\").children(\"input\") && $(\"form\").children(\"input\").length > 0, 'message: Nest your text input element within a <code>form</code> element.');",
-        "assert($(\"form\").attr(\"action\") === \"/submit-cat-photo\", 'message: Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>');",
-        "assert(code.match(/<\\/form>/g) && code.match(/<form [^<]*>/g) && code.match(/<\\/form>/g).length === code.match(/<form [^<]*>/g).length, 'message: Make sure your <code>form</code> element has well-formed open and close tags.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "de": {
-          "title": "Erstelle ein Formular",
-          "description": [
-            "Du kannst Web Formulare bauen, die Daten zu einem Server übertragen – und das nur mit HTML. Das wird möglich, indem du eine Aktion für dein <code>form</code> Element bestimmst.",
-            "Zum Beispiel:",
-            "<code>&#60;form action=\"/url-wohin-du-deine-formular-daten-senden-willst\"&#62;&#60;/form&#62;</code>",
-            "Umschließe dein Textfeld mit einem <code>form</code> Element. Füge anschließend das Attribut <code>action=\"/submit-cat-photo\"</code> hinzu."
-          ]
-        },
-        "es": {
-          "title": "Crea un elemento de formulario",
-          "description": [
-            "Puedes construir formularios web que realmente envíen datos a un servidor usando nada más que HTML puro. Puedes hacerlo especificando una acción en tu elemento <code>form</code>.",
-            "Por ejemplo:",
-            "<code>&#60;form action=\"/url-al-que-quieres-enviar-los-datos-del-formulario\"&#62;&#60;/form&#62;</code>",
-            "Anida tu campo de texto en un elemento <code>form</code>. Agrega el atributo <code>action=\"/submit-cat-photo\"</code> a este elemento de formulario."
-          ]
-        },
-        "pt-br": {
-          "title": "Crie um Elemento de Formulário",
-          "description": [
-            "É possível construir formulários web que realmente enviem dados a um servidor utilizando nada além de HTML puro. Você pode fazer isso especificando uma ação em seu elemento <code>form</code>.",
-            "Por exemplo:",
-            "<code>&#60;form action=\"/url-para-onde-você-quer-enviar-os-dados-do-formulário\"&#62;&#60;/form&#62;</code>",
-            "Aninhe seu campo de texto em um elemento <code>form</code>. Adicione o atributo <code>action=\"/submit-cat-photo\"</code> para este elemento de formulário."
-          ]
-        },
-        "ru": {
-          "title": "Создайте элемент типа форма",
-          "description": [
-            "Вы можете строить web-формы, которые отправляют данные серверу, не ипользуя ничего кроме HTML. Вы можете достичь этого указанием действия в атрибутах элемента <code>form</code>.",
-            "Например:",
-            "<code>&#60;form action=\"/url-куда-вы-хотите-отправить-данные-формы\"&#62;&#60;/form&#62;</code>",
-            "Вложите ваше текстовое поле в элемент <code>form</code>. Добавьте атрибут <code>action=\"/submit-cat-photo\"</code> к этому элементу формы."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bad87fee1348bd9aedd08830",
-      "title": "Add a Submit Button to a Form",
-      "description": [
-        "Let's add a <code>submit</code> button to your form. Clicking this button will send the data from your form to the URL you specified with your form's <code>action</code> attribute.",
-        "Here's an example submit button:",
-        "<code>&#60;button type=\"submit\"&#62;this button submits the form&#60;/button&#62;</code>",
-        "Add a submit button to your <code>form</code> element with type <code>submit</code> and \"Submit\" as its text."
-      ],
-      "challengeSeed": [
-        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
-        "<style>",
-        "  .red-text {",
-        "    color: red;",
-        "  }",
-        "",
-        "  h2 {",
-        "    font-family: Lobster, Monospace;",
-        "  }",
-        "",
-        "  p {",
-        "    font-size: 16px;",
-        "    font-family: Monospace;",
-        "  }",
-        "",
-        "  .thick-green-border {",
-        "    border-color: green;",
-        "    border-width: 10px;",
-        "    border-style: solid;",
-        "    border-radius: 50%;",
-        "  }",
-        "",
-        "  .smaller-image {",
-        "    width: 100px;",
-        "  }",
-        "</style>",
-        "",
-        "<h2 class=\"red-text\">CatPhotoApp</h2>",
-        "",
-        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
-        "",
-        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back.\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
-        "",
-        "<p>Things cats love:</p>",
-        "<ul>",
-        "  <li>cat nip</li>",
-        "  <li>laser pointers</li>",
-        "  <li>lasagna</li>",
-        "</ul>",
-        "<p>Top 3 things cats hate:</p>",
-        "<ol>",
-        "  <li>flea treatment</li>",
-        "  <li>thunder</li>",
-        "  <li>other cats</li>",
-        "</ol>",
-        "<form action=\"/submit-cat-photo\">",
-        "  <input type=\"text\" placeholder=\"cat photo URL\">",
-        "</form>"
-      ],
-      "tests": [
-        "assert($(\"form\").children(\"button\").length > 0, 'message: Your form should have a button inside it.');",
-        "assert($(\"button\").attr(\"type\") === \"submit\", 'message: Your submit button should have the attribute <code>type</code> set to <code>submit</code>.');",
-        "assert($(\"button\").text().match(/^\\s*submit\\s*$/gi), 'message: Your submit button should only have the text \"Submit\".');",
-        "assert(code.match(/<\\/button>/g) && code.match(/<button/g) && code.match(/<\\/button>/g).length === code.match(/<button/g).length, 'message: Make sure your <code>button</code> element has a closing tag.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "de": {
-          "title": "Füge eine Button zum Senden hinzu",
-          "description": [
-            "Lass uns nun einen <code>submit</code> Button hinzufügen. Durch einen Klick auf diesen Button werden die Daten des Formulars an die URL gesendet, welche du in dem <code>action</code> Attribut deines Formulars angegeben hast.",
-            "Hier ist ein Beispiel einen solchen Button:",
-            "<code>&#60;button type=\"submit\"&#62;Dieser Button überträgt die Daten des Formulars.&#60;/button&#62;</code>",
-            "Füge einen Button zum Senden mit dem Typ <code>submit</code> und \"Submit\" als Text zu deinem <code>form</code> Element hinzu."
-          ]
-        },
-        "es": {
-          "title": "Agrega un botón Enviar a un formulario",
-          "description": [
-            "Añadamos un elemento <code>submit</code> a tu formulario. Al hacer clic en este botón enviará los datos del formulario a la URL especificada en el atributo <code>action</code> de tu formulario. ",
-            "He aquí un ejemplo de un botón de envío:",
-            "<code>&#60;button type=\" submit\"&#62;este botón envía el formulario&#60;/botón&#62;</code>",
-            "Agrega un botón de enviar a tu elemento <code>form</code> con el tipo <code>submit</code> y con el texto \"Submit\"."
-          ]
-        },
-        "pt-br": {
-          "title": "Inclua um Botão de Enviar a um Formulário",
-          "description": [
-            "Vamos inserir um elemento <code>submit</code> ao seu formulário. Ao clicar neste botão, os dados inseridos serão enviados para a URL especificada no atributo <code>action</code> do formulário.",
-            "Aqui está um exemplo de um botão de enviar:",
-            "<code>&#60;button type=\" submit\"&#62;este botão enviará o formulário&#60;/button&#62;</code>",
-            "Adicione um botão de enviar ao seu elemento <code>form</code> com o tipo <code>submit</code> e com o texto \"Submit\"."
-          ]
-        },
-        "ru": {
-          "title": "Добавьте кнопку отправки к форме",
-          "description": [
-            "Давайте добавим кнопку отправки <code>submit</code> к вашей форме. Нажатие на эту кнопку отправит данные из вашей формы по адресу, указанному в атрибуте <code>action</code> вашей формы.",
-            "Вот пример кнопки отправки:",
-            "<code>&#60;button type=\"submit\"&#62;эта кнопка отправляет данные формы&#60;/button&#62;</code>",
-            "Добавьте кнопку отправки к вашему элементу <code>form</code> с указанием типа <code>submit</code> и \"Submit\" в качестве отображаемого текста."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bad87fee1348bd9aedc08830",
-      "title": "Use HTML5 to Require a Field",
-      "description": [
-        "You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.",
-        "For example, if you wanted to make a text input field required, you can just add the word <code>required</code> within your <code>input</code> element, like this: <code>&#60;input type=\"text\" required&#62;</code>",
-        "Make your text <code>input</code> a <code>required</code> field, so that your user can't submit the form without completing this field.",
-        "Then try to submit the form without inputing any text. See how your HTML5 form notifies you that the field is required?",
-        "Note: This field does not work in Safari."
-      ],
-      "challengeSeed": [
-        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
-        "<style>",
-        "  .red-text {",
-        "    color: red;",
-        "  }",
-        "",
-        "  h2 {",
-        "    font-family: Lobster, Monospace;",
-        "  }",
-        "",
-        "  p {",
-        "    font-size: 16px;",
-        "    font-family: Monospace;",
-        "  }",
-        "",
-        "  .thick-green-border {",
-        "    border-color: green;",
-        "    border-width: 10px;",
-        "    border-style: solid;",
-        "    border-radius: 50%;",
-        "  }",
-        "",
-        "  .smaller-image {",
-        "    width: 100px;",
-        "  }",
-        "</style>",
-        "",
-        "<h2 class=\"red-text\">CatPhotoApp</h2>",
-        "",
-        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
-        "",
-        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back.\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
-        "",
-        "<p>Things cats love:</p>",
-        "<ul>",
-        "  <li>cat nip</li>",
-        "  <li>laser pointers</li>",
-        "  <li>lasagna</li>",
-        "</ul>",
-        "<p>Top 3 things cats hate:</p>",
-        "<ol>",
-        "  <li>flea treatment</li>",
-        "  <li>thunder</li>",
-        "  <li>other cats</li>",
-        "</ol>",
-        "<form action=\"/submit-cat-photo\">",
-        "  <input type=\"text\" placeholder=\"cat photo URL\">",
-        "  <button type=\"submit\">Submit</button>",
-        "</form>"
-      ],
-      "tests": [
-        "assert($(\"input\").prop(\"required\"), 'message: Your text <code>input</code> element should have the <code>required</code> attribute.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "translations": {
-        "de": {
-          "title": "Nutze HTML5 um ein Pflichtfeld zu erstellen",
-          "description": [
-            "Du kannst bestimmte Felder eines Formulars zu Pflichtfeldern erklären. Damit ist es deinen Usern nicht mehr möglich, das Formular abzuschicken, ohne die Pflichtfelder auszufüllen.",
-            "Um zum Beispiel ein Textfeld zum Pflichtfeld zu erklären, kannst du einfach ein <code>required</code> innerhalb deines <code>input</code> Elements hinzufügen: <code>&#60;input type=\"text\" required&#62;</code>",
-            "Mache aus deinem <code>input</code> Feld ein Pflichtfeld – \"required\" – damit deine Nutzer das Formular nicht abschicken können, ohne dieses Feld auszufüllen.",
-            "Probier dann dein Formular ohne einen Text abzuschicken. Siehst du wie dein HTML5 Formular dich darauf hinweißt dass das Feld verpflichtend ist?",
-            "Beachte: dieses Feld funktioniert nicht in Safari."
-          ]
-        },
-        "es": {
-          "title": "Utiliza HTML5 para especificar campos obligatorios",
-          "description": [
-            "Puedes especificar un campo obligatorio en un formulario para que tu usuario no pueda enviar el formulario hasta que lo haya llenado.",
-            "Por ejemplo, si quieres requerir obligatoriamente un campo de texto, puedes agregar la palabra <code>required</code> dentro de tu elemento <code>input</code>, usarías: <code>&#60;input type=\"text\" required&#62;</code> ",
-            "Haz de tu campo de texto un campo obligatorio, de manera que tu usuario no pueda enviar el formulario sin completar este campo.",
-            "Luego, intenta enviar el formulario sin ingresar texto alguno. ¿Ves cómo tu formulario HTML5 te notifica que el campo es obligatorio?",
-            "Nota: Este campo no funciona en Safari."
-          ]
-        },
-        "pt-br": {
-          "title": "Use HTML5 para Especificar Campos Obrigatórios",
-          "description": [
-            "Você pode especificar um campo como obrigatório para que seu usuário não consiga enviar o formulário até que o tenha completado.",
-            "Por exemplo, se você quiser tornar obrigatório um campo de texto, basta adicionar a palavra <code>required</code> dentro de seu elemento <code>input</code> assim: <code>&#60;input type=\"text\" required&#62;</code>",
-            "Faça com que seu campo de texto seja obrigatório, de forma que o usuário não possa enviar o formulário sem ter completado esse campo.",
-            "Após isso, tente enviar o formulário sem digitar nenhum texto no campo. Percebe como seu formulário HTML5 mostra que o campo é obrigatório?"
-          ]
-        },
-        "ru": {
-          "title": "Используйте HTML5, чтобы сделать заполнение поля обязательным",
+          "title": "Укажите порядок деградации шрифтов",
           "description": [
-            "Вы можете требовать заполнения определённых полей формы, таким образом пользователь не сможет отправить данные формы до их заполнения.",
-            "Например, если бы вы хотели сделать заполнение текстового поля обязательным, вы могли бы добавить слово <code>required</code> внутрь вашего элемента <code>input</code>: <code>&#60;input type=\"text\" required&#62;</code>",
-            "Сделайте ваше текстовое поле <code>input</code> обязательным <code>required</code> для заполнения, чтобы пользователь не мог отправить данные формы без заполнения этого поля.",
-            "Далее попробуйте отправить данные формы без ввода какого-либо текста. Видите как ваша HTML5-форма уведомляет вас о том, что поле обязательное для заполнения?",
-            "Внимание: это поле не работает в Safari."
+            "Существует несколько стандартных шрифтов, которые доступны во всех браузерах. Среди них <code>Monospace</code>, <code>Serif</code> и <code>Sans-Serif</code>",
+            "Когда один шрифт недоступен, вы можете сообщить браузеру \"деградировать\" до другого шрифта.",
+            "Например, если бы вы хотели, чтобы элемент использовал шрифт <code>Helvetica</code>, но также деградировал до шрифта <code>Sans-Serif</code>, когда <code>Helvetica</code> недоступен, вы могли бы использовать этот CSS-стиль:",
+            "<blockquote>p {<br>&nbsp;&nbsp;font-family: Helvetica, Sans-Serif;<br>}</blockquote>",
+            "Теперь закомментируйте ваш запрос к Google Fonts, таким образом шрифт <code>Lobster</code> становится недоступен. Обратите внимание как происходит деградация до шрифта <code>Monospace</code>."
           ]
         }
       }
     },
     {
-      "id": "bad87fee1348bd9aedf08834",
-      "title": "Create a Set of Radio Buttons",
+      "id": "bad87fee1348bd9acdf08812",
+      "title": "Size your Images",
       "description": [
-        "You can use <code>radio buttons</code> for questions where you want the user to only give you one answer.",
-        "Radio buttons are a type of <code>input</code>",
-        "Each of your radio buttons should be nested within its own <code>label</code> element.",
-        "All related radio buttons should have the same <code>name</code> attribute.",
-        "Here's an example of a radio button:",
-        "<code>&#60;label&#62;&#60;input type=\"radio\" name=\"indoor-outdoor\"&#62; Indoor&#60;/label&#62;</code>",
-        "Add a pair of radio buttons to your form. One should have the option of <code>indoor</code> and the other should have the option of <code>outdoor</code>."
+        "CSS has a property called <code>width</code> that controls an element's width. Just like with fonts, we'll use <code>px</code> (pixels) to specify the image's width.",
+        "For example, if we wanted to create a CSS class called <code>larger-image</code> that gave HTML elements a width of 500 pixels, we'd use:",
+        "<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.larger-image {<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 500px;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote>",
+        "Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide.",
+        "<strong>Note</strong><br>Due to browser implementation differences, you may need to be at 100% zoom to pass the tests on this challenge."
       ],
       "challengeSeed": [
         "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
@@ -2695,114 +666,76 @@
         "    font-size: 16px;",
         "    font-family: Monospace;",
         "  }",
-        "",
-        "  .thick-green-border {",
-        "    border-color: green;",
-        "    border-width: 10px;",
-        "    border-style: solid;",
-        "    border-radius: 50%;",
-        "  }",
-        "",
-        "  .smaller-image {",
-        "    width: 100px;",
-        "  }",
         "</style>",
         "",
         "<h2 class=\"red-text\">CatPhotoApp</h2>",
         "",
-        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
-        "",
-        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back.\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
+        "<img src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
         "",
-        "<p>Things cats love:</p>",
-        "<ul>",
-        "  <li>cat nip</li>",
-        "  <li>laser pointers</li>",
-        "  <li>lasagna</li>",
-        "</ul>",
-        "<p>Top 3 things cats hate:</p>",
-        "<ol>",
-        "  <li>flea treatment</li>",
-        "  <li>thunder</li>",
-        "  <li>other cats</li>",
-        "</ol>",
-        "<form action=\"/submit-cat-photo\">",
-        "  <input type=\"text\" placeholder=\"cat photo URL\" required>",
-        "  <button type=\"submit\">Submit</button>",
-        "</form>"
+        "<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
+        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
       ],
       "tests": [
-        "assert($('input[type=\"radio\"]').length > 1, 'message: Your page should have two radio button elements.');",
-        "assert($('label > input[type=\"radio\"]').filter(\"[name='indoor-outdoor']\").length > 1, 'message: Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.');",
-        "assert($('label > input[type=\"radio\"]:only-child').length > 1, 'message: Each of your two radio button elements should be nested in its own <code>label</code> element.');",
-        "assert((code.match(/<\\/label>/g) && code.match(/<label/g) && code.match(/<\\/label>/g).length === code.match(/<label/g).length), 'message: Make sure each of your <code>label</code> elements has a closing tag.');",
-        "assert($(\"label\").text().match(/indoor/gi), 'message: One of your radio buttons should have the label <code>indoor</code>.');",
-        "assert($(\"label\").text().match(/outdoor/gi), 'message: One of your radio buttons should have the label <code>outdoor</code>.');"
+        "assert($(\"img[src='https://bit.ly/fcc-relaxing-cat']\").attr('class') === \"smaller-image\", 'message: Your <code>img</code> element should have the class <code>smaller-image</code>.');",
+        "assert($(\"img\").width() === 100, 'message: Your image should be 100 pixels wide. Browser zoom should be at 100%.');"
       ],
       "type": "waypoint",
       "challengeType": 0,
       "translations": {
         "de": {
-          "title": "Erstelle ein Set von Radiobuttons",
           "description": [
-            "Du kannst Optionsfelder, <code>radio buttons</code>, für Fragen verwenden, auf die der Nutzer nur eine Antwort geben soll.",
-            "Radiobuttons sind lediglich ein weiterer Typ von <code>input</code> Elementen.",
-            "Jeder deiner Radiobuttons sollte innerhalb eines eigenen <code>label</code> Elements liegen.",
-            "Alle Radiobuttons mit Bezug zueinander sollten das gleiche <code>name</code> Attribut teilen.",
-            "Ein Beispiel eines Radiobuttons:",
-            "<code>&#60;label&#62;&#60;input type=\"radio\" name=\"indoor-outdoor\"&#62; Indoor&#60;/label&#62;</code>",
-            "Füge ein Paar Radiobuttons zu deinem Formular hinzu. Einer sollte die Option <code>indoor</code> und der andere die Option <code>outdoor</code> haben."
+            "Die Breite eines Elements wird mit dem CSS Attribut <code>width</code> kontrolliert. Wie bei Schriftarten verwenden wir Pixel <code>px</code> um die Größe zu definieren.",
+            "Wenn wir also die CSS Klasse <code>larger-image</code> erstellen wollen, um HTML Elementen eine Breite von 500 Pixeln zu verleihen, verwenden wir:",
+            "<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.larger-image {<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 500px;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote>",
+            "Erstelle eine Klasse mit dem Namen <code>smaller-image</code> und verwende sie, um dein Bild auf 100 Pixel zu skalieren.",
+            "<strong>Notiz</strong><br>Aufgrund verschiedener Brower Implementierungen, könnte es sein dass du auf 100% Zoom sein musst um die Tests zu bestehen."
           ]
         },
-        "es": {
-          "title": "Crea un Conjunto de botones de radio",
+        "fr": {
+          "title": "Redimensionner vos images",
           "description": [
-            "Puedes usar <code>botones de radio</code> para las preguntas en las que deseas que el usuario sólo pueda dar una respuesta.",
-            "Los botones de radio son un tipo del elemento <code>input</code>",
-            "Cada uno de los botones de radio debe estar anidado dentro de su propio elemento <code>label</code>.",
-            "Todos los botones de radio relacionados deben tener el mismo atributo <code>name</code>.",
-            "He aquí un ejemplo de un botón de radio:",
-            "<code>&#60;label&#62;&#60;input type=\"radio\" name=\"dentro-fuera\"&#62; Dentro&#60;/label&#62;</code>",
-            "Agrega un par de botones de radio a tu formulario. Uno debe tener la opción de <code>indoor</code> y el otro debe tener la opción <code>outdoor</code>. "
+            "Le CSS a une propriété nommé <code>width</code> qui contrôle la largeur d'un élément. Comme pour les polices, nous utiliserons <code>px</code> (pixels) pour déterminer la largeur d'une image.",
+            "Par exemple, si nous voulons créer une classe CSS nommée <code>larger-image</code> qui donnne aux éléments une largeur de 500 pixels, nous utilisons :",
+            "<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.larger-image {<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 500px;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote>",
+            "Créez une classe nommée <code>smaller-image</code> et utilisez la pour redimensionner l'image pour qu'elle ai 100 pixels de large.",
+            "<strong>Prenez note</strong><br>Dû aux différences entre les navigateurs Web, votre niveau de zoom devrait être à 100% pour passer les tests de ce défi."
           ]
         },
         "pt-br": {
-          "title": "Crie um Conjunto de Botões de Seleção",
+          "title": "Dê um Tamanho para suas Imagens",
           "description": [
-            "É possível utilizar botões de seleção (botões de rádio) para perguntas nas quais o usuário deverá selecionar apenas uma resposta, dentre várias possíveis.",
-            "Os botões de seleção são um tipo de elemento <code>input</code>",
-            "Cada um dos botões de seleção deve estar contido dentro de seu próprio elemento <code>label</code>.",
-            "Todos os botões de seleção relacionados devem ter o mesmo atributo <code>name</code>.",
-            "Temos aqui um exemplo de um botão de seleção/rádio:",
-            "<code>&#60;label&#62;&#60;input type=\"radio\" name=\"indoor-outdoor\"&#62; Indoor&#60;/label&#62;</code>",
-            "Adicione um par de botões de seleção ao seu formulário. Um deles deve ter a opção <code>indoor</code> enquanto o outro deve ter a opção <code>outdoor</code>."
+            "O CSS possui uma propriedade chamada <code>width</code>, que controla a largura de um elemento. Da mesma forma que com as fontes, vamos utilizar <code>px</code> (pixels) como medida para especificar a largura de nossa imagem.",
+            "Por exemplo, se queremos criar uma classe CSS chamada <code>larger-image</code> que dê aos elementos HTML uma largura de 500px, vamos usar:",
+            "<code>&#60;estilo&#62;</code>",
+            "<code>&nbsp;&nbsp;.larger-image{</code>",
+            "<code>&nbsp;&nbsp;&nbsp;&nbsp;width: 500px;</code>",
+            "<code>&nbsp;&nbsp;}</code>",
+            "<code>&#60;/style&#62;</code>",
+            "Crie uma classe chamada <code>smaller-image</code> e a utilize para mudar o tamanho da imagem para que ela tenha apenas 100 pixels de largura."
           ]
         },
         "ru": {
-          "title": "Создайте набор радио-кнопок",
+          "title": "Установите размер ваших изображений",
           "description": [
-            "Вы можете использовать <code>радио кнопки</code> для вопросов, которые требуют выбора одного варианта ответа из множества.",
-            "Радио-кнопки относятся к типу <code>input</code>",
-            "Каждая из ваших радио-кнопок должна быть вложена внутрь своего собственного элемента <code>label</code>.",
-            "Все относящиеся друг к другу, формирующие группу, радио-кнопки должны иметь один и тот же атрибут <code>name</code>.",
-            "Вот пример радио-кнопки:",
-            "<code>&#60;label&#62;&#60;input type=\"radio\" name=\"indoor-outdoor\"&#62; Indoor&#60;/label&#62;</code>",
-            "Добавьте пару радио-кнопок к вашей форме. Одна должна соответствовать варианту <code>indoor</code>, а другая - <code>outdoor</code>."
+            "В CSS есть свойтсво, называемое <code>width</code>, которе управляет шириной элемента. По аналогии со шрифтами, мы используем <code>px</code> (пиксели) для указания ширины изображения.",
+            "Например, если бы мы хотели создать CSS-класс <code>larger-image</code>, который присваивал бы HTML-эементам ширину равную 500 пикселей, мы бы использовали:",
+            "<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.larger-image {<br>&nbsp;&nbsp;&nbsp;&nbsp;width: 500px;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote>",
+            "Создайте класс <code>smaller-image</code> и используйте его для изменения размера изображений до 100 пикселей в ширину.",
+            "<strong>Внимание</strong><br>По причине разницы в реализации браузеров, вам может понадобиться установить 100% масштаб окна браузера для прохождения этого испытания."
           ]
         }
       }
     },
     {
-      "id": "bad87fee1348bd9aedf08835",
-      "title": "Create a Set of Checkboxes",
+      "id": "bad87fee1348bd9bedf08813",
+      "title": "Add Borders Around your Elements",
       "description": [
-        "Forms commonly use <code>checkboxes</code> for questions that may have more than one answer.",
-        "Checkboxes are a type of <code>input</code>",
-        "Each of your checkboxes should be nested within its own <code>label</code> element.",
-        "All related checkbox inputs should have the same <code>name</code> attribute.",
-        "Here's an example of a checkbox:",
-        "<code>&#60;label&#62;&#60;input type=\"checkbox\" name=\"personality\"&#62; Loving&#60;/label&#62;</code>",
-        "Add to your form a set of three checkboxes. Each checkbox should be nested within its own <code>label</code> element. All three should share the <code>name</code> attribute of <code>personality</code>."
+        "CSS borders have properties like <code>style</code>, <code>color</code> and <code>width</code>",
+        "For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:",
+        "<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.thin-red-border {<br>&nbsp;&nbsp;&nbsp;&nbsp;border-color: red;<br>&nbsp;&nbsp;&nbsp;&nbsp;border-width: 5px;<br>&nbsp;&nbsp;&nbsp;&nbsp;border-style: solid;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote>",
+        "Create a class called <code>thick-green-border</code> that puts a 10-pixel-wide green border with a style of <code>solid</code> around an HTML element, and apply that class to your cat photo.",
+        "Remember that you can apply multiple classes to an element by separating each class with a space within its <code>class</code> attribute. For example:",
+        "<code>&lt;img class=\"class1 class2\"&gt;</code>"
       ],
       "challengeSeed": [
         "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
@@ -2820,13 +753,6 @@
         "    font-family: Monospace;",
         "  }",
         "",
-        "  .thick-green-border {",
-        "    border-color: green;",
-        "    border-width: 10px;",
-        "    border-style: solid;",
-        "    border-radius: 50%;",
-        "  }",
-        "",
         "  .smaller-image {",
         "    width: 100px;",
         "  }",
@@ -2834,96 +760,79 @@
         "",
         "<h2 class=\"red-text\">CatPhotoApp</h2>",
         "",
-        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
-        "",
-        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back.\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
+        "<img class=\"smaller-image\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
         "",
-        "<p>Things cats love:</p>",
-        "<ul>",
-        "  <li>cat nip</li>",
-        "  <li>laser pointers</li>",
-        "  <li>lasagna</li>",
-        "</ul>",
-        "<p>Top 3 things cats hate:</p>",
-        "<ol>",
-        "  <li>flea treatment</li>",
-        "  <li>thunder</li>",
-        "  <li>other cats</li>",
-        "</ol>",
-        "<form action=\"/submit-cat-photo\">",
-        "  <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
-        "  <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
-        "  <input type=\"text\" placeholder=\"cat photo URL\" required>",
-        "  <button type=\"submit\">Submit</button>",
-        "</form>"
+        "<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
+        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
       ],
       "tests": [
-        "assert($('input[type=\"checkbox\"]').length > 2, 'message: Your page should have three checkbox elements.');",
-        "assert($('label > input[type=\"checkbox\"]:only-child').length > 2, 'message: Each of your three checkbox elements should be nested in its own <code>label</code> element.');",
-        "assert(code.match(/<\\/label>/g) && code.match(/<label/g) && code.match(/<\\/label>/g).length === code.match(/<label/g).length, 'message: Make sure each of your <code>label</code> elements has a closing tag.');",
-        "assert($('label > input[type=\"checkbox\"]').filter(\"[name='personality']\").length > 2, 'message: Give your checkboxes the <code>name</code> attribute of <code>personality</code>.');"
+        "assert($(\"img\").hasClass(\"smaller-image\"), 'message: Your <code>img</code> element should have the class <code>smaller-image</code>.');",
+        "assert($(\"img\").hasClass(\"thick-green-border\"), 'message: Your <code>img</code> element should have the class <code>thick-green-border</code>.');",
+        "assert($(\"img\").hasClass(\"thick-green-border\") && parseInt($(\"img\").css(\"border-top-width\"), 10) >= 8 && parseInt($(\"img\").css(\"border-top-width\"), 10) <= 12, 'message: Give your image a border width of <code>10px</code>.');",
+        "assert($(\"img\").css(\"border-right-style\") === \"solid\", 'message: Give your image a border style of <code>solid</code>.');",
+        "assert($(\"img\").css(\"border-left-color\") === \"rgb(0, 128, 0)\", 'message: The border around your <code>img</code> element should be green.');"
       ],
       "type": "waypoint",
       "challengeType": 0,
       "translations": {
         "de": {
-          "title": "Erstelle ein paar Checkboxen",
           "description": [
-            "Formulare nutzen Kontrollkästchen, <code>checkboxes</code> meistens für Fragen, die mehrerer Antworten bedürfen.",
-            "Checkboxen sind eine Art von <code>input</code> Elementen",
-            "Jedes deiner Checkboxen sollte innerhalb eines eigenen <code>label</code> Elements liegen.",
-            "Alle zusammengehörende Checkboxes sollten das gleiche <code>name</code> Attribut haben.",
-            "Hier ist ein Beispiel für eine Checkbox:",
-            "<code>&#60;label&#62;&#60;input type=\"checkbox\" name=\"personality\"&#62; Loving&#60;/label&#62;</code>",
-            "Füge deinem Formular drei Checkboxen hinzu. Jedes dieser Elemente sollte innerhalb seines eigenen <code>label</code> Elements liegen. Alle sollten das gleiche <code>name</code> Attribut <code>personality</code> teilen."
+            "CSS Rahmen haben Attribute wie <code>style</code>, <code>color</code> und <code>width</code>",
+            "Wenn wir nun einen roten, 5 Pixel dicken Rahmen um ein HTML Element setzen wollen, könnten wir diese Klasse verwenden:",
+            "<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.thin-red-border {<br>&nbsp;&nbsp;&nbsp;&nbsp;border-color: red;<br>&nbsp;&nbsp;&nbsp;&nbsp;border-width: 5px;<br>&nbsp;&nbsp;&nbsp;&nbsp;border-style: solid;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote>",
+            "Erstelle die Klasse <code>thick-green-border</code>, welche einen 10 Pixel dicken, grünen Rahmen mit dem Style <code>solid</code> um ein HTML Element setzt. Füge diese Klasse deinem Katzenfoto hinzu.",
+            "Vergiss nicht, dass du einem Element mehrere Klassen geben kannst indem du jede Klasse mit einem Leerzeichen im <code>class</code> Attribut trennst. Zum Beispiel:",
+            "<code>&lt;img class=\"class1 class2\"&gt;</code>"
           ]
         },
-        "es": {
-          "title": "Crea un conjunto de casillas de verificación",
+        "fr": {
+          "title": "Ajouter des bordures autour de vos éléments",
           "description": [
-            "Los formularios suelen usar <code>casillas de verificación</code> para preguntas que pueden tener más de una respuesta.",
-            "Las casillas de verificación son un tipo del elemento <code>input</code>",
-            "Cada una de tus casillas de verificación debe ser anidada dentro de su propio elemento <code>label</code>.",
-            "Todas las entradas de casillas de verificación relacionadas deben tener el mismo atributo <code>name</code>.",
-            "He aquí un ejemplo de una casilla de verificación:",
-            "<code>&#60;label&#62;&#60;input type=\"checkbox\" name=\"personalidad\"&#62; Cariñoso&#60;/label&#62;</code>",
-            "Añade a tu formulario un conjunto de tres casillas de verificación. Cada casilla de verificación debe estar anidada dentro de su propio elemento <code>label</code>. Las tres deben tener <code>personality</code> como su atributo <code>name</code>."
+            "Les bordures CSS ont des propriétés comme <code>style</code>, <code>color</code> et <code>width</code>",
+            "Par exemple, si nous voulons créer une bordure de 5 pixel rouge autour d'un élément HTML, nous pouvons utiliser cette classe :",
+            "<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.thin-red-border {<br>&nbsp;&nbsp;&nbsp;&nbsp;border-color: red;<br>&nbsp;&nbsp;&nbsp;&nbsp;border-width: 5px;<br>&nbsp;&nbsp;&nbsp;&nbsp;border-style: solid;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote>",
+            "Créer une classe nommée <code>thick-green-border</code> qui ajoute une bordure verte de 10 pixel avec un style <code>solid</code> autour d'un élément HTML. Appliquez ensuite cette classe sur votre photo de chat.",
+            "Souvenez-vous que vous pouvez appliquer plus d'une classe sur un élément en les séparant par un espace, le tout dans l'attribut <code>class</code> de l'élément. Par exemple :",
+            "<code>&lt;img class=\"class1 class2\"&gt;</code>"
           ]
         },
         "pt-br": {
-          "title": "Crie um Conjunto de Caixas de Seleção",
+          "title": "Adicione Bordas ao Redor de seus Elementos",
           "description": [
-            "Os formulários costumam utilizar caixas de seleção para perguntas que podem ter mais de uma resposta.",
-            "As caixas de seleção são um tipo de elemento <code>input</code>",
-            "Cada uma de suas caixas de seleção deve ser aninhada dentro do próprio elemento <code>label</code>.",
-            "Todas as caixas de seleção relacionadas devem ter o mesmo atributo <code>name</code>.",
-            "Veja aqui um exemplo de uma caixa de verificação:",
-            "<code>&#60;label&#62;&#60;input type=\"checkbox\" name=\"personality\"&#62; Carinhoso&#60;/label&#62;</code>",
-            "Adicione ao seu formulário um conjunto de três caixas de verificação. Cada uma delas deve estar aninhada dentro de seu próprio elemento <code>label</code>. As três devem compartilhar o atributo <code>name</code>."
+            "As bordas em CSS possuem propriedades como <code>style</code>, <code>color</code> e <code>width</code>",
+            "Por exemplo, se queremos criar uma borda com tamanho de 5 pixels de cor vermelha ao redor de um elemento HTML, podemos utilizar esta classe:",
+            "<code>&#60;style&#62;</code>",
+            "<code>&nbsp;&nbsp;.thin-red-border {</code>",
+            "<code>&nbsp;&nbsp;&nbsp;&nbsp;border-color: red;</code>",
+            "<code>&nbsp;&nbsp;&nbsp;&nbsp;border-width: 5px;</code>",
+            "<code>&nbsp;&nbsp;&nbsp;&nbsp;border-style: solid;</code>",
+            "<code>&nbsp;&nbsp;}</code>",
+            "<code>&#60;/style&#62;</code>",
+            "Crie uma classe chamada <code>thick-green-border</code> que insira uma borda verde de 10 pixels de largura com um estilo <code>solid</code> ao redor de um elemento HTML, e então adicione essa classe em sua foto com o gato.",
+            "Lembre que você pode aplicar diversas classes a um elemento separando cada uma das classes com um espaço, dentro do atributo <code>class</code>. Por exemplo:",
+            "<code>&lt;img class=\"clase1 clase2\"&gt;</code>"
           ]
         },
         "ru": {
-          "title": "Создайте набор флаговых кнопок",
+          "title": "Дбавьте границы вокруг ваших элементов",
           "description": [
-            "Обычно формы используют <code>флаги (флаговые кнопки)</code> для вопросов, к которым может относиться несколько вариантов ответов.",
-            "Флаги относятся к типу <code>input</code>",
-            "Каждый из ваших флагов должен быть вложен в собственный элемент <code>label</code>.",
-            "Все относящиеся друг к другу флаги должны иметь одинаковый атрибут <code>name</code>.",
-            "Вот пример флаговой кнопки:",
-            "<code>&#60;label&#62;&#60;input type=\"checkbox\" name=\"personality\"&#62; Loving&#60;/label&#62;</code>",
-            "Добавьте набор из трёх флаговых кнопок к вашей форме. Каждый флаг должен быть вложен внутрь собственного элемента <code>label</code>. Все три флага должны иметь одинаковый атрибут <code>name</code>, значение которго равно <code>personality</code>."
+            "CSS-границы имеют свойства: <code>style</code>, <code>color</code> и <code>width</code>",
+            "Например, если бы мы хотели создать красную границу шириной в 5 пикселей вокруг HTML-элемента, мы могли бы использовать этот класс:",
+            "<blockquote>&#60;style&#62;<br>&nbsp;&nbsp;.thin-red-border {<br>&nbsp;&nbsp;&nbsp;&nbsp;border-color: red;<br>&nbsp;&nbsp;&nbsp;&nbsp;border-width: 5px;<br>&nbsp;&nbsp;&nbsp;&nbsp;border-style: solid;<br>&nbsp;&nbsp;}<br>&#60;/style&#62;</blockquote>",
+            "Создайте класс <code>thick-green-border</code>, который добавляет зелёную границу шириной в 10 пикселей со стилем <code>solid</code> вокруг HTML-элемента и примените этот класс к вашему фото кота.",
+            "Помните, что вы можете может применить множество классов к одному элементу путём разделения их с помощью пробела внутри атрибута <code>class</code>. Например:",
+            "<code>&lt;img class=\"class1 class2\"&gt;</code>"
           ]
         }
       }
     },
     {
-      "id": "bad87fee1348bd9aedd08835",
-      "title": "Check Radio Buttons and Checkboxes by Default",
+      "id": "bad87fee1348bd9aedf08814",
+      "title": "Add Rounded Corners with a Border Radius",
       "description": [
-        "You can set a checkbox or radio button to be checked by default using the <code>checked</code> attribute.",
-        "To do this, just add the word \"checked\" to the inside of an input element. For example:",
-        "<code>&#60;input type=\"radio\" name=\"test-name\" checked&#62;</code>",
-        "Set the first of your <code>radio buttons</code> and the first of your <code>checkboxes</code> to both be checked by default."
+        "Your cat photo currently has sharp corners. We can round out those corners with a CSS property called <code>border-radius</code>.",
+        "You can specify a <code>border-radius</code> with pixels. Give your cat photo a <code>border-radius</code> of <code>10px</code>.",
+        "Note: this waypoint allows for multiple possible solutions. For example, you may add <code>border-radius</code> to either the <code>.thick-green-border</code> class or <code>.smaller-image</code> class."
       ],
       "challengeSeed": [
         "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
@@ -2945,7 +854,6 @@
         "    border-color: green;",
         "    border-width: 10px;",
         "    border-style: solid;",
-        "    border-radius: 50%;",
         "  }",
         "",
         "  .smaller-image {",
@@ -2955,86 +863,58 @@
         "",
         "<h2 class=\"red-text\">CatPhotoApp</h2>",
         "",
-        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
-        "",
-        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back.\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
+        "<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
         "",
-        "<p>Things cats love:</p>",
-        "<ul>",
-        "  <li>cat nip</li>",
-        "  <li>laser pointers</li>",
-        "  <li>lasagna</li>",
-        "</ul>",
-        "<p>Top 3 things cats hate:</p>",
-        "<ol>",
-        "  <li>flea treatment</li>",
-        "  <li>thunder</li>",
-        "  <li>other cats</li>",
-        "</ol>",
-        "<form action=\"/submit-cat-photo\">",
-        "  <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
-        "  <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
-        "  <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
-        "  <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
-        "  <label><input type=\"checkbox\" name=\"personality\"> Energetic</label>",
-        "  <input type=\"text\" placeholder=\"cat photo URL\" required>",
-        "  <button type=\"submit\">Submit</button>",
-        "</form>"
+        "<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
+        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
       ],
       "tests": [
-        "assert($('input[type=\"radio\"]').prop(\"checked\"), 'message: Your first radio button on your form should be checked by default.');",
-        "assert($('input[type=\"checkbox\"]').prop(\"checked\"), 'message: Your first checkbox on your form should be checked by default.');"
+        "assert($(\"img\").hasClass(\"thick-green-border\"), 'message: Your image element should have the class \"thick-green-border\".');",
+        "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 8, 'message: Your image should have a border radius of <code>10px</code>');"
       ],
       "type": "waypoint",
       "challengeType": 0,
       "translations": {
         "de": {
-          "title": "Standardmäßig ausgewählte Radiobuttons und Checkboxen",
+          "title": "Füge abgerundete Ecken mit Border Radius hinzu",
           "description": [
-            "Du kannst Checkboxen und Radiobuttons standardmäßig markiert machen, indem du das <code>checked</code> Attribut verwendest.",
-            "Das kannst du erreichen, indem du das Word \"checked\" innerhalb des Inputelements eingefügst. Zum Beispiel so:",
-            "<code>&#60;input type=\"radio\" name=\"test-name\" checked&#62;</code>",
-            "Stelle sicher, dass jeweils deine ersten Radiobuttons und Checkboxen standardmäßig markiert sind."
+            "Dein Katzenfoto hat momentan spitze Ecken. Wir können diese Ecken mit dem CSS Attribut <code>border-radius</code> abrunden.",
+            "Du kannst einen <code>border-radius</code> mit Pixeln deklarieren. Gib deinem Katzenfoto einen <code>border-radius</code> von <code>10px</code>.",
+            "Beachte dass es für diese Challenge verschiedene mögliche Lösungsansätze gibt. Zum Beispiel könntest du einen <code>border-radius</code> zu der <code>.thick-green-border</code> oder <code>.smaller-image</code> Klasse hinzufügen."
           ]
         },
         "es": {
-          "title": "Marca botones de radio y casillas de verificación por omisión",
+          "title": "Agrega esquinas redondeadas usando Border Radius",
           "description": [
-            "Puedes marcar por omisión una casilla de verificación o un botón de radio usando el atributo <code>checked</code>.",
-            "Para ello, sólo tienes que añadir la palabra \"checked\" en el interior de un elemento <code>input</code>. Por ejemplo:",
-            "<code>&#60;input type=\"radio\" name=\"nombre-de-prueba\" checked&#62;</code>",
-            "Establece como marcados por omisión el primero de tus <code>botones de radio</code> y la primera <code>casilla de verificación</code>."
+            "Tu foto del gato tiene actualmente esquinas angulares. Podemos redondear esas esquinas con una propiedad CSS llamada <code>border-radius</code>.",
+            "Puedes especificar <code>border-radius</code> usando pixeles. Dale a tu foto del gato un <code>border-radius</code> de <code>10px</code>.",
+            "Nota: este desafío acepta múltiples soluciones. Por ejemplo, puedes agregar <code>border-radius</code> ya sea a la clase <code>.thick-green-border</code> o a la clase <code>.smaller-image</code>."
           ]
         },
         "pt-br": {
-          "title": "Deixe Botões e Caixas de Seleção Ativados por Padrão",
+          "title": "Insira Bordas Arredondadas com o Border Radius",
           "description": [
-            "É possível deixar um botão ou caixa de seleção ativado por padrão ao utilizar o atributo <code>checked</code>.",
-            "Para isso, basta você acrescentar a palavra \"checked\" no interior de um elemento de entrada. Por exemplo:",
-            "<code>&#60;input type=\"radio\" name=\"nome-de-teste\" checked&#62;</code>",
-            "Estabeleça como marcados por padrão o primeiro dos seus <code>botões de seleção/rádio</code> e a primeira <code>caixa de seleção</code>."
+            "Sua foto com o gato possui cantos pontiagudos. Podemos arredondar os cantos com uma propriedade CSS chamado <code>border-radius</code>.",
+            "Você pode especificar um <code>border-radius</code> com pixels. Adicione um <code>border-radius</code> de <code>10px</code> para a sua foto.",
+            "Nota: Este desafio permite várias soluções possíveis. Por exemplo, você pode adicionar o <code>border-radius</code> tanto para a classe <code>.thick-green-border</code> como para a classe <code>.smaller-image</code>."
           ]
         },
         "ru": {
-          "title": "Отметьте радио-кнопки и флаговые кнопки по-умолчанию",
+          "title": "Добавьте скруглённые углы с помощью радиуса границы",
           "description": [
-            "Вы можете установить флаг или радио-кнопку отмеченной по-умолчанию с помощью атрибута <code>checked</code>.",
-            "Для этого добавьте слово \"checked\" в качестве атрибута элемента input. Например:",
-            "<code>&#60;input type=\"radio\" name=\"test-name\" checked&#62;</code>",
-            "Установите первую <code>радио-кнопку</code> и первый <code>флаг</code> из наборов отмеченными по-умолчанию."
+            "У вашего фото кота сейчас острые углы. Мы можем скруглить углы используя CSS-свойство <code>border-radius</code>.",
+            "Вы можете указать значения <code>border-radius</code> в пикселях. Присвойте вашему фото кота свойство <code>border-radius</code> со значением <code>10px</code>.",
+            "Внимание: это задание подразумевает наличие нескольких возможных решений. Например, вы можете добавить <code>border-radius</code> как к классу <code>.thick-green-border</code>, так и к классу <code>.smaller-image</code>."
           ]
         }
       }
     },
     {
-      "id": "bad87fee1348bd9aede08835",
-      "title": "Nest Many Elements within a Single Div Element",
+      "id": "bad87fee1348bd9aedf08815",
+      "title": "Make Circular Images with a Border Radius",
       "description": [
-        "The <code>div</code> element, also known as a division element, is a general purpose container for other elements.",
-        "The <code>div</code> element is probably the most commonly used HTML element of all. It's useful for passing the CSS of its own class declarations down to all the elements that it contains.",
-        "Just like any other non-self-closing element, you can open a <code>div</code> element with <code>&#60;div&#62;</code> and close it on another line with <code>&#60;/div&#62;</code>.",
-        "Try putting your opening <code>div</code> tag above your \"Things cats love\" <code>p</code> element and your closing <code>div</code> tag after your closing <code>ol</code> tag so that both of your lists are within one <code>div</code>.",
-        "Nest your \"Things cats love\" and \"Things cats hate\" lists all within a single <code>div</code> element."
+        "In addition to pixels, you can also specify a <code>border-radius</code> using a percentage.",
+        "Give your cat photo a <code>border-radius</code> of <code>50%</code>."
       ],
       "challengeSeed": [
         "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
@@ -3056,7 +936,7 @@
         "    border-color: green;",
         "    border-width: 10px;",
         "    border-style: solid;",
-        "    border-radius: 50%;",
+        "    border-radius: 10px;",
         "  }",
         "",
         "  .smaller-image {",
@@ -3066,80 +946,44 @@
         "",
         "<h2 class=\"red-text\">CatPhotoApp</h2>",
         "",
-        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
-        "",
-        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back.\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
-        "",
-        "<p>Things cats love:</p>",
-        "<ul>",
-        "  <li>cat nip</li>",
-        "  <li>laser pointers</li>",
-        "  <li>lasagna</li>",
-        "</ul>",
-        "<p>Top 3 things cats hate:</p>",
-        "<ol>",
-        "  <li>flea treatment</li>",
-        "  <li>thunder</li>",
-        "  <li>other cats</li>",
-        "</ol>",
+        "<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
         "",
-        "<form action=\"/submit-cat-photo\">",
-        "  <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
-        "  <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
-        "  <label><input type=\"checkbox\" name=\"personality\" checked> Loving</label>",
-        "  <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
-        "  <label><input type=\"checkbox\" name=\"personality\"> Energetic</label>",
-        "  <input type=\"text\" placeholder=\"cat photo URL\" required>",
-        "  <button type=\"submit\">Submit</button>",
-        "</form>"
+        "<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
+        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
       ],
       "tests": [
-        "assert($(\"div\").children(\"p\").length > 1, 'message: Nest your <code>p</code> elements inside your <code>div</code> element.');",
-        "assert($(\"div\").children(\"ul\").length > 0, 'message: Nest your <code>ul</code> element inside your <code>div</code> element.');",
-        "assert($(\"div\").children(\"ol\").length > 0, 'message: Nest your <code>ol</code> element inside your <code>div</code> element.');",
-        "assert(code.match(/<\\/div>/g) && code.match(/<\\/div>/g).length === code.match(/<div>/g).length, 'message: Make sure your <code>div</code> element has a closing tag.');"
+        "assert(parseInt($(\"img\").css(\"border-top-left-radius\")) > 48, 'message: Your image should have a border radius of <code>50&#37;</code>&#44; making it perfectly circular.');",
+        "assert(code.match(/50%/g), 'message: Be sure to use a percentage value of <code>50&#37;</code>.');"
       ],
       "type": "waypoint",
       "challengeType": 0,
       "translations": {
         "de": {
-          "title": "Umschließe viele Elemente mit einem einzigen Div Element",
+          "title": "Erstelle runde Bilder mit einem Border Radius",
           "description": [
-            "Das <code>div</code> Element oder \"Division\" ist ein allgemeiner Container für andere Elemente.",
-            "Das <code>div</code> Element ist wahrscheinlich das am häufigsten verwendete HTML Element. Es ist nützlich um die CSS Stile der eigenen Klasse an die enthaltenen Elemente zu vererben.",
-            "Wie jedes andere Element – das sich nicht selbst schließt –  kannst du ein <code>div</code> Element mit <code>&#60;div&#62;</code> öffnen und mit <code>&#60;/div&#62;</code> wieder schließen.",
-            "Versuche dein öffnendes <code>div</code> Element überhalb des <code>p</code> Elements von  \"Things cats love\" und das schließende <code>div</code> unterhalb des schließenden <code>ol</code> Elements zu platzieren. Damit befinden sich beide Listen innerhalb eines <code>div</code>",
-            "Umschließe deine \"Thins cats love\" und \"Things cats hate\" Listen mit einem einzelnen <code>div</code> Element."
+            "Du kannst einem <code>border-radius</code> neben Pixeln auch Prozentwerte zuweisen.",
+            "Gib deinem Katzenfoto einen <code>border-radius</code> von <code>50%</code>."
           ]
         },
         "es": {
-          "title": "Anida muchos elementos dentro de una sólo elemento Div",
+          "title": "Crea imágenes circulares usando Border Radius",
           "description": [
-            "El elemento <code>div</code>, también conocido como un elemento de división, es un contenedor de propósito general para otros elementos.",
-            "El elemento <code>div</code> es probablemente el elemento HTML más utilizado. Es útil para pasar el CSS de sus propias declaraciones de clase a todos los elementos que contiene. ",
-            "Al igual que cualquier otro elemento sin cierre automático, puedes abrir una etiqueta <code>div</code> con <code>&#60;div&#62;</code> y cerrarla en otra línea con <code>&#60;/div&#62;</code> .",
-            "Trata de poner tu etiqueta de apertura <code>div</code> por encima de elemento <code>p</code> \"Things cat love\", y tu etiqueta de cierre de <code>div</code> después de tu etiqueta de cierre de <code>ol</code>, para que cada una de tus listas estén dentro de un <code>div</code>. ",
-            "Anida tus listas \"Things cats love\" y \"Things cats hate\" dentro de un solo elemento <code>div</code>."
+            "Además de pixeles, puedes especificar un <code>border-radius</code> usando porcentajes.",
+            "Dale a tu foto del gato un <code>border-radius</code> de <code>50%</code>."
           ]
         },
         "pt-br": {
-          "title": "Aninhe Muitos Elementos Dentro de um só Elemento Div",
+          "title": "Deixe as Imagens Circulares com o Border Radius",
           "description": [
-            "O elemento <code>div</code>, também conhecido como elemento de divisão, é um contentor de propósito geral para outros elementos.",
-            "O elemento <code>div</code> é provavelmente o elemento HTML mais utilizado. Ele é útil para adicionar o CSS de suas próprias declarações de classe para todos os elementos que o contém.",
-            "Da mesma forma que qualquer outro elemento sem fechamento automático, você deve abrir uma tag <code>div</code> com <code>&#60;div&#62;</code> e fechá-la em outra linha com <code>&#60;/div&#62;</code>.",
-            "Tente colocar sua tag de abertura <code>div</code> acima do elemento <code>p</code> \"Things cat love\", e sua tag de fechamento de <code>div</code> depois da tag de fechamento do <code>ol</code>, para que cada uma de suas listas esteja dentro de um <code>div</code>.",
-            "Aninhe suas listas \"Things cats love\" e \"Things cats hate\" no interior de um único elemento <code>div</code>."
+            "Assim como pixels, você também pode usar o <code>border-radius</code> com porcentagens.",
+            "Dê para a sua foto de gato um <code>border-radius</code> de <code>50%</code>."
           ]
         },
         "ru": {
-          "title": "Вложите множество элементов внутрь одного элемента div",
+          "title": "Сделайте круглые изображения с помощью радиуса границы",
           "description": [
-            "Элемент <code>div</code>, известный как элемент раздела, является контейнером общего назначения для других элементов.",
-            "Элемент <code>div</code> возможно наиболее широко используемый HTML элемент из всех возможных. Он полезен для передачи собственных CSS-свойств вниз по дереву элементов, которые он содержит.",
-            "Как и с любым другим несамозакрывающимся элементом, вы можете открыть элемент <code>div</code> меткой <code>&#60;div&#62;</code> и закрыть на следующей строке меткой <code>&#60;/div&#62;</code>.",
-            "Попробуйте разместить открывающую метку <code>div</code> над вашим элементом <code>p</code> с текстом \"Things cats love\", а закрывающую метку <code>div</code> после закрытия элемента <code>ol</code>, таким образом оба ваших списка оказываются внутри одного элемента <code>div</code>.",
-            "Вложите ваши списки \"Things cats love\" и \"Things cats hate\" внутрь одного элемента <code>div</code>."
+            "В дополнение к пикселям, вы также может использовать проценты для указания значения свойства <code>border-radius</code>.",
+            "Присвойте вашему фото кота свойство <code>border-radius</code> со значением <code>50%</code>."
           ]
         }
       }
@@ -4159,6 +2003,72 @@
         }
       }
     },
+    {
+      "id": "bad82fee1322bd9aedf08721",
+      "title": "Understand Absolute versus Relative Units",
+      "description": [
+        "The last several challenges all set an element's margin or padding with pixels (px). Pixels are a type of length unit, which is what tells the browser how to size or space an item. In addition to px, CSS has a number of different length unit options that you can use.",
+        "The two main types of length units are absolute and relative. Absolute units tie to physical units of length. For example, in and mm refer to inches and millimeters, respectively. Absolute length units approximate the actual measurement on a screen, but there are some differences depending on a screen's resolution.",
+        "Relative units, such as em or rem, are relative to another length value. For example, em is based on the size of an element's font-size. If you use it to set the font-size property itself, it's relative to the parent's font-size.",
+        "Note",
+        "There are several relative unit options that are tied to the size of the viewport. They are covered in the Responsive Web Design section.",
+        "Instructions",
+        "Add a padding property to the element with class red-box and set it to 1.5em."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  .injected-text {",
+        "    margin-bottom: -25px;",
+        "    text-align: center;",
+        "  }",
+        "",
+        "  .box {",
+        "    border-style: solid;",
+        "    border-color: black;",
+        "    border-width: 5px;",
+        "    text-align: center;",
+        "  }",
+        "",
+        "  .yellow-box {",
+        "    background-color: yellow;",
+        "    padding: 20px 40px 20px 40px;",
+        "  }",
+        "",
+        "  .red-box {",
+        "    background-color: red;",
+        "    margin: 20px 40px 20px 40px;",
+        "",
+        "  }",
+        "",
+        "  .green-box {",
+        "    background-color: green;",
+        "    margin: 40px 20px 20px 40px;",
+        "  }",
+        "</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>",
+        "</div>",
+        "</style>",
+        "",
+        "<h1 class=\"red-text\">I am red!</h1>",
+        "",
+        "<h1 class=\"orchid-text\">I am orchid!</h1>",
+        "",
+        "<h1 class=\"sienna-text\">I am sienna!</h1>",
+        "",
+        "<h1 class=\"blue-text\">I am blue!</h1>"
+      ],
+      "tests": [
+        "assert($('.red-box').css('padding-top') != '0px' && $('.red-box').css('padding-right') != '0px' && $('.red-box').css('padding-bottom') != '0px' && $('.red-box').css('padding-left') != '0px', 'message: Your <code>red-box</code> class should have a <code>padding</code> property.');",
+        "assert(code.match(/\\.red-box\\s*?{\\s*?.*?\\s*?.*?\\s*?padding:\\s*?1\\.5em/gi), 'message: Your <code>red-box</code> class should give elements 1.5em of <code>padding</code>.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
     {
       "id": "bad87fee1348bd9aedf08736",
       "title": "Style the HTML Body Element",
@@ -5112,4 +3022,4 @@
       }
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/seed/challenges/01-responsive-web-design/basic-html-and-html5.json b/seed/challenges/01-responsive-web-design/basic-html-and-html5.json
new file mode 100644
index 00000000000000..4bbfe43f40c786
--- /dev/null
+++ b/seed/challenges/01-responsive-web-design/basic-html-and-html5.json
@@ -0,0 +1,2322 @@
+{
+  "name": "Basic HTML and HTML5",
+  "order": 0,
+  "time": "5 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "bd7123c8c441eddfaeb5bdef",
+      "title": "Say Hello to HTML Elements",
+      "description": [
+        "Welcome to Free Code Camp's first coding challenge.",
+        "You can edit <code>code</code> in your <code>text editor</code>, which we've embedded into this web page.",
+        "Do you see the code in your text editor that says <code>&#60;h1&#62;Hello&#60;/h1&#62;</code>? That's an HTML <code>element</code>.",
+        "Most HTML elements have an <code>opening tag</code> and a <code>closing tag</code>.",
+        "Opening tags look like this:",
+        "<code>&#60;h1&#62;</code>",
+        "Closing tags look like this:",
+        "<code>&#60;/h1&#62;</code>",
+        "Note that the only difference between opening tags and closing tags is that closing tags have a slash after their opening angle bracket.",
+        "Each challenge has tests that you can run at any time by clicking the \"Run tests\" button. Once you get all tests passing, you can advance to the next challenge.",
+        "To pass the test on this challenge, change your <code>h1</code> element's text to say \"Hello World\" instead of \"Hello\". Then click the \"Run tests\" button."
+      ],
+      "challengeSeed": [
+        "<h1>Hello</h1>"
+      ],
+      "tests": [
+        {
+          "text": "Your <code>h1</code> element should have the text \"Hello World\".",
+          "testString": "assert.isTrue((/hello(\\s)+world/gi).test($('h1').text()), 'Your <code>h1</code> element should have the text \"Hello World\".');"
+        }
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [
+            "Willkommen bei der ersten Programmier-Challenge von Free Code Camp!",
+            "Mithilfe des eingebauten <code>text editor</code> kannst du den <code>code</code> bearbeiten.",
+            "Siehst du den Code <code>&#60;h1&#62;Hallo&#60;/h1&#62;</code> im Editor? Das ist ein HTML <code>element</code>",
+            "Die meisten HTML Elemente haben einen <code>opening tag</code> und einen <code>closing tag</code>.",
+            "Öffnende Tags sehen so aus:",
+            "<code>&#60;h1&#62;</code>",
+            "Schließende Tags so:",
+            "<code>&#60;/h1&#62;</code>",
+            "Beachte, dass der einzige Unterschied zwischen öffnenden und schließenden Tags ist, das schließende Tags ein Slash nach der sich öffnenden spitzen Klammer folgt.",
+            "Jede Challenge hat Tests die du jederzeit starten kannst indem du den \"Run tests\" Button drückst. Wenn alle Tests bestehen kannst du mit der nächsten Challenge fortfahren.",
+            "Um den Test dieser Challenge zu bestehen, ändere den Text deines <code>h1</code> Elements von \"Hello\" zu \"Hello World\". Klicke dann den \"Run tests\" Button."
+          ]
+        },
+        "fr": {
+          "title": "Dites bonjour aux éléments HTML",
+          "description": [
+            "Bienvenue au premier défi de code de Free Code Camp.",
+            "Vous pouvez modifier le <code>code</code> dans votre <code>éditeur texte</code>, lequel est disponible dans cette page.",
+            "Voyez-vous le code dans l'éditeur texte qui dit <code>&#60;h1&#62;Hello&#60;/h1&#62;</code>? C'est un <code>élément</code> HTML.",
+            "La plupart des éléments HTML ont une <code>balise ouvrante</code> et une <code>balise fermante</code>",
+            "Les balises ouvrantes ont cette apparence :",
+            "<code>&#60;h1&#62;</code>",
+            "Les balises fermantes ont cette apparence :",
+            "<code>&#60;/h1&#62;</code>",
+            "Notez que la seule différence entre une balise ouvrante et fermante est que la balise fermante a une barre oblique après son chevron ouvrant.",
+            "Chaque défi contient des tests que vous pouvez éxécuter en cliquant sur le bouton \"Run tests\". Lorsque tous les tests sont réussis, vous pouvez poursuivre avec le défi suivant.",
+            "Pour réussir le test de ce défi, changez le texte de l'élément <code>h1</code> pour \"Hello World\" plutôt que \"Hello\". Cliquez ensuite sur le bouton \"Run tests\"."
+          ]
+        },
+        "pt-br": {
+          "title": "Diga Olá aos Elementos HTML",
+          "description": [
+            "Seja bem vindo ao primeiro desafio de programação do Free Code Camp!",
+            "Você pode editar o seu <code>código</code> em seu <code>editor de texto</code>, que embutimos aqui nesta página da web.",
+            "Consegue ver o código que diz <code>&#60;h1&#62;Hello&#60;/h1&#62;</code> no seu editor de texto? Esse é um elemento HTML.",
+            "A maioria dos elementos HTML tem uma <code>tag de abertura</code> e uma <code>tag de fechamento</code>.",
+            "As tags de abertura são assim: <code>&#60;h1&#62;</code>. E as tags de fechamento são assim: <code>&#60;/h1&#62;</code>.",
+            "Note que a única diferença entre as tags de abertura e fechamento é que as de fechamento possuem uma barra (/) depois do sinal de abertura (<).",
+            "Cada desafio possui testes que você pode executar a qualquer momento ao clicar no botão \"Executar testes\". Quando você conseguir passar em todos os testes, poderá avançar para o próximo desafio.",
+            "Para passar nos testes deste desafio, mude o texto do elemento <code>h1</code> para que diga \"Hello World\" no lugar de \"Hello\". Depois, clique no botão \"Executar testes\"."
+          ]
+        },
+        "ru": {
+          "title": "Скажи привет HTML-элементам",
+          "description": [
+            "Добро пожаловать на первое программное испытание Free Code Camp.",
+            "Вы можете редактировать <code>код</code> в вашем <code>текстовом редакторе</code>, который мы встроили в эту web-страницу.",
+            "Видите этот код в вашем текстовом редакторе: <code>&#60;h1&#62;Hello&#60;/h1&#62;</code>? Это HTML <code>элемент</code>.",
+            "Большинство HTML-элементов имеют <code>открывающую метку</code> <code>закрывающую метку</code>.",
+            "Открывающие метки выглядят так:",
+            "<code>&#60;h1&#62;</code>",
+            "Закрывающие метки выглядят следующим образом:",
+            "<code>&#60;/h1&#62;</code>",
+            "Обратите внимание, что единственная разница между открывающими и закрывающими метками заключается в наличии косой черты после открывающей треугольной скобки.",
+            "Каждое испытание имеет функцию проверки решения, которую вы можете запустить в любой момент нажатием на кнопку \"Run tests\". Как только ваше решение будет удовлетворять всем требованиям, вы сможете перейти к следующему испытанию.",
+            "Для прохождения этого испытания измените текст элемента <code>h1</code> с \"Hello\" на \"Hello World\". Затем нажмите кнопку \"Run tests\"."
+          ]
+        }
+      }
+    },
+    {
+      "id": "bad87fee1348bd9aedf0887a",
+      "title": "Headline with the h2 Element",
+      "description": [
+        "Over the next few challenges, we'll build an HTML5 app that will look something like this:",
+        "<a href=\"//i.imgur.com/jOc1JF1.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/jOc1JF1.png\" title=\"Click to enlarge\" alt=\"A screen shot of our finished Cat Photo App\"></a>",
+        "The <code>h2</code> element you enter will create an <code>h2</code> element on the website.",
+        "This element tells the browser about the structure of your website. <code>h1</code> elements are often used for main headings, while <code>h2</code> elements are generally used for subheadings. There are also <code>h3</code>, <code>h4</code>, <code>h5</code> and <code>h6</code> elements to indicate different and new sections.",
+        "Add an <code>h2</code> tag that says \"CatPhotoApp\" to create a second HTML <code>element</code> below your \"Hello World\" <code>h1</code> element."
+      ],
+      "challengeSeed": [
+        "<h1>Hello World</h1>"
+      ],
+      "tests": [
+        "assert(($(\"h2\").length > 0), 'message: Create an <code>h2</code> element.');",
+        "assert(code.match(/<\\/h2>/g) && code.match(/<\\/h2>/g).length === code.match(/<h2>/g).length, 'message: Make sure your <code>h2</code> element has a closing tag.');",
+        "assert.isTrue((/cat(\\s)?photo(\\s)?app/gi).test($(\"h2\").text()), 'message: Your <code>h2</code> element should have the text \"CatPhotoApp\".');",
+        "assert.isTrue((/hello(\\s)+world/gi).test($(\"h1\").text()), 'message: Your <code>h1</code> element should have the text \"Hello World\".');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [
+            "In den nächsten Challenges werden wir eine HTML5 App entwickeln die ungefähr so aussehen wird:",
+            "<a href=\"//i.imgur.com/jOc1JF1.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/jOc1JF1.png\" title=\"Klicke zum Vergrößern\" alt=\"Ein Screenshot von unserer beendeted Katzenfoto App\"></a>",
+            "Das eingetragene <code>h2</code> Element wird ein <code>h2</code> Element auf der Website erzeugen.",
+            "Dieses Element sagt dem Browser, wie die Struktur deiner Website aufgebaut ist. <code>h1</code> Elemente werden oft für Hauptüberschriften verwendet, während <code>h2</code> Elemente üblicherweise für Zwischenüberschriften verwendet werden. Es gibt auch <code>h3</code>, <code>h4</code>, <code>h5</code> und <code>h6</code> Elemente die verschiedene und neue Bereiche kennzeichnen.",
+            "Füge unter <code>h1</code> \"Hello World\" ein zweites HTML Element <code>h2</code> hinzu, in dem \"CatPhotoApp\" steht."
+          ]
+        },
+        "fr": {
+          "title": "Un titre avec l'élément h2",
+          "description": [
+            "Pour les quelques prochains défis, nous construirons une application HTML5 qui ressemblera à ceci :",
+            "<a href=\"//i.imgur.com/jOc1JF1.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/jOc1JF1.png\" title=\"Cliquez pour agrandir\" alt=\"Une capture écran de notre application de photo de chats\"></a>",
+            "L'élément <code>h2</code> que vous entrerez créera un élément <code>h2</code> sur le site.",
+            "Cet élément renseigne votre navigateur sur la structure de votre site. Les éléments <code>h1</code> sont souvent utilisés comme titre, tandis que les éléments <code>h2</code> sont généralement utilisés comme sous-titres. Il existe également les éléments <code>h3</code>, <code>h4</code>, <code>h5</code> et <code>h6</code> qui indiquent une nouvelle et différente section.",
+            "Ajoutez une balise <code>h2</code> contenant \"CatPhotoApp\" pour créer un second <code>élément</code> HTML sous l'élément <code>h1</code> contenant \"Hello World\"."
+          ]
+        },
+        "pt-br": {
+          "title": "Cabeçalho com o Elemento h2",
+          "description": [
+            "Durante os próximos desafios, construiremos um aplicativo em HTML que se parecerá como este:",
+            "<a href=\"//i.imgur.com/jOc1JF1.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/jOc1JF1.png\" title=\"Clique para aumentar\" alt=\"Imagem do aplicativo CatPhotoApp finalizado\"></a>",
+            "O elemento <code>h2</code> que você criar gerará um elemento <code>h2</code> na página da web.",
+            "Este elemento indica ao navegador a forma de mostrar o texto que contém.",
+            "Os elementos <code>h2</code> são ligeiramente menores que os elementos <code>h1</code>. Há também os elementos <code>h3</code>, <code>h4</code>, <code>h5</code> e <code>h6</code>.",
+            "Adicione uma tag <code>h2</code> que diga \"CatPhotoApp\" para criar um segundo <code>elemento</code> HTML abaixo de seu elemento <code>h1</code> chamado \"Hello World\"."
+          ]
+        },
+        "ru": {
+          "title": "Заголовок с применением элемента h2",
+          "description": [
+            "В результате прохождения нескольких следующих испытаний, мы построим HTML5 приложение, которое будет похоже на это:",
+            "<a href=\"//i.imgur.com/jOc1JF1.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" src=\"//i.imgur.com/jOc1JF1.png\" title=\"Click to enlarge\" alt=\"A screen shot of our finished Cat Photo App\"></a>",
+            "Вводимый вами элемент <code>h2</code> создаст соответствующий элемент <code>h2</code> на web-странице.",
+            "Этот элемент сообщает браузеру о структуре вашего web-сайта. Элементы <code>h1</code> часто применяют в качестве главных заголовков, в то время как элементы <code>h2</code> обычно используют для обозначения позаголовков. Также существуют элементы <code>h3</code>, <code>h4</code>, <code>h5</code> и <code>h6</code> для обозначения отдельных секций.",
+            "Добавьте метку <code>h2</code> с текстом \"CatPhotoApp\" для создания второго HTML <code>элемента</code> под вашим элементом <code>h1</code> с текстом \"Hello World\"."
+          ]
+        }
+      }
+    },
+    {
+      "id": "bad87fee1348bd9aedf08801",
+      "title": "Inform with the Paragraph Element",
+      "description": [
+        "<code>p</code> elements are the preferred element for normal-sized paragraph text on websites. P is short for \"paragraph\".",
+        "You can create a <code>p</code> element like this:",
+        "<code>&#60;p&#62;I'm a p tag!&#60;/p&#62;</code>",
+        "Create a <code>p</code> element below your <code>h2</code> element, and give it the text \"Hello Paragraph\"."
+      ],
+      "challengeSeed": [
+        "<h1>Hello World</h1>",
+        "<h2>CatPhotoApp</h2>"
+      ],
+      "tests": [
+        "assert(($(\"p\").length > 0), 'message: Create a <code>p</code> element.');",
+        "assert.isTrue((/hello(\\s)+paragraph/gi).test($(\"p\").text()), 'message: Your <code>p</code> element should have the text \"Hello Paragraph\".');",
+        "assert(code.match(/<\\/p>/g) && code.match(/<\\/p>/g).length === code.match(/<p/g).length, 'message: Make sure your <code>p</code> element has a closing tag.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [
+            "<code>p</code> Elemente sind das bevorzugte Element für normale Paragraphentexte auf einer Website. P ist die Abkürzung für \"Paragraph\".",
+            "Du kannst ein <code>p</code> Element so erzeugen:",
+            "<code>&#60;p&#62;Ich bin ein p Element!&#60;/p&#62;</code>",
+            "Erstelle ein <code>p</code> Element unter deinem <code>h2</code> Element und füge den Text \"Hello Paragraph\" ein."
+          ]
+        },
+        "fr": {
+          "title": "Informez avec l'élément paragraphe",
+          "description": [
+            "L'élément <code>p</code> est le préféré pour les textes de paragraphes de taille normale. P est l'acronyme de \"paragraphe\",",
+            "Vous pouvez créer un élément <code>p</code> comme ceci :",
+            "<code>&#60;p&#62;Je suis une balise p!&#60;/p&#62;</code>",
+            "Créez un élément <code>p</code> sous votre élément <code>h2</code> et inscrivez-y le texte \"Hello Paragraph\"."
+          ]
+        },
+        "pt-br": {
+          "title": "Informe com o Elemento Parágrafo",
+          "description": [
+            "Os elementos <code>p</code> são os preferenciais para criar parágrafos de texto com tamanho normal nas páginas da web. P significa a abreviatura de \"parágrafo\".",
+            "Você pode criar um elemento <code>p</code> assim:",
+            "<code>&#60;p&#62;Sou uma tag p!&#60;/p&#62;</code>",
+            "Crie um elemento <code>p</code> abaixo de seu elemento <code>h2</code>, e dê a ele o texto \"Hello Paragraph\"."
+          ]
+        },
+        "ru": {
+          "title": "Проинформируйте с применением элемента p",
+          "description": [
+            "Элементы <code>p</code> предпочтительно использовать для обозначения параграфов с текстом нормального размера в web-сайтах. P - сокращение от \"paragraph\".",
+            "Вы можете создать элемент <code>p</code> следующим образом:",
+            "<code>&#60;p&#62;Я метка p!&#60;/p&#62;</code>",
+            "Создайте элемент <code>p</code> под вашим элементом <code>h2</code> и присвойте ему текст \"Hello Paragraph\"."
+          ]
+        }
+      }
+    },
+    {
+      "id": "bad87fee1348bd9aecf08801",
+      "title": "Introduction to HTML5 Elements",
+      "description": [
+        "HTML5 introduces more descriptive HTML tags. These include <header>, <footer>, <nav>, <video>, <article>, <section> and others.",
+        "These tags not only make your HTML easier to read, it also helps with Search Engine Optimization (SEO) and accessibility.",
+        "The <main> HTML5 tag helps search engines and other developers find the main content of your page.",
+        "Note",
+        "Many of the new HTML5 tags and their benefits are covered in the Applied Accessibility section.",
+        "Instructions",
+        "Wrap the paragraph with a opening and closing main tag."
+      ],
+      "challengeSeed": [
+        "<h2>CatPhotoApp</h2>",
+        "<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>"
+      ],
+      "tests": [
+        "assert($('main').length === 1, 'message: Your code should have one <code>main</code> element.');",
+        "assert(code.match(/<main>\\s*?<p>/g), 'message: The opening <code>main</code> tag should come before the paragraph tag.');",
+        "assert(code.match(/</p>\\s*?</main>/g), 'message: The closing <code>main</code> tag should come after your closing paragraph tag.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "bad87fee1348bd9aedf08833",
+      "title": "Fill in the Blank with Placeholder Text",
+      "description": [
+        "Web developers traditionally use <code>lorem ipsum text</code> as placeholder text. The 'lorem ipsum' text is randomly scraped from a famous passage by Cicero of Ancient Rome.",
+        "Lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.",
+        "Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called <code>kitty ipsum text</code>.",
+        "Replace the text inside your <code>p</code> element with the first few words of this kitty ipsum text: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
+      ],
+      "challengeSeed": [
+        "<h1>Hello World</h1>",
+        "",
+        "<h2>CatPhotoApp</h2>",
+        "",
+        "<p>Hello Paragraph</p>"
+      ],
+      "tests": [
+        "assert.isTrue((/Kitty(\\s)+ipsum/gi).test($(\"p\").text()), 'message: Your <code>p</code> element should contain the first few words of the provided <code>kitty ipsum text</code>.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [
+            "Webentwickler nutzen für gewöhnlich \"Lorem Ipsum Text\" als Platzhalter. Es heißt \"Lorem Ipsum\", weil es die ersten zwei Wörter aus einer bekannten Passage von Cicero des alten Roms sind.",
+            "\"Lorem Ipsum\" Text wurde seit dem 16. Jahrhundert von Schriftsetzern als Platzhalter verwendet. Und diese Tradition setzt sich im Web fort.",
+            "Nun gut, fünf Jahrhunderte sind lange genug. Da wir eine CatPhotoApp entwickeln, lass uns stattdessen lieber <code>kitty ipsum text</code> nutzen.",
+            "Ersetze den Text in deinem <code>p</code> Element mit den ersten Wörtern des \"Kitty Ipsum\" Textes: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
+          ]
+        },
+        "fr": {
+          "title": "Remplissez les blancs avec du faux-texte",
+          "description": [
+            "Les développeurs Web utilisent traditionnellement du <code>lorem ipsum</code> comme texte de substitution. Le texte lorem ipsum provient d'un extrait de Cicero, de la Rome antique.",
+            "Le texte lorem ipsum a été utilisé comme faux-texte par des typographes depuis le 16<sup>ème</sup> siècle et cette tradition se poursuit sur le Web.",
+            "Enfin, 5 siècles est suffisament long. Étant donné que nous fabriquons une application de photos de chats, utilisons plutôt du texte <code>Kitty ipsum</code>.",
+            "Remplacez le texte à l'intérieur des éléments <code>p</code> avec ces quelques mots du texte Kitty ipsum : <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
+          ]
+        },
+        "pt-br": {
+          "title": "Preencha Espaços com Texto de Espaço Reservado",
+          "description": [
+            "Desenvolvedores web tradicionalmente usam <code>Lorem Ipsum</code> como texto de preenchimento. Lorem Ipsum é chamado assim pois essas são as duas primeiras palavras de uma passagem famosa de Cícero da Roma Antiga.",
+            "O texto Lorem Ipsum tem sido utilizado como texto de espaço reservado por compositores desde o século 16, e esta tradição continua na web.",
+            "Bem, 5 séculos é um tempo longo o bastante. Já que estamos desenvolvendo um aplicativo sobre fotos de gatos (CatPhotoApp), vamos usar algo chamado <code>Kitty Ipsum</code>.",
+            "Substitua o texto dentro do seu elemento <code>p</code> pelas primeiras palavras deste texto Kitty Ipsum: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
+          ]
+        },
+        "ru": {
+          "title": "Заполните пустоты замещающим текстом",
+          "description": [
+            "Традиционно web-разработчики используют текст <code>lorem ipsum</code> в качестве замещающего текста. Он называется тектсом <code>lorem ipsum</code> по первым двум словам известного пассажа Цицерона из Древнего Рима.",
+            "Текст <code>lorem ipsum</code> применяется в качестве замещающего текста наборщиками с 16-го века, и эта традиция продолжается в сети.",
+            "5 веков довольно долгий период. Так как мы строим приложение CatPhotoApp, давайте используем нечто называемое текстом <code>kitty ipsum</code>.",
+            "Замените текст внутри вашего элемента <code>p</code> первыми двумя словами текста <code>kitty ipsum</code>: <code>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</code>"
+          ]
+        }
+      }
+    },
+    {
+      "id": "bad87fee1348bd9aedf08812",
+      "title": "Add Images to your Website",
+      "description": [
+        "You can add images to your website by using the <code>img</code> element, and point to a specific image's URL using the <code>src</code> attribute.",
+        "An example of this would be:",
+        "<code>&#60img src=\"https://www.your-image-source.com/your-image.jpg\"&#62</code>",
+        "All <code>img</code> elements <strong>must</strong> have an <code>alt</code> attribute. The text inside an <code>alt</code> attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.",
+        "Let's add an <code>alt</code> attribute to our <code>img</code> example above:",
+        "<code>&#60img src=\"https://www.your-image-source.com/your-image.jpg\" alt=\"Author standing on a beach with two thumbs up.\"&#62</code>",
+        "Note that in most cases, <code>img</code> elements are self-closing.",
+        "Try it with this image:",
+        "<code>https://bit.ly/fcc-relaxing-cat</code>"
+      ],
+      "challengeSeed": [
+        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
+        "<style>",
+        "  .red-text {",
+        "    color: red;",
+        "  }",
+        "",
+        "  h2 {",
+        "    font-family: Lobster, Monospace;",
+        "  }",
+        "",
+        "  p {",
+        "    font-size: 16px;",
+        "    font-family: Monospace;",
+        "  }",
+        "</style>",
+        "",
+        "<h2 class=\"red-text\">CatPhotoApp</h2>",
+        "",
+        "<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
+        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
+      ],
+      "tests": [
+        "assert($(\"img\").length > 0, 'message: Your page should have an image element.');",
+        "assert(new RegExp(\"\\/\\/bit.ly\\/fcc-relaxing-cat|\\/\\/s3.amazonaws.com\\/freecodecamp\\/relaxing-cat.jpg\", \"gi\").test($(\"img\").attr(\"src\")), 'message: Your image should have a <code>src</code> attribute that points to the kitten image.');",
+        "assert(code.match(/alt\\s*?=\\s*?(\\\"|\\').*(\\\"|\\')/), 'message: Your image element <strong>must</strong> have an <code>alt</code> attribute.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [
+            "Du kannst <code>img</code> Elemente verwenden, um Bilder in deine Website einzubauen. Um zur URL des Bildes zu verweisen, benutzt du das <code>src</code> Attribut.",
+            "Ein Beispiel dafür wäre:",
+            "<code>&#60img src=\"https://www.deine-bild-quelle.com/dein-bild.jpg\"&#62</code>",
+            "Beachte dass in den meisten Fällen <code>img<code> Elemente selbstschließend sind.",
+            "Versuche es mit diesem Bild:",
+            "<code>https://bit.ly/fcc-relaxing-cat</code>"
+          ]
+        },
+        "fr": {
+          "title": "Ajouter des images à votre site Web",
+          "description": [
+            "Vous pouvez ajouter des images à votre site Web en utilisant l'élément <code>img</code> et pointer vers une URL d'image spécifique en utilisant l'attribut <code>src</code>.",
+            "Un exemple de cette procédure serait :",
+            "<code>&#60img src=\"https://www.your-image-source.com/your-image.jpg\"&#62</code>",
+            "Note that in most cases, <code>img</code> elements are self-closing.",
+            "Prenez note que dans la plupart des cas, les éléments <code>img</code> sont auto-fermants.",
+            "Essayez avec cette image :",
+            "<code>https://bit.ly/fcc-relaxing-cat</code>"
+          ]
+        },
+        "pt-br": {
+          "title": "Adicione Imagens em sua Página Web",
+          "description": [
+            "Você pode adicionar imagens à sua página da internet com o uso do elemento <code>img</code>, e apontar para a URL específica de uma imagem utilizando o atributo <code>src</code>.",
+            "Um exemplo para isso seria:",
+            "<code>&#60img src=\"https://www.your-image-source.com/your-image.jpg\"&#62</code>",
+            "Observe que na maior parte dos casos, os elementos <code>img</code> são de fechamento automático.",
+            "Agora, tente fazer isso com essa imagem:",
+            "<code>https://bit.ly/fcc-relaxing-cat</code>"
+          ]
+        },
+        "ru": {
+          "title": "Добавьте изображения к вашему сайту",
+          "description": [
+            "Вы можете добавлять изображения к вашему сайту с помощью элемента <code>img</code> и указывать ссылки определённых изображений с помощтю атрибута <code>src</code>.",
+            "Примером добавления мзображения может служить:",
+            "<code>&#60img src=\"https://www.your-image-source.com/your-image.jpg\"&#62</code>",
+            "Обратите внимание, что в большинстве случаев элементы <code>img</code> являются самозакрывающимися.",
+            "Попробуйте добавить изображение используя следующую ссылку:",
+            "<code>https://bit.ly/fcc-relaxing-cat</code>"
+          ]
+        }
+      }
+    },
+    {
+      "id": "bad87fee1348bd9aedf08802",
+      "title": "Uncomment HTML",
+      "description": [
+        "Commenting is a way that you can leave comments within your code without affecting the code itself.",
+        "Commenting is also a convenient way to make code inactive without having to delete it entirely.",
+        "You can start a comment with <code>&#60;!--</code> and end a comment with <code>--&#62;</code>",
+        "Uncomment your <code>h1</code>, <code>h2</code> and <code>p</code> elements."
+      ],
+      "challengeSeed": [
+        "<!--",
+        "<h1>Hello World</h1>",
+        "",
+        "<h2>CatPhotoApp</h2>",
+        "",
+        "<p>Hello Paragraph</p>",
+        "-->"
+      ],
+      "tests": [
+        "assert($(\"h1\").length > 0, 'message: Make your <code>h1</code> element visible on your page by uncommenting it.');",
+        "assert($(\"h2\").length > 0, 'message: Make your <code>h2</code> element visible on your page by uncommenting it.');",
+        "assert($(\"p\").length > 0, 'message: Make your <code>p</code> element visible on your page by uncommenting it.');",
+        "assert(!/[^fc]-->/gi.test(code.replace(/ *<!--[^fc]*\\n/g,'')), 'message: Be sure to delete all trailing comment tags&#44; i.e. <code>--&#62;</code>.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [
+            "Kommentieren erlaubt dir Kommentare innerhalb des Codes zu hinterlassen, ohne diesen selbst zu beeinflussen.",
+            "Dies ist auch ein guter Weg, um Code inaktiv zu machen ohne diesen komplett löschen zu müssen.",
+            "Du kannst einen Kommentar mit <code>&#60;!--</code> starten und ihn mit <code>--&#62;</code> wieder beenden.",
+            "Entkommentiere deine <code>h1</code>, <code>h2</code> und <code>p</code> Elemente."
+          ]
+        },
+        "fr": {
+          "title": "Décommenter du HTML",
+          "description": [
+            "Commenter est une façon de laisser des commentaires dans votre code sans affecter le fonctionnement du code.",
+            "Commenter est aussi un moyen pratique de rendre du code inactif sans devoir le supprimer entièrement.",
+            "Vous pouvez débuter un commentaire avec <code>&#60;!--</code> et le terminer avec <code>--&#62;</code>.",
+            "Décommenter vos éléments <code>h1</code>, <code>h2</code> et <code>p</code>."
+          ]
+        },
+        "pt-br": {
+          "title": "Descomente o HTML",
+          "description": [
+            "\"Comentar\" é uma forma de deixar anotações em seu código sem afetá-lo.",
+            "Comentar também é um jeito conveniente de deixar seu código inativo sem precisar apagá-lo por completo.",
+            "Você pode iniciar um comentário com <code>&#60;!--</code> e terminar seu comentário com <code>--&#62;</code>.",
+            "Remova o comentário dos elementos <code>h1</code>, <code>h2</code> e <code>p</code>."
+          ]
+        },
+        "ru": {
+          "title": "Раскомментируйте HTML",
+          "description": [
+            "Комментирование - способ хранения заметок по коду без воздействия на сам код.",
+            "Также комментирование - неплохой метод отключения части кода без необходимости его удаления.",
+            "Вы можете начать комментарий с <code>&#60;!--</code> и закончить его <code>--&#62;</code>",
+            "Раскомментируйте свои элементы <code>h1</code>, <code>h2</code> и <code>p</code>."
+          ]
+        }
+      }
+    },
+    {
+      "id": "bad87fee1348bd9aedf08804",
+      "title": "Comment out HTML",
+      "description": [
+        "Remember that in order to start a comment, you need to use <code>&#60;!--</code> and to end a comment, you need to use <code>--&#62;</code>",
+        "Here you'll need to end the comment before your <code>h2</code> element begins.",
+        "Comment out your <code>h1</code> element and your <code>p</code> element, but leave your <code>h2</code> element uncommented."
+      ],
+      "challengeSeed": [
+        "<!--",
+        "<h1>Hello World</h1>",
+        "",
+        "<h2>CatPhotoApp</h2>",
+        "",
+        "<p>Hello Paragraph</p>",
+        "-->"
+      ],
+      "tests": [
+        "assert(($(\"h1\").length === 0), 'message: Comment out your <code>h1</code> element so that it is not visible on your page.');",
+        "assert(($(\"h2\").length > 0), 'message: Leave your <code>h2</code> element uncommented so that it is visible on your page.');",
+        "assert(($(\"p\").length === 0), 'message: Comment out your <code>p</code> element so that it is not visible on your page.');",
+        "assert(code.match(/[^fc]-->/g).length > 1, 'message: Be sure to close each of your comments with <code>--&#62;</code>.');",
+        "assert((code.match(/<([a-z0-9]){1,2}>/g)[0]===\"<h1>\" && code.match(/<([a-z0-9]){1,2}>/g)[1]===\"<h2>\" && code.match(/<([a-z0-9]){1,2}>/g)[2]===\"<p>\") , 'message: Do not change the order of the <code>h1</code> <code>h2</code> or <code>p</code> in the code.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [
+            "Denk daran, dass du einen Kommentar mit <code>&#60;!--</code> anfangen und mit <code>--&#62;</code> wieder beenden werden.",
+            "Hier wirst du deinen Kommentar vor dem <code>h2</code> Element beenden müssen.",
+            "Kommentiere die <code>h1</code> und <code>p</code> Elemente aus, aber lasse dein <code>h2</code> Element unkommentiert."
+          ]
+        },
+        "fr": {
+          "title": "Commentez du HTML",
+          "description": [
+            "Souvenez-vous que pour débuter un commentaire, vous devez utiliser <code>&#60;!--</code> et que pour le terminer, vous devez utiliser <code>--&#62;</code>.",
+            "Ici vous devrez terminer le commentaire juste avant que l'élément <code>h2</code> commence.",
+            "Commentez les éléments <code>h1</code> et <code>p</code>, mais laissez l'élément <code>h2</code> tel quel."
+          ]
+        },
+        "pt-br": {
+          "title": "Comente o HTML",
+          "description": [
+            "Lembre-se que para iniciar um comentário você precisa utilizar <code>&#60;!--</code>, e para terminar um comentário é necessário usar <code>--&#62;</code>.",
+            "Aqui, você deverá terminar o comentário antes que seu elemento <code>h2</code> inicie.",
+            "Comente o elemento <code>h1</code> e o elemento <code>p</code>, e deixe o elemento <code>h2</code> sem nenhum comentário."
+          ]
+        },
+        "ru": {
+          "title": "Закомментируйте HTML",
+          "description": [
+            "Помните, что для начала комментария вам необходимо использовать <code>&#60;!--</code>, а для завершения комментария - <code>--&#62;</code>",
+            "Тут вам необходимо завершить комментарий до начала вашего элемента <code>h2</code>.",
+            "Закомментируйте ваши элементы <code>h1</code> и <code>p</code>, но оставьте ваш элемент <code>h2</code> раскомментированным."
+          ]
+        }
+      }
+    },
+    {
+      "id": "bad87fed1348bd9aedf08833",
+      "title": "Delete HTML Elements",
+      "description": [
+        "Our phone doesn't have much vertical space.",
+        "Let's remove the unnecessary elements so we can start building our CatPhotoApp.",
+        "Delete your <code>h1</code> element so we can simplify our view."
+      ],
+      "challengeSeed": [
+        "<h1>Hello World</h1>",
+        "",
+        "<h2>CatPhotoApp</h2>",
+        "",
+        "<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>"
+      ],
+      "tests": [
+        "assert(($(\"h1\").length == 0), 'message: Delete your <code>h1</code> element.');",
+        "assert(($(\"h2\").length > 0), 'message: Leave your <code>h2</code> element on the page.');",
+        "assert(($(\"p\").length > 0), 'message: Leave your <code>p</code> element on the page.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [
+            "Unser Smartphone hat nicht sehr viel vertikalen Platz.",
+            "Lass uns die unwichtigen Elemente entfernen, damit wir unsere CatPhotoApp entwickeln können.",
+            "Lösche die Elemente <code>h1</code>, damit wir etwas Ordnung schaffen."
+          ]
+        },
+        "fr": {
+          "title": "Supprimer des éléments HTML",
+          "description": [
+            "Notre téléphone n'a pas beaucoup d'espace vertical.",
+            "Enlevons les éléments superflus pour débuter la construction de notre application de photos de chats.",
+            "Supprimez l'élément <code>h1</code> afin de simplifier l'affichage."
+          ]
+        },
+        "pt-br": {
+          "title": "Apague Elementos HTML",
+          "description": [
+            "Nosso celular não possui muito espaço vertical.",
+            "Vamos eliminar os elementos desnecessários para começar a construir nosso CatPhotoApp.",
+            "Apague o elemento <code>h1</code> para simplificar o nosso espaço."
+          ]
+        },
+        "ru": {
+          "title": "Удалите HTML-элементы",
+          "description": [
+            "Наш телефон не очень большой по-вертикали.",
+            "Давайте удалим некоторые ненужные элементы, чтобы мы могли приступить к созданию приложения CatPhotoApp.",
+            "Удалите ваш <code>h1</code> элемент, чтобы упростить общий вид."
+          ]
+        }
+      }
+    },
+    {
+      "id": "bad87fee1348bd9aedf08816",
+      "title": "Link to External Pages with Anchor Elements",
+      "description": [
+        "<code>a</code> elements, also known as <code>anchor</code> elements, are used to link to content outside of the current page.",
+        "Here's a diagram of an <code>a</code> element. In this case, the <code>a</code> element is used in the middle of a paragraph element, which means the link will appear in the middle of a sentence.",
+        "<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
+        "Here's an example:",
+        "<code>&#60;p&#62;Here's a &#60;a href=\"http://freecodecamp.com\"&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>",
+        "Create an <code>a</code> element that links to <code>http://freecatphotoapp.com</code> and has \"cat photos\" as its <code>anchor text</code>."
+      ],
+      "challengeSeed": [
+        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
+        "<style>",
+        "  .red-text {",
+        "    color: red;",
+        "  }",
+        "",
+        "  h2 {",
+        "    font-family: Lobster, Monospace;",
+        "  }",
+        "",
+        "  p {",
+        "    font-size: 16px;",
+        "    font-family: Monospace;",
+        "  }",
+        "",
+        "  .thick-green-border {",
+        "    border-color: green;",
+        "    border-width: 10px;",
+        "    border-style: solid;",
+        "    border-radius: 50%;",
+        "  }",
+        "",
+        "  .smaller-image {",
+        "    width: 100px;",
+        "  }",
+        "</style>",
+        "",
+        "<h2 class=\"red-text\">CatPhotoApp</h2>",
+        "",
+        "<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
+        "",
+        "<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
+        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
+      ],
+      "tests": [
+        "assert((/cat photos/gi).test($(\"a\").text()), 'message: Your <code>a</code> element should have the <code>anchor text</code> of \"cat photos\".');",
+        "assert(/http:\\/\\/(www\\.)?freecatphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'message: You need an <code>a</code> element that links to <code>http&#58;//freecatphotoapp<wbr>.com</code>');",
+        "assert(code.match(/<\\/a>/g) && code.match(/<\\/a>/g).length === code.match(/<a/g).length, 'message: Make sure your <code>a</code> element has a closing tag.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "title": "Verlinke externe Seiten mit Anker Elementen",
+          "description": [
+            "<code>a</code> Elemente, auch bekannt als <code>anchor</code> (Anker) Elemente, werden verwendet um auf Inhalte außerhalb der aktuellen Seite zu verlinken.",
+            "So sieht ein <code>a</code> Element aus. In diesem Fall wird es innerhalb eines Paragraphen Elements verwendet. Das bedeutet dein Link wird innerhalb des Satzes erscheinen.",
+            "<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"Eine Darstellung wie man Anker Elemente geschrieben werden mit dem gleichen Text wie in der folgenden Zeile\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
+            "Hier ist ein Beispiel:",
+            "<code>&#60;p&#62;Hier ist ein &#60;a href=\"http://freecodecamp.com\"&#62; Link zu Free Code Camp&#60;/a&#62; dem du folgen kannst.&#60;/p&#62;</code>",
+            "Erstelle ein <code>a</code> Element, das auf <code>http://freecatphotoapp.com</code> verlinkt und den \"cat photos\" als <code>anchor text</code> (Link-Text) beinhaltet."
+          ]
+        },
+        "es": {
+          "title": "Enlaza páginas externas con elementos ancla",
+          "description": [
+            "Los elementos <code>a</code>, también conocidos como elementos <code>ancla</code>, se utilizan para enlazar a contenido fuera de la página actual.",
+            "Aquí está un diagrama de un elemento <code>a</code>. En este caso, el elemento <code>a</code> se utiliza en el medio de un elemento de párrafo, lo que significa que el enlace aparecerá en el medio de una frase. ",
+            "<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"> <img class=\"img-responsive\" title=\"Haz clic para ampliar\" alt=\"un diagrama de cómo las etiquetas de ancla se componen con el mismo texto, como en la siguiente línea\" src=\"//i.imgur.com/hviuZwe.png\"></a> ",
+            "He aquí un ejemplo:",
+            "<code>&#60;p&#62;Aquí está un &#60;a href=\"https://freecodecamp.com\"&#62; enlace a Free Code Camp&#60;/a&#62; para que lo sigas.&#60;/p&#62;</code>",
+            "Crea un elemento <code>a</code> que se vincule a <code>http://freecatphotoapp.com</code> y tenga como <code>texto de ancla</code> \"fotos de gatos\"."
+          ]
+        },
+        "pt-br": {
+          "title": "Ligue Páginas Externas com o Elemento Âncora",
+          "description": [
+            "Os elementos <code>a</code>, também conhecidos como elementos <code>âncora</code>, são utilizados para ligar conteúdo fora da página atual.",
+            "Aqui está um diagrama de um elemento <code>a</code>. Neste caso, o elemento <code>a</code> é utilizado no meio de um elemento de parágrafo, o que significa que o link externo aparecerá no meio de uma frase.",
+            "<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"> <img class=\"img-responsive\" title=\"Clique para ampliar\" alt=\"diagrama de como as tags de âncora se compõem com o texto, como na próxima linha\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
+            "Veja um exemplo:",
+            "<code>&#60;p&#62;Aqui está um &#60;a href=\"https://freecodecamp.com\"&#62; link ligado ao Free Code Camp&#60;/a&#62; para que você o siga.&#60;/p&#62;</code>",
+            "Crie um elemento <code>a</code> que esteja ligado ao site <code>http://freecatphotoapp.com</code> e tenha como <code>texto de âncora</code> \"fotos de gatos\"."
+          ]
+        },
+        "ru": {
+          "title": "Присоедините внешние страницы с помощью якорных элементов",
+          "description": [
+            "Элементы <code>a</code>, также известные как <code>якорные</code> элементы, применяют для связи с содержимым вне текущей страницы.",
+            "Вот диаграмма элемента <code>a</code>. В этом случае, элемент <code>a</code> использован в середине элемента параграфа, что значит, что ссылка появится в середине предложения.",
+            "<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
+            "Вот пример:",
+            "<code>&#60;p&#62;Вот &#60;a href=\"http://freecodecamp.com\"&#62; ссылка на Free Code Camp&#60;/a&#62; для перехода на ресурс.&#60;/p&#62;</code>",
+            "Создайте элемент <code>a</code>, который присоединяет <code>http://freecatphotoapp.com</code> и имеет значение \"cat photos\" в качестве <code>текста якоря</code>."
+          ]
+        }
+      }
+    },
+    {
+      "id": "bad88fee1348bd9aedf08816",
+      "title": "Link to Internal Sections of a Page with Anchor Elements",
+      "description": [
+        "In addition to creating external links, anchor elements can also be used to create internal links, which are links that jump to different sections within a webpage.",
+        "The format is similar to an external link except instead of a URL, you'll use the # and a word to describe the section you want to jump to.",
+        "Here's an example:",
+        "<code><a href=\"#contact\">Go to contact section</a></code>",
+        "Next, you'll want to create a corresponding anchor link in the HTML where you want the internal link to take users. Instead of using the href attribute, you'll use the name attribute, as below.",
+        "Here's an example:",
+        "<h1>Contact</h1>",
+        "<code><a name=\"contact\"></a></code>",
+        "Now when users click the \"Go to contact section\" link, they'll be taken to the section of the webpage with the anchor name attribute \"contact\".",
+        "Instructions",
+        "Change your external link to an internal link by changing the href attribute to \"#bottom\" and the anchor text from \"cat photos\" to \"Jump to Bottom\".",
+        "Then add an anchor link with a name attribute set to \"bottom\" after the last paragraph.",
+        "Note",
+        "Additional kitty ipsum text has been added to the paragraphs to better show the effect of clicking the internal anchor link to jump to the bottom of the page."
+      ],
+      "challengeSeed": [
+        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
+        "<style>",
+        "  .red-text {",
+        "    color: red;",
+        "  }",
+        "",
+        "  h2 {",
+        "    font-family: Lobster, Monospace;",
+        "  }",
+        "",
+        "  p {",
+        "    font-size: 16px;",
+        "    font-family: Monospace;",
+        "  }",
+        "",
+        "  .thick-green-border {",
+        "    border-color: green;",
+        "    border-width: 10px;",
+        "    border-style: solid;",
+        "    border-radius: 50%;",
+        "  }",
+        "",
+        "  .smaller-image {",
+        "    width: 100px;",
+        "  }",
+        "</style>",
+        "",
+        "<h2 class=\"red-text\">CatPhotoApp</h2>",
+        "",
+        "<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back. \">",
+        "",
+        "<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
+        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
+      ],
+      "tests": [
+        "assert($('a').length == 2, 'message: There should be only two anchor tags on your page.');",
+        "assert($('a').eq(0).attr('href') == \"#bottom\", 'message: The first <code>a</code> tag should have an <code>href</code> attribute set to #bottom.');",
+        "assert($('a').eq(1).attr('name') == \"bottom\", 'message: The second <code>a</code> tag should have a <code>name</code> attribute set to bottom.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "bad87fee1348bd9aede08817",
+      "title": "Nest an Anchor Element within a Paragraph",
+      "description": [
+        "Again, here's a diagram of an <code>a</code> element for your reference:",
+        "<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
+        "Here's an example:",
+        "<code>&#60;p&#62;Here's a &#60;a href=\"https://freecodecamp.com\"&#62; link to Free Code Camp&#60;/a&#62; for you to follow.&#60;/p&#62;</code>",
+        "<code>Nesting</code> just means putting one element inside of another element.",
+        "Now nest your existing <code>a</code> element within a new <code>p</code> element (just after the existing <code>h2</code> element) so that the surrounding paragraph says \"View more cat photos\", but where only \"cat photos\" is a link, and the rest of the text is plain text."
+      ],
+      "challengeSeed": [
+        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
+        "<style>",
+        "  .red-text {",
+        "    color: red;",
+        "  }",
+        "",
+        "  h2 {",
+        "    font-family: Lobster, Monospace;",
+        "  }",
+        "",
+        "  p {",
+        "    font-size: 16px;",
+        "    font-family: Monospace;",
+        "  }",
+        "",
+        "  .thick-green-border {",
+        "    border-color: green;",
+        "    border-width: 10px;",
+        "    border-style: solid;",
+        "    border-radius: 50%;",
+        "  }",
+        "",
+        "  .smaller-image {",
+        "    width: 100px;",
+        "  }",
+        "</style>",
+        "",
+        "<h2 class=\"red-text\">CatPhotoApp</h2>",
+        "",
+        "<a href=\"http://freecatphotoapp.com\">cat photos</a>",
+        "",
+        "<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
+        "",
+        "<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
+        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
+      ],
+      "tests": [
+        "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").length > 0 || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").length > 0), 'message: You need an <code>a</code> element that links to \"http://freecatphotoapp.com\".');",
+        "assert($(\"a\").text().match(/cat\\sphotos/gi), 'message: Your <code>a</code> element should have the anchor text of \"cat photos\"');",
+        "assert($(\"p\") && $(\"p\").length > 2, 'message: Create a new <code>p</code> element around your <code>a</code> element.');",
+        "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").parent().is(\"p\") || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().is(\"p\")), 'message: Your <code>a</code> element should be nested within your new <code>p</code> element.');",
+        "assert(($(\"a[href=\\\"http://freecatphotoapp.com\\\"]\").parent().text().match(/View\\smore\\s/gi) || $(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().text().match(/View\\smore\\s/gi)), 'message: Your <code>p</code> element should have the text \"View more \" (with a space after it).');",
+        "assert(!$(\"a\").text().match(/View\\smore/gi), 'message: Your <code>a</code> element should <em>not</em> have the text \"View more\".');",
+        "assert(code.match(/<\\/p>/g) && code.match(/<p/g) && code.match(/<\\/p>/g).length === code.match(/<p/g).length, 'message: Make sure each of your <code>p</code> elements has a closing tag.');",
+        "assert(code.match(/<\\/a>/g) && code.match(/<a/g) && code.match(/<\\/a>/g).length === code.match(/<a/g).length, 'message: Make sure each of your <code>a</code> elements has a closing tag.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "title": "Umschließe ein Anker Element mit einem Paragraphen",
+          "description": [
+            "Hier ist nochmal ein Beispiel für ein <code>a</code> Element:",
+            "<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Klick zum Vergrößern\" alt=\"Eine Darstellung wie Anker Elemente geschrieben werden mit dem gleichen Text wie in der folgenden Zeile\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
+            "Hier ist ein Beispiel:",
+            "<code>&#60;p&#62;Hier ist ein &#60;a href=\"https://freecodecamp.com\"&#62; Link zu Free Code Camp&#60;/a&#62; dem du folgen kannst.&#60;/p&#62;</code>",
+            "<code>Nesting</code> bedeuted ein Element innerhalb eines anderen Elements zu schreiben",
+            "Jetzt umschließe dein <code>a</code> Element mit einem neuen <code>p</code> Element (direkt nach dem bereits existierenden <code>h2</code> Element) indem steht \"View more cat photos\", wo allerdings nur \"cat photos\" ein Link ist und der Rest normaler Text."
+          ]
+        },
+        "es": {
+          "title": "Anida un elemento de ancla dentro de un párrafo",
+          "description": [
+            "Una vez más, aquí está un diagrama de un elemento <code>a</code> para tu referencia:",
+            "<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Pulse para ampliar\" alt=\"un diagrama de como se componen las etiquetas de anclaje con el texto como en la siguiente línea\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
+            "He aquí un ejemplo:",
+            "<code>&#60;p&#62;Aquí hay un &#60;a href=\"https://freecodecamp.com\"&#62; enlace a Free Code Camp&#60;/a&#62; para que lo sigas.&#60;/p&#62;</code>",
+            "<code>Anidamiento</code> simplemente significa poner un elemento dentro de otro elemento.",
+            "Ahora anida el elemento <code>a</code> existente dentro de un nuevo elemento <code>p</code> (justo después del elemento <code>h2</code> que ya tienes) de tal forma que el párrafo que lo rodee diga \"View more cat photos\", pero que sólo \"cat photos\" sea un enlace, y el resto sea texto plano ."
+          ]
+        },
+        "pt-br": {
+          "title": "Aninhe o Elemento Âncora no Interior de um Parágrafo",
+          "description": [
+            "Outra vez, aqui está um diagrama de um elemento <code>a</code> para você usar como referência.",
+            "<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Clique para ampliar\" alt=\"diagrama de como são as tags de âncora com o texto como na linha seguinte\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
+            "Veja um exemplo:",
+            "<code>&#60;p&#62;Este é um &#60;a href=\"https://freecodecamp.com\"&#62; link ligado ao Free Code Camp&#60;/a&#62; para que você o siga.&#60;/p&#62;</code>",
+            "<code>Aninhamento</code> significa ter um elemento no interior de outro elemento.",
+            "Agora, aninhe o elemento <code>a</code> existente dentro de um novo elemento <code>p</code> de forma que o parágrafo diga \"View more cat photos\", mas onde apenas \"cat photos\" seja um link, e o resto seja texto comum."
+          ]
+        },
+        "ru": {
+          "title": "Создайте вложенный якорный элемент внутри параграфа",
+          "description": [
+            "Вот диаграмма элемента <code>a</code>:",
+            "<a href=\"//i.imgur.com/hviuZwe.png\" data-lightbox=\"img-enlarge\"><img class=\"img-responsive\" title=\"Click to enlarge\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"//i.imgur.com/hviuZwe.png\"></a>",
+            "Вот пример:",
+            "<code>&#60;p&#62;Вот &#60;a href=\"https://freecodecamp.com\"&#62; ссылка на Free Code Camp&#60;/a&#62; для перехода на ресурс.&#60;/p&#62;</code>",
+            "<code>Вложенность</code> значит установку одного элемента внутрь друго элемента.",
+            "Теперь вложите ваш существующий элемент <code>a</code> внутрь нового элемента <code>p</code> (сразу после существующего элемента <code>h2</code>) таким образом, что добавляемый параграф сообщает: \"View more cat photos\", но где только \"cat photos\" является ссылкой, а остальной текст обычный."
+          ]
+        }
+      }
+    },
+    {
+      "id": "bad87fee1348bd9aedf08817",
+      "title": "Make Dead Links using the Hash Symbol",
+      "description": [
+        "Sometimes you want to add <code>a</code> elements to your website before you know where they will link.",
+        "This is also handy when you're changing the behavior of a link using <code>jQuery</code>, which we'll learn about later.",
+        "The current value of the <code>href</code> attribute is a link that points to \"http://freecatphotoapp.com\". Replace the <code>href</code> attribute value with a <code>#</code>, also known as a hash symbol, to create a dead link."
+      ],
+      "challengeSeed": [
+        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
+        "<style>",
+        "  .red-text {",
+        "    color: red;",
+        "  }",
+        "",
+        "  h2 {",
+        "    font-family: Lobster, Monospace;",
+        "  }",
+        "",
+        "  p {",
+        "    font-size: 16px;",
+        "    font-family: Monospace;",
+        "  }",
+        "",
+        "  .thick-green-border {",
+        "    border-color: green;",
+        "    border-width: 10px;",
+        "    border-style: solid;",
+        "    border-radius: 50%;",
+        "  }",
+        "",
+        "  .smaller-image {",
+        "    width: 100px;",
+        "  }",
+        "</style>",
+        "",
+        "<h2 class=\"red-text\">CatPhotoApp</h2>",
+        "",
+        "<p>Click here to view more <a href=\"http://freecatphotoapp.com\">cat photos</a>.</p>",
+        "",
+        "<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
+        "",
+        "<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
+        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
+      ],
+      "tests": [
+        "assert($(\"a\").attr(\"href\") === \"#\", 'message: Your <code>a</code> element should be a dead link with the value of the <code>href</code> attribute set to \"#\".');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "title": "Erstelle tote Links mit dem Hash Symbol",
+          "description": [
+            "Manchmal wirst du <code>a</code> Elemente zu deiner Website hinzufügen möchten, ohne dass du das Ziel des Links kennst.",
+            "Das ist auch nützlich, wenn du die Funktion eines Links mit <code>jQuery</code> verändern willst. Das werden wir später noch behandeln.",
+            "Ersetze den Inhalt des <code>href</code> Attributs deines <code>a</code> Elements mit einem <code>#</code>, auch bekannt als Hash Symbol, um einen toten Link zu erzeugen."
+          ]
+        },
+        "es": {
+          "title": "Haz vínculos muertos utilizando el símbolo de numero",
+          "description": [
+            "A veces quieres agregar elementos <code>a</code> a tu sitio web antes de saber qué enlazarán.",
+            "Esto también es útil cuando estás cambiando el comportamiento de un enlace usando <code>jQuery</code>, lo cual aprenderemos más adelante.",
+            "Reemplaza el atributo <code>href</code> de tu elemento <code>a</code> con un <code>#</code>, también conocido como un símbolo de número o de <em>hash</em>, para convertirlo en un vínculo muerto."
+          ]
+        },
+        "pt-br": {
+          "title": "Crie Links Inativos com o Símbolo Cerquilha",
+          "description": [
+            "As vezes você pode querer adicionar elementos <code>a</code> em sua página web antes de saber o link que as ligará.",
+            "Isso também é útil quando você desejar mudar o comportamento de um link utilizando <code>jQuery</code>, o que vamos aprender mais adiante.",
+            "Substitua o atributo <code>href</code> de seu elemento <code>a</code> por um <code>#</code>, também conhecido como símbolo de <em>hash</em> ou hashtag. Isso o transformará em um link inativo."
+          ]
+        },
+        "ru": {
+          "title": "Создайте мёртвые ссылки используя хэш-символ",
+          "description": [
+            "Иногда вам нужно добавить элементы <code>a</code> к вашему сайту до того, как вы знаете куда будут вести ссылки.",
+            "Также это может оказаться полезно, когда вы меняете поведение ссылки используя <code>jQuery</code>, что мы изучим позже.",
+            "Замените значение атрибута <code>href</code> вашего элемента <code>a</code> на <code>#</code>, известное как хэш-символ, для превращения элемента в мёртвую ссылку."
+          ]
+        }
+      }
+    },
+    {
+      "id": "bad87fee1348bd9aedf08820",
+      "title": "Turn an Image into a Link",
+      "description": [
+        "You can make elements into links by nesting them within an <code>a</code> element.",
+        "Nest your image within an <code>a</code> element. Here's an example:",
+        "<code>&#60;a href=\"#\"&#62;&#60;img src=\"https://bit.ly/fcc-running-cats\" alt=\"Three kittens running towards the camera.\"&#62;&#60;/a&#62;</code>",
+        "Remember to use <code>#</code> as your <code>a</code> element's <code>href</code> property in order to turn it into a dead link.",
+        "Place the existing image element within an anchor element.",
+        "Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link."
+      ],
+      "challengeSeed": [
+        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
+        "<style>",
+        "  .red-text {",
+        "    color: red;",
+        "  }",
+        "",
+        "  h2 {",
+        "    font-family: Lobster, Monospace;",
+        "  }",
+        "",
+        "  p {",
+        "    font-size: 16px;",
+        "    font-family: Monospace;",
+        "  }",
+        "",
+        "  .thick-green-border {",
+        "    border-color: green;",
+        "    border-width: 10px;",
+        "    border-style: solid;",
+        "    border-radius: 50%;",
+        "  }",
+        "",
+        "  .smaller-image {",
+        "    width: 100px;",
+        "  }",
+        "</style>",
+        "",
+        "<h2 class=\"red-text\">CatPhotoApp</h2>",
+        "",
+        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
+        "",
+        "<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\">",
+        "",
+        "<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
+        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
+      ],
+      "tests": [
+        "assert($(\"a\").children(\"img.smaller-image\").length > 0, 'message: Nest the existing <code>img</code> element within an <code>a</code> element.');",
+        "assert(new RegExp(\"#\").test($(\"a\").children(\"img\").parent().attr(\"href\")), 'message: Your <code>a</code> element should be a dead link with a <code>href</code> attribute set to <code>#</code>.');",
+        "assert(code.match(/<\\/a>/g) && code.match(/<a/g) && code.match(/<\\/a>/g).length === code.match(/<a/g).length, 'message: Make sure each of your <code>a</code> elements has a closing tag.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "title": "Verlinke ein Bild",
+          "description": [
+            "Du kannst jedes Element in einen Link verwandeln, indem du es mit einem <code>a</code> Element umschließt.",
+            "Umschließe dein Bild mit einem <code>a</code> Element. Hier ist ein Beispiel:",
+            "<code>&#60;a href=\"#\"&#62;&#60;img src=\"https://bit.ly/fcc-running-cats\"&#62;&#60;/a&#62;</code>",
+            "Vergewissere dich, dass du ein <code>#</code> innerhalb des <code>href</code> Attributs des <code>a</code> Elements nutzt, um daraus einen toten Link zu machen.",
+            "Sobald du das gemacht hast, kannst du mit der Maus über dein Bild fahren. Der normale Mauszeiger sollte nun zu einer Hand für Links werden. Das Bild ist jetzt ein Link."
+          ]
+        },
+        "es": {
+          "title": "Convierte una imagen en un vínculo",
+          "description": [
+            "Puedes convertir elementos en enlaces al anidarlos dentro de un elemento <code>a</code>.",
+            "Anida tu imagen dentro de un elemento <code>a</code>. He aquí un ejemplo: ",
+            "<code>&#60;a href=\"#\"&#62;&#60;img src=\"https://bit.ly/fcc-running-cats\"/&#62;&#60;/a&#62;</code>",
+            "Recuerda usar <code>#</code> como atributo <code>href</code> de tu elemento <code>a</code> con el fin de convertirlo en un vínculo muerto.",
+            "Una vez hayas hecho esto, coloca el cursor sobre tu imagen. El puntero normal de tu cursor debería convertirse en el puntero de enlace. La foto es ahora un vínculo ."
+          ]
+        },
+        "pt-br": {
+          "title": "Transforme uma Imagem em um Link",
+          "description": [
+            "Você pode transformar elementos em links ao aninhá-los com um elemento <code>a</code>.",
+            "Aninhe sua imagem dentro de um elemento <code>a</code>. Temos aqui um exemplo.",
+            "<code>&#60;a href=\"#\"&#62;&#60;img src=\"https://bit.ly/fcc-running-cats\"/&#62;&#60;/a&#62;</code>",
+            "Lembre de usar <code>#</code> como atributo <code>href</code> de seu elemento <code>a</code> para tornar o link inativo."
+          ]
+        },
+        "ru": {
+          "title": "Превратите изображение в ссылку",
+          "description": [
+            "Вы можете превратить элементы в ссылки путём их вложения внутрь элементов <code>a</code>.",
+            "Вложите ваше изображение в элемент <code>a</code>. Вот пример:",
+            "<code>&#60;a href=\"#\"&#62;&#60;img src=\"https://bit.ly/fcc-running-cats\"&#62;&#60;/a&#62;</code>",
+            "Не забывайте использовать <code>#</code> в качестве значения атрибута <code>href</code> вашего элемента <code>a</code> для превращения ссылки в мёртвую.",
+            "Как только вы это сделаете, наведите курсор мыши на ваше изображение. При этом курсор должен изменить вид с обычного на используемый при наведении на ссылки. Ваше фото теперь является ссылкой."
+          ]
+        }
+      }
+    },
+    {
+      "id": "bad87fee1348bd9aedf08827",
+      "title": "Create a Bulleted Unordered List",
+      "description": [
+        "HTML has a special element for creating <code>unordered lists</code>, or bullet point-style lists.",
+        "Unordered lists start with a <code>&#60;ul&#62;</code> element. Then they contain some number of <code>&#60;li&#62;</code> elements.",
+        "For example: ",
+        "<blockquote>&#60;ul&#62;<br>&nbsp;&nbsp;&#60;li&#62;milk&#60;/li&#62;<br>&nbsp;&nbsp;&#60;li&#62;cheese&#60;/li&#62;<br>&#60;/ul&#62;</blockquote>",
+        "would create a bullet point-style list of \"milk\" and \"cheese\".",
+        "Remove the last two <code>p</code> elements and create an unordered list of three things that cats love at the bottom of the page."
+      ],
+      "challengeSeed": [
+        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
+        "<style>",
+        "  .red-text {",
+        "    color: red;",
+        "  }",
+        "",
+        "  h2 {",
+        "    font-family: Lobster, Monospace;",
+        "  }",
+        "",
+        "  p {",
+        "    font-size: 16px;",
+        "    font-family: Monospace;",
+        "  }",
+        "",
+        "  .thick-green-border {",
+        "    border-color: green;",
+        "    border-width: 10px;",
+        "    border-style: solid;",
+        "    border-radius: 50%;",
+        "  }",
+        "",
+        "  .smaller-image {",
+        "    width: 100px;",
+        "  }",
+        "</style>",
+        "",
+        "<h2 class=\"red-text\">CatPhotoApp</h2>",
+        "",
+        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
+        "",
+        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\" alt=\"A cute orange cat lying on its back.\"></a>",
+        "",
+        "<p class=\"red-text\">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
+        "<p class=\"red-text\">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>"
+      ],
+      "tests": [
+        "assert($(\"ul\").length > 0, 'message: Create a <code>ul</code> element.');",
+        "assert($(\"ul li\").length > 2, 'message: You should have three <code>li</code> elements within your <code>ul</code> element.');",
+        "assert(code.match(/<\\/ul>/gi) && code.match(/<ul/gi) && code.match(/<\\/ul>/gi).length === code.match(/<ul/gi).length, 'message: Make sure your <code>ul</code> element has a closing tag.');",
+        "assert(code.match(/<\\/li>/gi) && code.match(/<li[\\s>]/gi) && code.match(/<\\/li>/gi).length === code.match(/<li[\\s>]/gi).length, 'message: Make sure your <code>li</code> elements have closing tags.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "title": "Erstelle eine ungeordnete Liste",
+          "description": [
+            "HTML hat ein spezielles Element zum Erstellen von <code>unordered lists</code> (ungeordneten Listen).",
+            "Ungeordnete Listen starten mit einem <code>&#60;ul&#62;</code> Element. Dann beinhalten sie eine gewisse Anzahl an <code>&#60;li&#62;</code> Elementen.",
+            "Zum Beispiel:",
+            "<blockquote>&#60;ul&#62;<br>&nbsp;&nbsp;&#60;li&#62;Milch&#60;/li&#62;<br>&nbsp;&nbsp;&#60;li&#62;Käse&#60;/li&#62;<br>&#60;/ul&#62;</blockquote>",
+            "würde eine ungeordnete Liste für \"Milch\" und \"Käse\" erstellen.",
+            "Entferne die letzten zwei <code>p</code> Elemente und erstelle eine ungeordnete Liste von drei Dingen die Katzen lieben am Ende der Seite"
+          ]
+        },
+        "es": {
+          "title": "Crea una lista no ordenada con viñetas",
+          "description": [
+            "HTML tiene un elemento especial para la creación de <code>listas no ordenadas</code>, o listas con estilo viñeta.",
+            "Las listas no ordenadas comienzan con un elemento <code>&#60;ul&#62;</code>. A continuación contienen una cantidad de elementos <code>&#60;li&#62;.</code>",
+            "Por ejemplo: ",
+            "<blockquote>&#60;ul&#62;<br>&nbsp;&nbsp;&#60;li&#62;leche&#60;/li&#62;<br>&nbsp;&nbsp;&#60;li&#62;queso&#60;/li&#62;<br>&#60;/ul&#62;</blockquote>",
+            "creará una lista con viñetas y con elementos \"leche\" y \"queso\".",
+            "Elimina los dos últimos elementos <code>p</code> y en la parte inferior de la página crea una lista no ordenada de tres cosas que los gatos aman."
+          ]
+        },
+        "pt-br": {
+          "title": "Crie uma Lista Não Ordenada com Marcadores",
+          "description": [
+            "O HTML possui um elemento especial para a criação de <code>listas não ordenadas</code>, ou listas com marcadores.",
+            "As listas não ordenadas iniciam com um elemento <code>&#60;ul&#62;</code>. Logo após, possuem uma série de elementos <code>&#60;li&#62;.</code>",
+            "Por exemplo:",
+            "<code>&#60;ul&#62;</code>",
+            "&nbsp;&nbsp;<code>&#60;li&#62;leite&#60;/li&#62;</code>",
+            "&nbsp;&nbsp;<code>&#60;li&#62;queijo&#60;/li&#62;</code>",
+            "<code>&#60;/ul&#62;</code>",
+            "Isso criará uma lista com marcadores que tem como elementos \"leite\" e \"queijo\".",
+            "Apague os dois últimos elementos <code>p</code> e no final da página crie uma lista não ordenada com três coisas que os gatos adoram."
+          ]
+        },
+        "ru": {
+          "title": "Создайте ненумерованный неупорядоченный список",
+          "description": [
+            "В HTML есть специальный элемент для создания <code>неупорядоченного списка</code>, или списка с точками в виде меток элементов.",
+            "Неупорядоченные списки начинаются с элемента <code>&#60;ul&#62;</code>. Затем они содержат некоторе количество элементов <code>&#60;li&#62;</code>.",
+            "Например: ",
+            "<blockquote>&#60;ul&#62;<br>&nbsp;&nbsp;&#60;li&#62;milk&#60;/li&#62;<br>&nbsp;&nbsp;&#60;li&#62;cheese&#60;/li&#62;<br>&#60;/ul&#62;</blockquote>",
+            "создаст ненумерованный список из \"milk\" и \"cheese\".",
+            "Удалите последние два элемента <code>p</code> и создайте неупорядоченный список из трёх вещей, которые любят кошки."
+          ]
+        }
+      }
+    },
+    {
+      "id": "bad87fee1348bd9aedf08828",
+      "title": "Create an Ordered List",
+      "description": [
+        "HTML has a special element for creating <code>ordered lists</code>, or numbered-style lists.",
+        "Ordered lists start with a <code>&#60;ol&#62;</code> element. Then they contain some number of <code>&#60;li&#62;</code> elements.",
+        "For example:",
+        "<blockquote>&#60;ol&#62;<br>&nbsp;&nbsp;&#60;li&#62;Garfield&#60;/li&#62;<br>&nbsp;&nbsp;&#60;li&#62;Sylvester&#60;/li&#62;<br>&#60;/ol&#62;</blockquote>",
+        "would create a numbered list of \"Garfield\" and \"Sylvester\".",
+        "Create an ordered list of the top 3 things cats hate the most."
+      ],
+      "challengeSeed": [
+        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
+        "<style>",
+        "  .red-text {",
+        "    color: red;",
+        "  }",
+        "",
+        "  h2 {",
+        "    font-family: Lobster, Monospace;",
+        "  }",
+        "",
+        "  p {",
+        "    font-size: 16px;",
+        "    font-family: Monospace;",
+        "  }",
+        "",
+        "  .thick-green-border {",
+        "    border-color: green;",
+        "    border-width: 10px;",
+        "    border-style: solid;",
+        "    border-radius: 50%;",
+        "  }",
+        "",
+        "  .smaller-image {",
+        "    width: 100px;",
+        "  }",
+        "</style>",
+        "",
+        "<h2 class=\"red-text\">CatPhotoApp</h2>",
+        "",
+        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
+        "",
+        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back.\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
+        "",
+        "<p>Things cats love:</p>",
+        "<ul>",
+        "  <li>cat nip</li>",
+        "  <li>laser pointers</li>",
+        "  <li>lasagna</li>",
+        "</ul>",
+        "<p>Top 3 things cats hate:</p>"
+      ],
+      "tests": [
+        "assert((/Top 3 things cats hate:/i).test($(\"ol\").prev().text()), 'message: You should have an ordered list for \"Top 3 things cats hate:\"');",
+        "assert((/Things cats love:/i).test($(\"ul\").prev().text()), 'message: You should have an unordered list for \"Things cats love:\"');",
+        "assert.equal($(\"ul li\").length, 3, 'message: You should have three <code>li</code> elements within your <code>ul</code> element.');",
+        "assert.equal($(\"ol li\").length, 3, 'message: You should have three <code>li</code> elements within your <code>ol</code> element.');",
+        "assert(code.match(/<\\/ul>/g) && code.match(/<\\/ul>/g).length === code.match(/<ul>/g).length, 'message: Make sure your <code>ul</code> element has a closing tag.');",
+        "assert(code.match(/<\\/ol>/g) && code.match(/<\\/ol>/g).length === code.match(/<ol>/g).length, 'message: Make sure your <code>ol</code> element has a closing tag.');",
+        "assert(code.match(/<\\/li>/g) && code.match(/<li>/g) && code.match(/<\\/li>/g).length === code.match(/<li>/g).length, 'message: Make sure your <code>li</code> element has a closing tag.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "title": "Erstelle eine geordnete Liste",
+          "description": [
+            "HTML beinhaltet ein spezielles Element für <code>ordered lists</code> (geordnete Listen).",
+            "Geordnete Listen starten mit einem <code>&#60;ol&#62;</code> Element. Dann enthalten sie eine gewisse Anzahl an <code>&#60;li&#62;</code> Elementen.",
+            "Zum Beispiel:",
+            "<blockquote>&#60;ol&#62;<br>&nbsp;&nbsp;&#60;li&#62;Garfield&#60;/li&#62;<br>&nbsp;&nbsp;&#60;li&#62;Sylvester&#60;/li&#62;<br>&#60;/ol&#62;</blockquote>",
+            "würde eine nummerierte Liste mit \"Garfield\" und \"Sylvester\" erstellen.",
+            "Erstelle eine geordnete Liste von den drei Dingen, die Katzen am meisten hassen."
+          ]
+        },
+        "es": {
+          "title": "Crear una lista ordenada",
+          "description": [
+            "HTML tiene un elemento especial para la creación de <code>listas ordenadas</code>, o listas de estilo numerado.",
+            "Las listas ordenadas comienzan con un elemento <code>&#60;ol&#62;</code>. Luego contienen un número de elementos <code>&#60;li&#62;.</code>",
+            "Por ejemplo:",
+            "<blockquote>&#60;ol&#62;<br>&nbsp;&nbsp;&#60;li&#62;Garfield&#60;/li&#62;<br>&nbsp;&nbsp;&#60;li&#62;Sylvester&#60;/li&#62;<br>&#60;/ol&#62;</blockquote>",
+            "creará una lista numerada con \"Garfield\" y \"Sylvester\".",
+            "Crea una lista ordenada de los 3 cosas que más odian los gatos."
+          ]
+        },
+        "pt-br": {
+          "title": "Crie uma Lista Ordenada",
+          "description": [
+            "O HTML possui um elemento especial para a criação de <code>listas ordenadas</code>, ou listas numeradas.",
+            "As listas ordenadas iniciam com um elemento <code>&#60;ol&#62;</code>. Logo após, contém uma série de elementos <code>&#60;li&#62;.</code>",
+            "Por exemplo:",
+            "<code>&#60;ol&#62;</code>",
+            "&nbsp;&nbsp;<code>&#60;li&#62;Garfield&#60;/li&#62;</code>",
+            "&nbsp;&nbsp;<code>&#60;li&#62;Sylvester&#60;/li&#62;</code>",
+            "<code>&#60;/ol&#62;</code>",
+            "Isso criará uma lista numerada com \"Garfield\" e \"Sylvester\".",
+            "Crie uma lista ordenada com as três coisas que os gatos mais odeiam."
+          ]
+        },
+        "ru": {
+          "title": "Создайте упорядоченный список",
+          "description": [
+            "В HTML есть специальный элемент для создания <code>упорядоченных списков</code>, или списков с номерами в качестве меток элементов.",
+            "Упорядоченные списки начинаются с элемента <code>&#60;ol&#62;</code>. Далее они содержат некоторое количество элементов <code>&#60;li&#62;</code>.",
+            "Например:",
+            "<blockquote>&#60;ol&#62;<br>&nbsp;&nbsp;&#60;li&#62;Garfield&#60;/li&#62;<br>&nbsp;&nbsp;&#60;li&#62;Sylvester&#60;/li&#62;<br>&#60;/ol&#62;</blockquote>",
+            "создаст нумерованный список из \"Garfield\" и \"Sylvester\".",
+            "Создайте нумерованный список из 3-х вещей, который кошки больше всего ненавидят."
+          ]
+        }
+      }
+    },
+    {
+      "id": "bad87fee1348bd9aedf08829",
+      "title": "Create a Text Field",
+      "description": [
+        "Now let's create a web form.",
+        "Text inputs are a convenient way to get input from your user.",
+        "You can create one like this:",
+        "<code>&#60;input type=\"text\"&#62;</code>",
+        "Note that <code>input</code> elements are self-closing.",
+        "Create an <code>input</code> element of type <code>text</code> below your lists."
+      ],
+      "challengeSeed": [
+        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
+        "<style>",
+        "  .red-text {",
+        "    color: red;",
+        "  }",
+        "",
+        "  h2 {",
+        "    font-family: Lobster, Monospace;",
+        "  }",
+        "",
+        "  p {",
+        "    font-size: 16px;",
+        "    font-family: Monospace;",
+        "  }",
+        "",
+        "  .thick-green-border {",
+        "    border-color: green;",
+        "    border-width: 10px;",
+        "    border-style: solid;",
+        "    border-radius: 50%;",
+        "  }",
+        "",
+        "  .smaller-image {",
+        "    width: 100px;",
+        "  }",
+        "</style>",
+        "",
+        "<h2 class=\"red-text\">CatPhotoApp</h2>",
+        "",
+        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
+        "",
+        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back.\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
+        "",
+        "<p>Things cats love:</p>",
+        "<ul>",
+        "  <li>cat nip</li>",
+        "  <li>laser pointers</li>",
+        "  <li>lasagna</li>",
+        "</ul>",
+        "<p>Top 3 things cats hate:</p>",
+        "<ol>",
+        "  <li>flea treatment</li>",
+        "  <li>thunder</li>",
+        "  <li>other cats</li>",
+        "</ol>"
+      ],
+      "tests": [
+        "assert($(\"input[type=text]\").length > 0, 'message: Your app should have an <code>input</code> element of type <code>text</code>.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "title": "Erstelle ein Textfeld",
+          "description": [
+            "Nun erstellen wir ein Web Formular.",
+            "Eingabefelder sind eine bewährte Möglichkeit um Daten von Usern zu erhalten.",
+            "So kannst du eines erstellen:",
+            "<code>&#60;input type=\"text\"&#62;</code>",
+            "Beachte, dass <code>input</code> Elemente selbstschließend sind.",
+            "Erstelle ein <code>input</code> Element des Typ (\"type\") <code>text</code> unter deinen Listen."
+          ]
+        },
+        "es": {
+          "title": "Crea un campo de texto",
+          "description": [
+            "Ahora vamos a crear un formulario web.",
+            "Los campos de texto son una manera conveniente de obtener retroalimentación de tu usuario.",
+            "Puedes crear uno como este:",
+            "<code>&#60;input type=\"text\"&#62;</code>",
+            "Ten en cuenta que los elementos <code>input</code> son de cierre automático.",
+            "Crea un elemento <code>input</code> de tipo <code>text</code> debajo de tus listas."
+          ]
+        },
+        "pt-br": {
+          "title": "Crie um Campo de Texto",
+          "description": [
+            "Agora vamos criar um formulário web.",
+            "Os campos de texto são uma forma conveniente de obter uma resposta do usuário.",
+            "Você pode criar um assim:",
+            "<code>&#60;input type=\"text\"&#62;</code>",
+            "Note que os elementos <code>input</code> são de fechamento automático.",
+            "Crie um elemento <code>input</code> de tipo <code>text</code> abaixo de suas listas."
+          ]
+        },
+        "ru": {
+          "title": "Создайте текстовое поле",
+          "description": [
+            "Теперь давайте создадим web-форму.",
+            "Поля текстового ввода - удобный способ получения данных от пользователя.",
+            "Вы можете создать текстовое поле следующим образом:",
+            "<code>&#60;input type=\"text\"&#62;</code>",
+            "Обратите внимание, что элементы <code>input</code> самозакрывающиеся.",
+            "Создайте элемент <code>input</code> типа <code>text</code> под вашими списками."
+          ]
+        }
+      }
+    },
+    {
+      "id": "bad87fee1348bd9aedf08830",
+      "title": "Add Placeholder Text to a Text Field",
+      "description": [
+        "Your placeholder text is what appears in your text <code>input</code> before your user has input anything.",
+        "You can create placeholder text like so:",
+        "<code>&#60;input type=\"text\" placeholder=\"this is placeholder text\"&#62;</code>",
+        "Set the <code>placeholder</code> value of your text <code>input</code> to \"cat photo URL\"."
+      ],
+      "challengeSeed": [
+        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
+        "<style>",
+        "  .red-text {",
+        "    color: red;",
+        "  }",
+        "",
+        "  h2 {",
+        "    font-family: Lobster, Monospace;",
+        "  }",
+        "",
+        "  p {",
+        "    font-size: 16px;",
+        "    font-family: Monospace;",
+        "  }",
+        "",
+        "  .thick-green-border {",
+        "    border-color: green;",
+        "    border-width: 10px;",
+        "    border-style: solid;",
+        "    border-radius: 50%;",
+        "  }",
+        "",
+        "  .smaller-image {",
+        "    width: 100px;",
+        "  }",
+        "</style>",
+        "",
+        "<h2 class=\"red-text\">CatPhotoApp</h2>",
+        "",
+        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
+        "",
+        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back.\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
+        "",
+        "<p>Things cats love:</p>",
+        "<ul>",
+        "  <li>cat nip</li>",
+        "  <li>laser pointers</li>",
+        "  <li>lasagna</li>",
+        "</ul>",
+        "<p>Top 3 things cats hate:</p>",
+        "<ol>",
+        "  <li>flea treatment</li>",
+        "  <li>thunder</li>",
+        "  <li>other cats</li>",
+        "</ol>",
+        "<input type=\"text\">"
+      ],
+      "tests": [
+        "assert($(\"input[placeholder]\").length > 0, 'message: Add a <code>placeholder</code> attribute to the existing text <code>input</code> element.');",
+        "assert($(\"input\") && $(\"input\").attr(\"placeholder\") && $(\"input\").attr(\"placeholder\").match(/cat\\s+photo\\s+URL/gi), 'message: Set the value of your placeholder attribute to \"cat photo URL\".');",
+        "assert($(\"input[type=text]\").length > 0 && code.match(/<input((\\s+\\w+(\\s*=\\s*(?:\".*?\"|'.*?'|[\\^'\">\\s]+))?)+\\s*|\\s*)\\/?>/gi), 'message: The finished <code>input</code> element should have valid syntax.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "title": "Füge Platzhalter zu einem Textfeld hinzu",
+          "description": [
+            "Platzhaltertexte erscheinen in deinen <code>input</code> Feldern, bevor der Nutzer etwas eingibt.",
+            "Du kannst Platzhalter auf folgende Weise erstellen:",
+            "<code>&#60;input type=\"text\" placeholder=\"Das ist ein Platzhalter.\"&#62;</code>",
+            "Setze bei deinem <code>input</code> Element den Wert für <code>placeholder</code> auf \"cat photo URL\"."
+          ]
+        },
+        "es": {
+          "title": "Agrega un texto de relleno a un campo de texto",
+          "description": [
+            "El texto de relleno es el que aparece en un campo de texto antes de que un usuario haya ingresado datos.",
+            "Puedes crear un texto de relleno de esta manera:",
+            "<code>&#60;input type=\"text\" placeholder=\"este es un texto de relleno\"&#62;</code>",
+            "Establece el valor del <code>texto de relleno</code> de tu campo de texto como \"cat photo URL\"."
+          ]
+        },
+        "pt-br": {
+          "title": "Adicione Texto Indicativo a um Campo de Texto",
+          "description": [
+            "O texto indicativo é o que aparece em um campo de texto antes que um usuário tenha escrito algo.",
+            "Você pode criar um texto indicativo assim:",
+            "<code>&#60;input type=\"text\" placeholder=\"isso é um texto indicativo\"&#62;</code>",
+            "Estabeleça o valor do <code>texto indicativo</code> do seu campo de texto como \"cat photo URL\"."
+          ]
+        },
+        "ru": {
+          "title": "Добавьте замещающий текст к текстовому полю",
+          "description": [
+            "Ваш замещающий текст - это то, что отображается в виде текста внутри <code>input</code> пока пользователь не ввёл туда что-либо.",
+            "Вы можете создать замещающий текст следующим образом:",
+            "<code>&#60;input type=\"text\" placeholder=\"это замещающий текст\"&#62;</code>",
+            "Установите значение атрибута <code>placeholder</code> вашего текстового поля <code>input</code> равными \"cat photo URL\"."
+          ]
+        }
+      }
+    },
+    {
+      "id": "bad87fee1348bd9aede08830",
+      "title": "Create a Form Element",
+      "description": [
+        "You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your <code>form</code> element.",
+        "For example:",
+        "<code>&#60;form action=\"/url-where-you-want-to-submit-form-data\"&#62;&#60;/form&#62;</code>",
+        "Nest your text field in a <code>form</code> element. Add the <code>action=\"/submit-cat-photo\"</code> attribute to this form element."
+      ],
+      "challengeSeed": [
+        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
+        "<style>",
+        "  .red-text {",
+        "    color: red;",
+        "  }",
+        "",
+        "  h2 {",
+        "    font-family: Lobster, Monospace;",
+        "  }",
+        "",
+        "  p {",
+        "    font-size: 16px;",
+        "    font-family: Monospace;",
+        "  }",
+        "",
+        "  .thick-green-border {",
+        "    border-color: green;",
+        "    border-width: 10px;",
+        "    border-style: solid;",
+        "    border-radius: 50%;",
+        "  }",
+        "",
+        "  .smaller-image {",
+        "    width: 100px;",
+        "  }",
+        "</style>",
+        "",
+        "<h2 class=\"red-text\">CatPhotoApp</h2>",
+        "",
+        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
+        "",
+        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back.\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
+        "",
+        "<p>Things cats love:</p>",
+        "<ul>",
+        "  <li>cat nip</li>",
+        "  <li>laser pointers</li>",
+        "  <li>lasagna</li>",
+        "</ul>",
+        "<p>Top 3 things cats hate:</p>",
+        "<ol>",
+        "  <li>flea treatment</li>",
+        "  <li>thunder</li>",
+        "  <li>other cats</li>",
+        "</ol>",
+        "<input type=\"text\" placeholder=\"cat photo URL\">"
+      ],
+      "tests": [
+        "assert($(\"form\") && $(\"form\").children(\"input\") && $(\"form\").children(\"input\").length > 0, 'message: Nest your text input element within a <code>form</code> element.');",
+        "assert($(\"form\").attr(\"action\") === \"/submit-cat-photo\", 'message: Make sure your <code>form</code> has an <code>action</code> attribute which is set to <code>/submit-cat-photo</code>');",
+        "assert(code.match(/<\\/form>/g) && code.match(/<form [^<]*>/g) && code.match(/<\\/form>/g).length === code.match(/<form [^<]*>/g).length, 'message: Make sure your <code>form</code> element has well-formed open and close tags.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "title": "Erstelle ein Formular",
+          "description": [
+            "Du kannst Web Formulare bauen, die Daten zu einem Server übertragen – und das nur mit HTML. Das wird möglich, indem du eine Aktion für dein <code>form</code> Element bestimmst.",
+            "Zum Beispiel:",
+            "<code>&#60;form action=\"/url-wohin-du-deine-formular-daten-senden-willst\"&#62;&#60;/form&#62;</code>",
+            "Umschließe dein Textfeld mit einem <code>form</code> Element. Füge anschließend das Attribut <code>action=\"/submit-cat-photo\"</code> hinzu."
+          ]
+        },
+        "es": {
+          "title": "Crea un elemento de formulario",
+          "description": [
+            "Puedes construir formularios web que realmente envíen datos a un servidor usando nada más que HTML puro. Puedes hacerlo especificando una acción en tu elemento <code>form</code>.",
+            "Por ejemplo:",
+            "<code>&#60;form action=\"/url-al-que-quieres-enviar-los-datos-del-formulario\"&#62;&#60;/form&#62;</code>",
+            "Anida tu campo de texto en un elemento <code>form</code>. Agrega el atributo <code>action=\"/submit-cat-photo\"</code> a este elemento de formulario."
+          ]
+        },
+        "pt-br": {
+          "title": "Crie um Elemento de Formulário",
+          "description": [
+            "É possível construir formulários web que realmente enviem dados a um servidor utilizando nada além de HTML puro. Você pode fazer isso especificando uma ação em seu elemento <code>form</code>.",
+            "Por exemplo:",
+            "<code>&#60;form action=\"/url-para-onde-você-quer-enviar-os-dados-do-formulário\"&#62;&#60;/form&#62;</code>",
+            "Aninhe seu campo de texto em um elemento <code>form</code>. Adicione o atributo <code>action=\"/submit-cat-photo\"</code> para este elemento de formulário."
+          ]
+        },
+        "ru": {
+          "title": "Создайте элемент типа форма",
+          "description": [
+            "Вы можете строить web-формы, которые отправляют данные серверу, не ипользуя ничего кроме HTML. Вы можете достичь этого указанием действия в атрибутах элемента <code>form</code>.",
+            "Например:",
+            "<code>&#60;form action=\"/url-куда-вы-хотите-отправить-данные-формы\"&#62;&#60;/form&#62;</code>",
+            "Вложите ваше текстовое поле в элемент <code>form</code>. Добавьте атрибут <code>action=\"/submit-cat-photo\"</code> к этому элементу формы."
+          ]
+        }
+      }
+    },
+    {
+      "id": "bad87fee1348bd9aedd08830",
+      "title": "Add a Submit Button to a Form",
+      "description": [
+        "Let's add a <code>submit</code> button to your form. Clicking this button will send the data from your form to the URL you specified with your form's <code>action</code> attribute.",
+        "Here's an example submit button:",
+        "<code>&#60;button type=\"submit\"&#62;this button submits the form&#60;/button&#62;</code>",
+        "Add a submit button to your <code>form</code> element with type <code>submit</code> and \"Submit\" as its text."
+      ],
+      "challengeSeed": [
+        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
+        "<style>",
+        "  .red-text {",
+        "    color: red;",
+        "  }",
+        "",
+        "  h2 {",
+        "    font-family: Lobster, Monospace;",
+        "  }",
+        "",
+        "  p {",
+        "    font-size: 16px;",
+        "    font-family: Monospace;",
+        "  }",
+        "",
+        "  .thick-green-border {",
+        "    border-color: green;",
+        "    border-width: 10px;",
+        "    border-style: solid;",
+        "    border-radius: 50%;",
+        "  }",
+        "",
+        "  .smaller-image {",
+        "    width: 100px;",
+        "  }",
+        "</style>",
+        "",
+        "<h2 class=\"red-text\">CatPhotoApp</h2>",
+        "",
+        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
+        "",
+        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back.\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
+        "",
+        "<p>Things cats love:</p>",
+        "<ul>",
+        "  <li>cat nip</li>",
+        "  <li>laser pointers</li>",
+        "  <li>lasagna</li>",
+        "</ul>",
+        "<p>Top 3 things cats hate:</p>",
+        "<ol>",
+        "  <li>flea treatment</li>",
+        "  <li>thunder</li>",
+        "  <li>other cats</li>",
+        "</ol>",
+        "<form action=\"/submit-cat-photo\">",
+        "  <input type=\"text\" placeholder=\"cat photo URL\">",
+        "</form>"
+      ],
+      "tests": [
+        "assert($(\"form\").children(\"button\").length > 0, 'message: Your form should have a button inside it.');",
+        "assert($(\"button\").attr(\"type\") === \"submit\", 'message: Your submit button should have the attribute <code>type</code> set to <code>submit</code>.');",
+        "assert($(\"button\").text().match(/^\\s*submit\\s*$/gi), 'message: Your submit button should only have the text \"Submit\".');",
+        "assert(code.match(/<\\/button>/g) && code.match(/<button/g) && code.match(/<\\/button>/g).length === code.match(/<button/g).length, 'message: Make sure your <code>button</code> element has a closing tag.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "title": "Füge eine Button zum Senden hinzu",
+          "description": [
+            "Lass uns nun einen <code>submit</code> Button hinzufügen. Durch einen Klick auf diesen Button werden die Daten des Formulars an die URL gesendet, welche du in dem <code>action</code> Attribut deines Formulars angegeben hast.",
+            "Hier ist ein Beispiel einen solchen Button:",
+            "<code>&#60;button type=\"submit\"&#62;Dieser Button überträgt die Daten des Formulars.&#60;/button&#62;</code>",
+            "Füge einen Button zum Senden mit dem Typ <code>submit</code> und \"Submit\" als Text zu deinem <code>form</code> Element hinzu."
+          ]
+        },
+        "es": {
+          "title": "Agrega un botón Enviar a un formulario",
+          "description": [
+            "Añadamos un elemento <code>submit</code> a tu formulario. Al hacer clic en este botón enviará los datos del formulario a la URL especificada en el atributo <code>action</code> de tu formulario. ",
+            "He aquí un ejemplo de un botón de envío:",
+            "<code>&#60;button type=\" submit\"&#62;este botón envía el formulario&#60;/botón&#62;</code>",
+            "Agrega un botón de enviar a tu elemento <code>form</code> con el tipo <code>submit</code> y con el texto \"Submit\"."
+          ]
+        },
+        "pt-br": {
+          "title": "Inclua um Botão de Enviar a um Formulário",
+          "description": [
+            "Vamos inserir um elemento <code>submit</code> ao seu formulário. Ao clicar neste botão, os dados inseridos serão enviados para a URL especificada no atributo <code>action</code> do formulário.",
+            "Aqui está um exemplo de um botão de enviar:",
+            "<code>&#60;button type=\" submit\"&#62;este botão enviará o formulário&#60;/button&#62;</code>",
+            "Adicione um botão de enviar ao seu elemento <code>form</code> com o tipo <code>submit</code> e com o texto \"Submit\"."
+          ]
+        },
+        "ru": {
+          "title": "Добавьте кнопку отправки к форме",
+          "description": [
+            "Давайте добавим кнопку отправки <code>submit</code> к вашей форме. Нажатие на эту кнопку отправит данные из вашей формы по адресу, указанному в атрибуте <code>action</code> вашей формы.",
+            "Вот пример кнопки отправки:",
+            "<code>&#60;button type=\"submit\"&#62;эта кнопка отправляет данные формы&#60;/button&#62;</code>",
+            "Добавьте кнопку отправки к вашему элементу <code>form</code> с указанием типа <code>submit</code> и \"Submit\" в качестве отображаемого текста."
+          ]
+        }
+      }
+    },
+    {
+      "id": "bad87fee1348bd9aedc08830",
+      "title": "Use HTML5 to Require a Field",
+      "description": [
+        "You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.",
+        "For example, if you wanted to make a text input field required, you can just add the word <code>required</code> within your <code>input</code> element, like this: <code>&#60;input type=\"text\" required&#62;</code>",
+        "Make your text <code>input</code> a <code>required</code> field, so that your user can't submit the form without completing this field.",
+        "Then try to submit the form without inputing any text. See how your HTML5 form notifies you that the field is required?",
+        "Note: This field does not work in Safari."
+      ],
+      "challengeSeed": [
+        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
+        "<style>",
+        "  .red-text {",
+        "    color: red;",
+        "  }",
+        "",
+        "  h2 {",
+        "    font-family: Lobster, Monospace;",
+        "  }",
+        "",
+        "  p {",
+        "    font-size: 16px;",
+        "    font-family: Monospace;",
+        "  }",
+        "",
+        "  .thick-green-border {",
+        "    border-color: green;",
+        "    border-width: 10px;",
+        "    border-style: solid;",
+        "    border-radius: 50%;",
+        "  }",
+        "",
+        "  .smaller-image {",
+        "    width: 100px;",
+        "  }",
+        "</style>",
+        "",
+        "<h2 class=\"red-text\">CatPhotoApp</h2>",
+        "",
+        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
+        "",
+        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back.\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
+        "",
+        "<p>Things cats love:</p>",
+        "<ul>",
+        "  <li>cat nip</li>",
+        "  <li>laser pointers</li>",
+        "  <li>lasagna</li>",
+        "</ul>",
+        "<p>Top 3 things cats hate:</p>",
+        "<ol>",
+        "  <li>flea treatment</li>",
+        "  <li>thunder</li>",
+        "  <li>other cats</li>",
+        "</ol>",
+        "<form action=\"/submit-cat-photo\">",
+        "  <input type=\"text\" placeholder=\"cat photo URL\">",
+        "  <button type=\"submit\">Submit</button>",
+        "</form>"
+      ],
+      "tests": [
+        "assert($(\"input\").prop(\"required\"), 'message: Your text <code>input</code> element should have the <code>required</code> attribute.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "title": "Nutze HTML5 um ein Pflichtfeld zu erstellen",
+          "description": [
+            "Du kannst bestimmte Felder eines Formulars zu Pflichtfeldern erklären. Damit ist es deinen Usern nicht mehr möglich, das Formular abzuschicken, ohne die Pflichtfelder auszufüllen.",
+            "Um zum Beispiel ein Textfeld zum Pflichtfeld zu erklären, kannst du einfach ein <code>required</code> innerhalb deines <code>input</code> Elements hinzufügen: <code>&#60;input type=\"text\" required&#62;</code>",
+            "Mache aus deinem <code>input</code> Feld ein Pflichtfeld – \"required\" – damit deine Nutzer das Formular nicht abschicken können, ohne dieses Feld auszufüllen.",
+            "Probier dann dein Formular ohne einen Text abzuschicken. Siehst du wie dein HTML5 Formular dich darauf hinweißt dass das Feld verpflichtend ist?",
+            "Beachte: dieses Feld funktioniert nicht in Safari."
+          ]
+        },
+        "es": {
+          "title": "Utiliza HTML5 para especificar campos obligatorios",
+          "description": [
+            "Puedes especificar un campo obligatorio en un formulario para que tu usuario no pueda enviar el formulario hasta que lo haya llenado.",
+            "Por ejemplo, si quieres requerir obligatoriamente un campo de texto, puedes agregar la palabra <code>required</code> dentro de tu elemento <code>input</code>, usarías: <code>&#60;input type=\"text\" required&#62;</code> ",
+            "Haz de tu campo de texto un campo obligatorio, de manera que tu usuario no pueda enviar el formulario sin completar este campo.",
+            "Luego, intenta enviar el formulario sin ingresar texto alguno. ¿Ves cómo tu formulario HTML5 te notifica que el campo es obligatorio?",
+            "Nota: Este campo no funciona en Safari."
+          ]
+        },
+        "pt-br": {
+          "title": "Use HTML5 para Especificar Campos Obrigatórios",
+          "description": [
+            "Você pode especificar um campo como obrigatório para que seu usuário não consiga enviar o formulário até que o tenha completado.",
+            "Por exemplo, se você quiser tornar obrigatório um campo de texto, basta adicionar a palavra <code>required</code> dentro de seu elemento <code>input</code> assim: <code>&#60;input type=\"text\" required&#62;</code>",
+            "Faça com que seu campo de texto seja obrigatório, de forma que o usuário não possa enviar o formulário sem ter completado esse campo.",
+            "Após isso, tente enviar o formulário sem digitar nenhum texto no campo. Percebe como seu formulário HTML5 mostra que o campo é obrigatório?"
+          ]
+        },
+        "ru": {
+          "title": "Используйте HTML5, чтобы сделать заполнение поля обязательным",
+          "description": [
+            "Вы можете требовать заполнения определённых полей формы, таким образом пользователь не сможет отправить данные формы до их заполнения.",
+            "Например, если бы вы хотели сделать заполнение текстового поля обязательным, вы могли бы добавить слово <code>required</code> внутрь вашего элемента <code>input</code>: <code>&#60;input type=\"text\" required&#62;</code>",
+            "Сделайте ваше текстовое поле <code>input</code> обязательным <code>required</code> для заполнения, чтобы пользователь не мог отправить данные формы без заполнения этого поля.",
+            "Далее попробуйте отправить данные формы без ввода какого-либо текста. Видите как ваша HTML5-форма уведомляет вас о том, что поле обязательное для заполнения?",
+            "Внимание: это поле не работает в Safari."
+          ]
+        }
+      }
+    },
+    {
+      "id": "bad87fee1348bd9aedf08834",
+      "title": "Create a Set of Radio Buttons",
+      "description": [
+        "You can use <code>radio buttons</code> for questions where you want the user to only give you one answer.",
+        "Radio buttons are a type of <code>input</code>",
+        "Each of your radio buttons should be nested within its own <code>label</code> element.",
+        "All related radio buttons should have the same <code>name</code> attribute.",
+        "Here's an example of a radio button:",
+        "<code>&#60;label&#62;&#60;input type=\"radio\" name=\"indoor-outdoor\"&#62; Indoor&#60;/label&#62;</code>",
+        "Add a pair of radio buttons to your form. One should have the option of <code>indoor</code> and the other should have the option of <code>outdoor</code>."
+      ],
+      "challengeSeed": [
+        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
+        "<style>",
+        "  .red-text {",
+        "    color: red;",
+        "  }",
+        "",
+        "  h2 {",
+        "    font-family: Lobster, Monospace;",
+        "  }",
+        "",
+        "  p {",
+        "    font-size: 16px;",
+        "    font-family: Monospace;",
+        "  }",
+        "",
+        "  .thick-green-border {",
+        "    border-color: green;",
+        "    border-width: 10px;",
+        "    border-style: solid;",
+        "    border-radius: 50%;",
+        "  }",
+        "",
+        "  .smaller-image {",
+        "    width: 100px;",
+        "  }",
+        "</style>",
+        "",
+        "<h2 class=\"red-text\">CatPhotoApp</h2>",
+        "",
+        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
+        "",
+        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back.\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
+        "",
+        "<p>Things cats love:</p>",
+        "<ul>",
+        "  <li>cat nip</li>",
+        "  <li>laser pointers</li>",
+        "  <li>lasagna</li>",
+        "</ul>",
+        "<p>Top 3 things cats hate:</p>",
+        "<ol>",
+        "  <li>flea treatment</li>",
+        "  <li>thunder</li>",
+        "  <li>other cats</li>",
+        "</ol>",
+        "<form action=\"/submit-cat-photo\">",
+        "  <input type=\"text\" placeholder=\"cat photo URL\" required>",
+        "  <button type=\"submit\">Submit</button>",
+        "</form>"
+      ],
+      "tests": [
+        "assert($('input[type=\"radio\"]').length > 1, 'message: Your page should have two radio button elements.');",
+        "assert($('label > input[type=\"radio\"]').filter(\"[name='indoor-outdoor']\").length > 1, 'message: Give your radio buttons the <code>name</code> attribute of <code>indoor-outdoor</code>.');",
+        "assert($('label > input[type=\"radio\"]:only-child').length > 1, 'message: Each of your two radio button elements should be nested in its own <code>label</code> element.');",
+        "assert((code.match(/<\\/label>/g) && code.match(/<label/g) && code.match(/<\\/label>/g).length === code.match(/<label/g).length), 'message: Make sure each of your <code>label</code> elements has a closing tag.');",
+        "assert($(\"label\").text().match(/indoor/gi), 'message: One of your radio buttons should have the label <code>indoor</code>.');",
+        "assert($(\"label\").text().match(/outdoor/gi), 'message: One of your radio buttons should have the label <code>outdoor</code>.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "title": "Erstelle ein Set von Radiobuttons",
+          "description": [
+            "Du kannst Optionsfelder, <code>radio buttons</code>, für Fragen verwenden, auf die der Nutzer nur eine Antwort geben soll.",
+            "Radiobuttons sind lediglich ein weiterer Typ von <code>input</code> Elementen.",
+            "Jeder deiner Radiobuttons sollte innerhalb eines eigenen <code>label</code> Elements liegen.",
+            "Alle Radiobuttons mit Bezug zueinander sollten das gleiche <code>name</code> Attribut teilen.",
+            "Ein Beispiel eines Radiobuttons:",
+            "<code>&#60;label&#62;&#60;input type=\"radio\" name=\"indoor-outdoor\"&#62; Indoor&#60;/label&#62;</code>",
+            "Füge ein Paar Radiobuttons zu deinem Formular hinzu. Einer sollte die Option <code>indoor</code> und der andere die Option <code>outdoor</code> haben."
+          ]
+        },
+        "es": {
+          "title": "Crea un Conjunto de botones de radio",
+          "description": [
+            "Puedes usar <code>botones de radio</code> para las preguntas en las que deseas que el usuario sólo pueda dar una respuesta.",
+            "Los botones de radio son un tipo del elemento <code>input</code>",
+            "Cada uno de los botones de radio debe estar anidado dentro de su propio elemento <code>label</code>.",
+            "Todos los botones de radio relacionados deben tener el mismo atributo <code>name</code>.",
+            "He aquí un ejemplo de un botón de radio:",
+            "<code>&#60;label&#62;&#60;input type=\"radio\" name=\"dentro-fuera\"&#62; Dentro&#60;/label&#62;</code>",
+            "Agrega un par de botones de radio a tu formulario. Uno debe tener la opción de <code>indoor</code> y el otro debe tener la opción <code>outdoor</code>. "
+          ]
+        },
+        "pt-br": {
+          "title": "Crie um Conjunto de Botões de Seleção",
+          "description": [
+            "É possível utilizar botões de seleção (botões de rádio) para perguntas nas quais o usuário deverá selecionar apenas uma resposta, dentre várias possíveis.",
+            "Os botões de seleção são um tipo de elemento <code>input</code>",
+            "Cada um dos botões de seleção deve estar contido dentro de seu próprio elemento <code>label</code>.",
+            "Todos os botões de seleção relacionados devem ter o mesmo atributo <code>name</code>.",
+            "Temos aqui um exemplo de um botão de seleção/rádio:",
+            "<code>&#60;label&#62;&#60;input type=\"radio\" name=\"indoor-outdoor\"&#62; Indoor&#60;/label&#62;</code>",
+            "Adicione um par de botões de seleção ao seu formulário. Um deles deve ter a opção <code>indoor</code> enquanto o outro deve ter a opção <code>outdoor</code>."
+          ]
+        },
+        "ru": {
+          "title": "Создайте набор радио-кнопок",
+          "description": [
+            "Вы можете использовать <code>радио кнопки</code> для вопросов, которые требуют выбора одного варианта ответа из множества.",
+            "Радио-кнопки относятся к типу <code>input</code>",
+            "Каждая из ваших радио-кнопок должна быть вложена внутрь своего собственного элемента <code>label</code>.",
+            "Все относящиеся друг к другу, формирующие группу, радио-кнопки должны иметь один и тот же атрибут <code>name</code>.",
+            "Вот пример радио-кнопки:",
+            "<code>&#60;label&#62;&#60;input type=\"radio\" name=\"indoor-outdoor\"&#62; Indoor&#60;/label&#62;</code>",
+            "Добавьте пару радио-кнопок к вашей форме. Одна должна соответствовать варианту <code>indoor</code>, а другая - <code>outdoor</code>."
+          ]
+        }
+      }
+    },
+    {
+      "id": "bad87fee1348bd9aedf08835",
+      "title": "Create a Set of Checkboxes",
+      "description": [
+        "Forms commonly use <code>checkboxes</code> for questions that may have more than one answer.",
+        "Checkboxes are a type of <code>input</code>",
+        "Each of your checkboxes should be nested within its own <code>label</code> element.",
+        "All related checkbox inputs should have the same <code>name</code> attribute.",
+        "Here's an example of a checkbox:",
+        "<code>&#60;label&#62;&#60;input type=\"checkbox\" name=\"personality\"&#62; Loving&#60;/label&#62;</code>",
+        "Add to your form a set of three checkboxes. Each checkbox should be nested within its own <code>label</code> element. All three should share the <code>name</code> attribute of <code>personality</code>."
+      ],
+      "challengeSeed": [
+        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
+        "<style>",
+        "  .red-text {",
+        "    color: red;",
+        "  }",
+        "",
+        "  h2 {",
+        "    font-family: Lobster, Monospace;",
+        "  }",
+        "",
+        "  p {",
+        "    font-size: 16px;",
+        "    font-family: Monospace;",
+        "  }",
+        "",
+        "  .thick-green-border {",
+        "    border-color: green;",
+        "    border-width: 10px;",
+        "    border-style: solid;",
+        "    border-radius: 50%;",
+        "  }",
+        "",
+        "  .smaller-image {",
+        "    width: 100px;",
+        "  }",
+        "</style>",
+        "",
+        "<h2 class=\"red-text\">CatPhotoApp</h2>",
+        "",
+        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
+        "",
+        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back.\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
+        "",
+        "<p>Things cats love:</p>",
+        "<ul>",
+        "  <li>cat nip</li>",
+        "  <li>laser pointers</li>",
+        "  <li>lasagna</li>",
+        "</ul>",
+        "<p>Top 3 things cats hate:</p>",
+        "<ol>",
+        "  <li>flea treatment</li>",
+        "  <li>thunder</li>",
+        "  <li>other cats</li>",
+        "</ol>",
+        "<form action=\"/submit-cat-photo\">",
+        "  <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
+        "  <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
+        "  <input type=\"text\" placeholder=\"cat photo URL\" required>",
+        "  <button type=\"submit\">Submit</button>",
+        "</form>"
+      ],
+      "tests": [
+        "assert($('input[type=\"checkbox\"]').length > 2, 'message: Your page should have three checkbox elements.');",
+        "assert($('label > input[type=\"checkbox\"]:only-child').length > 2, 'message: Each of your three checkbox elements should be nested in its own <code>label</code> element.');",
+        "assert(code.match(/<\\/label>/g) && code.match(/<label/g) && code.match(/<\\/label>/g).length === code.match(/<label/g).length, 'message: Make sure each of your <code>label</code> elements has a closing tag.');",
+        "assert($('label > input[type=\"checkbox\"]').filter(\"[name='personality']\").length > 2, 'message: Give your checkboxes the <code>name</code> attribute of <code>personality</code>.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "title": "Erstelle ein paar Checkboxen",
+          "description": [
+            "Formulare nutzen Kontrollkästchen, <code>checkboxes</code> meistens für Fragen, die mehrerer Antworten bedürfen.",
+            "Checkboxen sind eine Art von <code>input</code> Elementen",
+            "Jedes deiner Checkboxen sollte innerhalb eines eigenen <code>label</code> Elements liegen.",
+            "Alle zusammengehörende Checkboxes sollten das gleiche <code>name</code> Attribut haben.",
+            "Hier ist ein Beispiel für eine Checkbox:",
+            "<code>&#60;label&#62;&#60;input type=\"checkbox\" name=\"personality\"&#62; Loving&#60;/label&#62;</code>",
+            "Füge deinem Formular drei Checkboxen hinzu. Jedes dieser Elemente sollte innerhalb seines eigenen <code>label</code> Elements liegen. Alle sollten das gleiche <code>name</code> Attribut <code>personality</code> teilen."
+          ]
+        },
+        "es": {
+          "title": "Crea un conjunto de casillas de verificación",
+          "description": [
+            "Los formularios suelen usar <code>casillas de verificación</code> para preguntas que pueden tener más de una respuesta.",
+            "Las casillas de verificación son un tipo del elemento <code>input</code>",
+            "Cada una de tus casillas de verificación debe ser anidada dentro de su propio elemento <code>label</code>.",
+            "Todas las entradas de casillas de verificación relacionadas deben tener el mismo atributo <code>name</code>.",
+            "He aquí un ejemplo de una casilla de verificación:",
+            "<code>&#60;label&#62;&#60;input type=\"checkbox\" name=\"personalidad\"&#62; Cariñoso&#60;/label&#62;</code>",
+            "Añade a tu formulario un conjunto de tres casillas de verificación. Cada casilla de verificación debe estar anidada dentro de su propio elemento <code>label</code>. Las tres deben tener <code>personality</code> como su atributo <code>name</code>."
+          ]
+        },
+        "pt-br": {
+          "title": "Crie um Conjunto de Caixas de Seleção",
+          "description": [
+            "Os formulários costumam utilizar caixas de seleção para perguntas que podem ter mais de uma resposta.",
+            "As caixas de seleção são um tipo de elemento <code>input</code>",
+            "Cada uma de suas caixas de seleção deve ser aninhada dentro do próprio elemento <code>label</code>.",
+            "Todas as caixas de seleção relacionadas devem ter o mesmo atributo <code>name</code>.",
+            "Veja aqui um exemplo de uma caixa de verificação:",
+            "<code>&#60;label&#62;&#60;input type=\"checkbox\" name=\"personality\"&#62; Carinhoso&#60;/label&#62;</code>",
+            "Adicione ao seu formulário um conjunto de três caixas de verificação. Cada uma delas deve estar aninhada dentro de seu próprio elemento <code>label</code>. As três devem compartilhar o atributo <code>name</code>."
+          ]
+        },
+        "ru": {
+          "title": "Создайте набор флаговых кнопок",
+          "description": [
+            "Обычно формы используют <code>флаги (флаговые кнопки)</code> для вопросов, к которым может относиться несколько вариантов ответов.",
+            "Флаги относятся к типу <code>input</code>",
+            "Каждый из ваших флагов должен быть вложен в собственный элемент <code>label</code>.",
+            "Все относящиеся друг к другу флаги должны иметь одинаковый атрибут <code>name</code>.",
+            "Вот пример флаговой кнопки:",
+            "<code>&#60;label&#62;&#60;input type=\"checkbox\" name=\"personality\"&#62; Loving&#60;/label&#62;</code>",
+            "Добавьте набор из трёх флаговых кнопок к вашей форме. Каждый флаг должен быть вложен внутрь собственного элемента <code>label</code>. Все три флага должны иметь одинаковый атрибут <code>name</code>, значение которго равно <code>personality</code>."
+          ]
+        }
+      }
+    },
+    {
+      "id": "bad87fee1348bd9aedd08835",
+      "title": "Check Radio Buttons and Checkboxes by Default",
+      "description": [
+        "You can set a checkbox or radio button to be checked by default using the <code>checked</code> attribute.",
+        "To do this, just add the word \"checked\" to the inside of an input element. For example:",
+        "<code>&#60;input type=\"radio\" name=\"test-name\" checked&#62;</code>",
+        "Set the first of your <code>radio buttons</code> and the first of your <code>checkboxes</code> to both be checked by default."
+      ],
+      "challengeSeed": [
+        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
+        "<style>",
+        "  .red-text {",
+        "    color: red;",
+        "  }",
+        "",
+        "  h2 {",
+        "    font-family: Lobster, Monospace;",
+        "  }",
+        "",
+        "  p {",
+        "    font-size: 16px;",
+        "    font-family: Monospace;",
+        "  }",
+        "",
+        "  .thick-green-border {",
+        "    border-color: green;",
+        "    border-width: 10px;",
+        "    border-style: solid;",
+        "    border-radius: 50%;",
+        "  }",
+        "",
+        "  .smaller-image {",
+        "    width: 100px;",
+        "  }",
+        "</style>",
+        "",
+        "<h2 class=\"red-text\">CatPhotoApp</h2>",
+        "",
+        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
+        "",
+        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back.\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
+        "",
+        "<p>Things cats love:</p>",
+        "<ul>",
+        "  <li>cat nip</li>",
+        "  <li>laser pointers</li>",
+        "  <li>lasagna</li>",
+        "</ul>",
+        "<p>Top 3 things cats hate:</p>",
+        "<ol>",
+        "  <li>flea treatment</li>",
+        "  <li>thunder</li>",
+        "  <li>other cats</li>",
+        "</ol>",
+        "<form action=\"/submit-cat-photo\">",
+        "  <label><input type=\"radio\" name=\"indoor-outdoor\"> Indoor</label>",
+        "  <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
+        "  <label><input type=\"checkbox\" name=\"personality\"> Loving</label>",
+        "  <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
+        "  <label><input type=\"checkbox\" name=\"personality\"> Energetic</label>",
+        "  <input type=\"text\" placeholder=\"cat photo URL\" required>",
+        "  <button type=\"submit\">Submit</button>",
+        "</form>"
+      ],
+      "tests": [
+        "assert($('input[type=\"radio\"]').prop(\"checked\"), 'message: Your first radio button on your form should be checked by default.');",
+        "assert($('input[type=\"checkbox\"]').prop(\"checked\"), 'message: Your first checkbox on your form should be checked by default.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "title": "Standardmäßig ausgewählte Radiobuttons und Checkboxen",
+          "description": [
+            "Du kannst Checkboxen und Radiobuttons standardmäßig markiert machen, indem du das <code>checked</code> Attribut verwendest.",
+            "Das kannst du erreichen, indem du das Word \"checked\" innerhalb des Inputelements eingefügst. Zum Beispiel so:",
+            "<code>&#60;input type=\"radio\" name=\"test-name\" checked&#62;</code>",
+            "Stelle sicher, dass jeweils deine ersten Radiobuttons und Checkboxen standardmäßig markiert sind."
+          ]
+        },
+        "es": {
+          "title": "Marca botones de radio y casillas de verificación por omisión",
+          "description": [
+            "Puedes marcar por omisión una casilla de verificación o un botón de radio usando el atributo <code>checked</code>.",
+            "Para ello, sólo tienes que añadir la palabra \"checked\" en el interior de un elemento <code>input</code>. Por ejemplo:",
+            "<code>&#60;input type=\"radio\" name=\"nombre-de-prueba\" checked&#62;</code>",
+            "Establece como marcados por omisión el primero de tus <code>botones de radio</code> y la primera <code>casilla de verificación</code>."
+          ]
+        },
+        "pt-br": {
+          "title": "Deixe Botões e Caixas de Seleção Ativados por Padrão",
+          "description": [
+            "É possível deixar um botão ou caixa de seleção ativado por padrão ao utilizar o atributo <code>checked</code>.",
+            "Para isso, basta você acrescentar a palavra \"checked\" no interior de um elemento de entrada. Por exemplo:",
+            "<code>&#60;input type=\"radio\" name=\"nome-de-teste\" checked&#62;</code>",
+            "Estabeleça como marcados por padrão o primeiro dos seus <code>botões de seleção/rádio</code> e a primeira <code>caixa de seleção</code>."
+          ]
+        },
+        "ru": {
+          "title": "Отметьте радио-кнопки и флаговые кнопки по-умолчанию",
+          "description": [
+            "Вы можете установить флаг или радио-кнопку отмеченной по-умолчанию с помощью атрибута <code>checked</code>.",
+            "Для этого добавьте слово \"checked\" в качестве атрибута элемента input. Например:",
+            "<code>&#60;input type=\"radio\" name=\"test-name\" checked&#62;</code>",
+            "Установите первую <code>радио-кнопку</code> и первый <code>флаг</code> из наборов отмеченными по-умолчанию."
+          ]
+        }
+      }
+    },
+    {
+      "id": "bad87fee1348bd9aede08835",
+      "title": "Nest Many Elements within a Single Div Element",
+      "description": [
+        "The <code>div</code> element, also known as a division element, is a general purpose container for other elements.",
+        "The <code>div</code> element is probably the most commonly used HTML element of all. It's useful for passing the CSS of its own class declarations down to all the elements that it contains.",
+        "Just like any other non-self-closing element, you can open a <code>div</code> element with <code>&#60;div&#62;</code> and close it on another line with <code>&#60;/div&#62;</code>.",
+        "Try putting your opening <code>div</code> tag above your \"Things cats love\" <code>p</code> element and your closing <code>div</code> tag after your closing <code>ol</code> tag so that both of your lists are within one <code>div</code>.",
+        "Nest your \"Things cats love\" and \"Things cats hate\" lists all within a single <code>div</code> element."
+      ],
+      "challengeSeed": [
+        "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
+        "<style>",
+        "  .red-text {",
+        "    color: red;",
+        "  }",
+        "",
+        "  h2 {",
+        "    font-family: Lobster, Monospace;",
+        "  }",
+        "",
+        "  p {",
+        "    font-size: 16px;",
+        "    font-family: Monospace;",
+        "  }",
+        "",
+        "  .thick-green-border {",
+        "    border-color: green;",
+        "    border-width: 10px;",
+        "    border-style: solid;",
+        "    border-radius: 50%;",
+        "  }",
+        "",
+        "  .smaller-image {",
+        "    width: 100px;",
+        "  }",
+        "</style>",
+        "",
+        "<h2 class=\"red-text\">CatPhotoApp</h2>",
+        "",
+        "<p>Click here for <a href=\"#\">cat photos</a>.</p>",
+        "",
+        "<a href=\"#\"><img class=\"smaller-image thick-green-border\" alt=\"A cute orange cat lying on its back.\" src=\"https://bit.ly/fcc-relaxing-cat\"></a>",
+        "",
+        "<p>Things cats love:</p>",
+        "<ul>",
+        "  <li>cat nip</li>",
+        "  <li>laser pointers</li>",
+        "  <li>lasagna</li>",
+        "</ul>",
+        "<p>Top 3 things cats hate:</p>",
+        "<ol>",
+        "  <li>flea treatment</li>",
+        "  <li>thunder</li>",
+        "  <li>other cats</li>",
+        "</ol>",
+        "",
+        "<form action=\"/submit-cat-photo\">",
+        "  <label><input type=\"radio\" name=\"indoor-outdoor\" checked> Indoor</label>",
+        "  <label><input type=\"radio\" name=\"indoor-outdoor\"> Outdoor</label>",
+        "  <label><input type=\"checkbox\" name=\"personality\" checked> Loving</label>",
+        "  <label><input type=\"checkbox\" name=\"personality\"> Lazy</label>",
+        "  <label><input type=\"checkbox\" name=\"personality\"> Energetic</label>",
+        "  <input type=\"text\" placeholder=\"cat photo URL\" required>",
+        "  <button type=\"submit\">Submit</button>",
+        "</form>"
+      ],
+      "tests": [
+        "assert($(\"div\").children(\"p\").length > 1, 'message: Nest your <code>p</code> elements inside your <code>div</code> element.');",
+        "assert($(\"div\").children(\"ul\").length > 0, 'message: Nest your <code>ul</code> element inside your <code>div</code> element.');",
+        "assert($(\"div\").children(\"ol\").length > 0, 'message: Nest your <code>ol</code> element inside your <code>div</code> element.');",
+        "assert(code.match(/<\\/div>/g) && code.match(/<\\/div>/g).length === code.match(/<div>/g).length, 'message: Make sure your <code>div</code> element has a closing tag.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "title": "Umschließe viele Elemente mit einem einzigen Div Element",
+          "description": [
+            "Das <code>div</code> Element oder \"Division\" ist ein allgemeiner Container für andere Elemente.",
+            "Das <code>div</code> Element ist wahrscheinlich das am häufigsten verwendete HTML Element. Es ist nützlich um die CSS Stile der eigenen Klasse an die enthaltenen Elemente zu vererben.",
+            "Wie jedes andere Element – das sich nicht selbst schließt –  kannst du ein <code>div</code> Element mit <code>&#60;div&#62;</code> öffnen und mit <code>&#60;/div&#62;</code> wieder schließen.",
+            "Versuche dein öffnendes <code>div</code> Element überhalb des <code>p</code> Elements von  \"Things cats love\" und das schließende <code>div</code> unterhalb des schließenden <code>ol</code> Elements zu platzieren. Damit befinden sich beide Listen innerhalb eines <code>div</code>",
+            "Umschließe deine \"Thins cats love\" und \"Things cats hate\" Listen mit einem einzelnen <code>div</code> Element."
+          ]
+        },
+        "es": {
+          "title": "Anida muchos elementos dentro de una sólo elemento Div",
+          "description": [
+            "El elemento <code>div</code>, también conocido como un elemento de división, es un contenedor de propósito general para otros elementos.",
+            "El elemento <code>div</code> es probablemente el elemento HTML más utilizado. Es útil para pasar el CSS de sus propias declaraciones de clase a todos los elementos que contiene. ",
+            "Al igual que cualquier otro elemento sin cierre automático, puedes abrir una etiqueta <code>div</code> con <code>&#60;div&#62;</code> y cerrarla en otra línea con <code>&#60;/div&#62;</code> .",
+            "Trata de poner tu etiqueta de apertura <code>div</code> por encima de elemento <code>p</code> \"Things cat love\", y tu etiqueta de cierre de <code>div</code> después de tu etiqueta de cierre de <code>ol</code>, para que cada una de tus listas estén dentro de un <code>div</code>. ",
+            "Anida tus listas \"Things cats love\" y \"Things cats hate\" dentro de un solo elemento <code>div</code>."
+          ]
+        },
+        "pt-br": {
+          "title": "Aninhe Muitos Elementos Dentro de um só Elemento Div",
+          "description": [
+            "O elemento <code>div</code>, também conhecido como elemento de divisão, é um contentor de propósito geral para outros elementos.",
+            "O elemento <code>div</code> é provavelmente o elemento HTML mais utilizado. Ele é útil para adicionar o CSS de suas próprias declarações de classe para todos os elementos que o contém.",
+            "Da mesma forma que qualquer outro elemento sem fechamento automático, você deve abrir uma tag <code>div</code> com <code>&#60;div&#62;</code> e fechá-la em outra linha com <code>&#60;/div&#62;</code>.",
+            "Tente colocar sua tag de abertura <code>div</code> acima do elemento <code>p</code> \"Things cat love\", e sua tag de fechamento de <code>div</code> depois da tag de fechamento do <code>ol</code>, para que cada uma de suas listas esteja dentro de um <code>div</code>.",
+            "Aninhe suas listas \"Things cats love\" e \"Things cats hate\" no interior de um único elemento <code>div</code>."
+          ]
+        },
+        "ru": {
+          "title": "Вложите множество элементов внутрь одного элемента div",
+          "description": [
+            "Элемент <code>div</code>, известный как элемент раздела, является контейнером общего назначения для других элементов.",
+            "Элемент <code>div</code> возможно наиболее широко используемый HTML элемент из всех возможных. Он полезен для передачи собственных CSS-свойств вниз по дереву элементов, которые он содержит.",
+            "Как и с любым другим несамозакрывающимся элементом, вы можете открыть элемент <code>div</code> меткой <code>&#60;div&#62;</code> и закрыть на следующей строке меткой <code>&#60;/div&#62;</code>.",
+            "Попробуйте разместить открывающую метку <code>div</code> над вашим элементом <code>p</code> с текстом \"Things cats love\", а закрывающую метку <code>div</code> после закрытия элемента <code>ol</code>, таким образом оба ваших списка оказываются внутри одного элемента <code>div</code>.",
+            "Вложите ваши списки \"Things cats love\" и \"Things cats hate\" внутрь одного элемента <code>div</code>."
+          ]
+        }
+      }
+    },
+    {
+      "id": "587d78aa367417b2b2512aed",
+      "title": "Declare the Doctype of an HTML Document",
+      "description": [
+        "The challenges so far have covered specific HTML tags and their uses. However, there are a few elements that give overall structure to your page, and should be included in every HTML document.",
+        "At the top of your document, you need to tell the browser which version of HTML your page is using. HTML is an evolving language, and is updated regularly. Most major browsers support the latest specification, which is HTML5. However, older web pages may use previous versions of the language. You tell the browser this information by adding the <!DOCTYPE ...> tag on the first line, where the \"...\" part is the version of HTML. For HTML5, you use <!DOCTYPE html>.",
+        "The ! and uppercase DOCTYPE is important, especially for older browsers. The html is not case sensitive.",
+        "Next, the rest of your HTML code needs to be wrapped in html tags. The opening <html> goes directly below the <!DOCTYPE html> line, and the closing </html> goes at the end of the page.",
+        "Here's an example of the page structure:",
+        "<code><!DOCTYPE html></code>",
+        "<code><html></code>",
+        "<code><!-- Your HTML code goes here --></code>",
+        "<code></html></code>",
+        "Instructions",
+        "Add a DOCTYPE tag for HTML5 to the top of the blank HTML document in the code editor. Under it, add opening and closing html tags, which wrap around an h1 heading that can include any text."
+      ],
+      "challengeSeed": [
+        "",
+        "",
+        ""
+      ],
+      "tests": [
+        "assert(code.match(/<!DOCTYPE\\s+?html\\s*?>/gi), 'message Your code should include a <code>&lt;!DOCTYPE html&gt;</code> tag.');",
+        "assert($('html').length == 1, 'There should be one <code>html</code> element.');",
+        "assert($('html').children('h1').length == 1, 'message: The <code>html</code> tags should wrap around one <code>h1</code> element.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d78aa367417b2b2512aec",
+      "title": "Define the Head and Body of an HTML Document",
+      "description": [
+        "You can add another level of organization in your HTML document within the html tags with the head and body elements. Any markup with information about your page would go into the head tag. Then any markup with the content of the page (what displays for a user) would go into the body tag.",
+        "Metadata elements, such as link, meta, title, and style, typically go inside the head element.",
+        "Here's an example of a page's layout:",
+        "<code><!DOCTYPE html></code>",
+        "<code><html></code>",
+        "<code><head></code>",
+        "<code><!-- metadata elements --></code>",
+        "<code></head></code>",
+        "<code><body></code>",
+        "<code><!-- page contents --></code>",
+        "<code></body></code>",
+        "<code></html></code>",
+        "Instructions",
+        "Edit the markup so there's a head and a body. The head should only include the title, and the body should only include the h1 and p."
+      ],
+      "challengeSeed": [
+        "<!DOCTYPE html>",
+        "<html>",
+        "  <title>The best page ever</title>",
+        "  <h1>The best page ever</h1>",
+        "  <p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>",
+        "</html>  "
+      ],
+      "tests": [
+        "assert($('head').length == 1, 'message: There should be only one <code>head</code> element on the page.');",
+        "assert($('body').length == 1, 'message: There should be only one <code>body</code> element on the page.');",
+        "assert($('html').children('head').length == 1, 'message: The <code>head</code> element should be a child of the <code>html</code> element.');",
+        "assert($('html').children('body').length == 1, 'message: The <code>body</code> element should be a child of the <code>html</code> element.');",
+        "assert($('head').children('title').length == 1, 'message: The <code>head</code> element should wrap around the <code>title</code> element.');",
+        "assert($('body').children('h1').length == 1 && $('body').children('p').length == 1, 'message: The <code>body</code> element should wrap around both the <code>h1</code> and <code>p</code> elements.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {},
+      "ru": {}
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/01-responsive-web-design/claim-your-responsive-web-design-certificate.json b/seed/challenges/01-responsive-web-design/claim-your-responsive-web-design-certificate.json
new file mode 100644
index 00000000000000..4fa65f05554f4f
--- /dev/null
+++ b/seed/challenges/01-responsive-web-design/claim-your-responsive-web-design-certificate.json
@@ -0,0 +1,108 @@
+{
+  "name": "Claim Your Responsive Web Design Certificate",
+  "order": 13,
+  "time": "5 minutes",
+  "challenges": [
+    {
+      "id": "587d78aa367417b2b2512aee",
+      "title": "Claim Your Responsive Web Design Certificate",
+      "description": [
+        [
+          "//i.imgur.com/k8btNUB.jpg",
+          "An image of our Responsive Web Design Certificate",
+          "This challenge will give you your verified Responsive Web Design Certificate. Before we issue your certificate, we must verify that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
+          ""
+        ],
+        [
+          "//i.imgur.com/uLPsUko.jpg",
+          "The definition of plagiarism: Plagiarism (noun) - copying someone else’s work and presenting it as your own without crediting them",
+          "By clicking below, you pledge that all of your submitted code A) is code you or your pair personally wrote, or B) comes from open source libraries like jQuery, or C) has been clearly attributed to its original authors. You also give us permission to audit your challenge solutions and revoke your certificate if we discover evidence of plagiarism.",
+          "#"
+        ],
+        [
+          "//i.imgur.com/UedoV2G.jpg",
+          "An image of the text \"Front End Development Certificate requirements\"",
+          "Let's confirm that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. Click the button below to verify this.",
+          "#"
+        ],
+        [
+          "//i.imgur.com/Q5Za9U6.jpg",
+          "An image of the word \"Congratulations\"",
+          "Congratulations! We've added your Responsive Web Design Certificate to your portfolio page. Unless you choose to hide your solutions, this certificate will remain publicly visible and verifiable.",
+          ""
+        ]
+      ],
+      "challengeSeed": [
+        {
+          "properties": [
+            "isHonest",
+            "isFrontEndCert"
+          ],
+          "apis": [
+            "/certificate/honest",
+            "/certificate/verify/front-end"
+          ],
+          "stepIndex": [
+            1,
+            2
+          ]
+        }
+      ],
+      "tests": [
+        {
+          "id": "587d78af367417b2b2512b03",
+          "title": "Build a Survey Form"
+        },
+        {
+          "id": "bd7158d8c442eddfaeb5bd18",
+          "title": "Build a Tribute Page"
+        },
+        {
+          "id": "587d78af367417b2b2512b04",
+          "title": "Build a Product Landing Page"
+        },
+        {
+          "id": "587d78b0367417b2b2512b05",
+          "title": "Build a Technical Documentation Page"
+        },
+        {
+          "id": "bd7158d8c242eddfaeb5bd13",
+          "title": "Build a Personal Portfolio Webpage"
+        }
+      ],
+      "type": "Waypoint",
+      "challengeType": 7,
+      "translations": {
+        "es": {
+          "title": "Reclama tu certificado de Desarrollo de interfaces",
+          "description": [
+            [
+              "//i.imgur.com/k8btNUB.jpg",
+              "Una imagen que muestra nuestro certificado de Desarrollo de interfaces",
+              "Este desafío te otorga tu certificado autenticado de Desarrollo de interfaces. Antes de que podamos emitir tu certificado, debemos verificar que has completado todos los desafíos básicos e intermedios de diseño de algoritmos, y todos los proyectos básicos e intermedios de desarrollo de interfaces. También debes aceptar nuestro Juramento de honestidad académica. Pulsa el botón siguiente para iniciar este proceso.",
+              ""
+            ],
+            [
+              "//i.imgur.com/HArFfMN.jpg",
+              "Plagio (nombre): acción y efecto de plagiar. Plagiar (verbo) - copiar en lo sustancial obras ajenas, dándolas como propias.",
+              "Al pulsar el botón siguiente, juras que todo el código en tus soluciones a los desafíos A) es código que tú o tu compañero escribieron personalmente, o B) proviene de librerías de código abierto como jQuery, o C) ha sido claramente atribuido a sus autores originales. También nos otorgas el permiso para auditar tus soluciones a los desafíos y revocar tu certificado si encontramos evidencia de plagio.",
+              "#"
+            ],
+            [
+              "//i.imgur.com/14F2Van.jpg",
+              "Una imagen del texto \"Front End Development Certificate requirements\"",
+              "Confirmemos que has completado todos nuestros desafíos básicos e intermedios de diseño de algoritmos, y todos nuestros proyectos básicos e intermedios de desarrollo de interfaces. Pulsa el botón siguiente para hacer la verificación.",
+              "#"
+            ],
+            [
+              "//i.imgur.com/16SIhHO.jpg",
+              "Una imagen de la palabra \"Congratulations\"",
+              "¡Felicitaciones! Hemos agregado tu certificado de Desarrollo de interfaces a tu portafolio. A menos que elijas no mostrar tus soluciones, este certificado será públicamente visible y verificable.",
+              ""
+            ]
+          ]
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/01-responsive-web-design/css-flexbox.json b/seed/challenges/01-responsive-web-design/css-flexbox.json
new file mode 100644
index 00000000000000..04bc6645117101
--- /dev/null
+++ b/seed/challenges/01-responsive-web-design/css-flexbox.json
@@ -0,0 +1,1589 @@
+{
+  "name": "CSS Flexbox",
+  "order": 5,
+  "time": "5 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "587d78aa367417b2b2512aef",
+      "title": "Introduction to the CSS Flexbox Challenges",
+      "description": [
+        [
+          "",
+          "",
+          "A website's User Interface (\"UI\") has two components. First, there are the visual elements, such as colors, fonts, and images. Second, there is the placement or positioning of those elements. In Responsive Web Design, a UI layout must accommodate many different browsers and devices accessing the content.<br><br>CSS3 introduced Flexible Boxes, or flexbox, to create page layouts for a dynamic UI. It is a layout mode that arranges elements in a predictable way for different screen sizes and browsers. While somewhat new, all popular modern browsers support flexbox. This section covers how to use flexbox and the different layout options it offers.",
+          ""
+        ]
+      ],
+      "releasedOn": "",
+      "challengeSeed": [],
+      "tests": [],
+      "type": "Waypoint",
+      "challengeType": 7,
+      "isRequired": false,
+      "titleEs": "",
+      "descriptionEs": [
+        []
+      ],
+      "titleFr": "",
+      "descriptionFr": [
+        []
+      ],
+      "titleDe": "",
+      "descriptionDe": [
+        []
+      ]
+    },
+    {
+      "id": "587d78ab367417b2b2512af0",
+      "title": "Using display: flex with Two Boxes",
+      "description": [
+        "This section uses alternating challenge styles to show how to use CSS to position elements in a flexible way. First, a challenge will explain theory, then a practical challenge using a simple tweet component will apply the flexbox concept.",
+        "Placing the CSS property <code>display: flex;</code> on an element allows you to use other flex properties to build a responsive page.",
+        "<h4>Instructions</h4>",
+        "Add the CSS property <code>display</code> to both <code>#box-1</code> and <code>#box-2</code> and set each to a value of flex."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  #box-1 {",
+        "    background-color: dodgerblue;",
+        "    width: 500px;",
+        "    height: 500px;",
+        "    ",
+        "  }",
+        "",
+        "  #box-2 {",
+        "    background-color: orangered;",
+        "    width: 500px;",
+        "    height: 500px;",
+        "    ",
+        "  }",
+        "</style>",
+        "<div id=\"box-1\"></div>",
+        "<div id=\"box-2\"></div>"
+      ],
+      "tests": [
+        "assert($('#box-1').css('display') == 'flex', 'message: <code>#box-1</code> should have the <code>display</code> property set to a value of flex.');",
+        "assert($('#box-2').css('display') == 'flex', 'message: <code>#box-2</code> should have the <code>display</code> property set to a value of flex.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78ab367417b2b2512af1",
+      "title": "Adding Flex Superpowers to the Tweet Embed",
+      "description": [
+        "To the right is the tweet embed that will be used as the practical example. Some of the elements would look better with a different layout. The last challenge demonstrated <code>display: flex</code>. Here you'll add it to several components in the tweet embed to start adjusting their positioning.",
+        "<h4>Instructions</h4>",
+        "Add the CSS property <code>display: flex</code> to all of the following items - note that the selectors are already set up in the CSS:",
+        "<code>header</code>, the header's <code>.profile-name</code>, the header's <code>.follow-btn</code>, the header's <code>h3</code> and <code>h4</code>, the <code>footer</code>, and the footer's <code>.stats</code>."
+      ],
+      "challengeSeed": [
+          "<style>",
+          "  body {",
+          "    font-family: Arial, sans-serif;",
+          "  }",
+          "  header {",
+          "    ",
+          "  }",
+          "  header .profile-thumbnail {",
+          "    width: 50px;",
+          "    height: 50px;",
+          "    border-radius: 4px;",
+          "  }",
+          "  header .profile-name {",
+          "    ",
+          "    margin-left: 10px;",
+          "  }",
+          "  header .follow-btn {",
+          "    ",
+          "    margin: 0 0 0 auto;",
+          "  }",
+          "  header .follow-btn button {",
+          "    border: 0;",
+          "    border-radius: 3px;",
+          "    padding: 5px;",
+          "  }",
+          "  header h3, header h4 {",
+          "    ",
+          "    margin: 0;",
+          "  }",
+          "  #inner p {",
+          "    margin-bottom: 10px;",
+          "    font-size: 20px;",
+          "  }",
+          "  #inner hr {",
+          "    margin: 20px 0;",
+          "    border-style: solid;",
+          "    opacity: 0.1;",
+          "  }",
+          "  footer {",
+          "    ",
+          "  }",
+          "  footer .stats {",
+          "    ",
+          "    font-size: 15px;",
+          "  }",
+          "  footer .stats strong {",
+          "    font-size: 18px;",
+          "  }",
+          "  footer .stats .likes {",
+          "    margin-left: 10px;",
+          "  }",
+          "  footer .cta {",
+          "    margin-left: auto;",
+          "  }",
+          "  footer .cta button {",
+          "    border: 0;",
+          "    background: transparent;",
+          "  }",
+          "</style>",
+          "<header>",
+          "  <img src=\"https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png\" alt=\"Quincy Larson's profile picture\" class=\"profile-thumbnail\">",
+          "  <div class=\"profile-name\">",
+          "    <h3>Quincy Larson</h3>",
+          "    <h4>@ossia</h4>",
+          "  </div>",
+          "  <div class=\"follow-btn\">",
+          "    <button>Follow</button>",
+          "  </div>",
+          "</header>",
+          "<div id=\"inner\">",
+          "  <p>How would you describe to a layperson the relationship between Node, Express, and npm in a single tweet? An analogy would be helpful.</p>",
+          "  <span class=\"date\">7:24 PM - 17 Aug 2016</span>",
+          "  <hr>",
+          "</div>",
+          "<footer>",
+          "  <div class=\"stats\">",
+          "    <div class=\"retweets\">",
+          "      <strong>56,203</strong> RETWEETS",
+          "    </div>",
+          "    <div class=\"likes\">",
+          "      <strong>84,703</strong> LIKES",
+          "    </div>",
+          "  </div>",
+          "  <div class=\"cta\">",
+          "    <button class=\"share-btn\">Share</button>",
+          "    <button class=\"retweet-btn\">Retweet</button>",
+          "    <button class=\"like-btn\">Like</button>",
+          "  </div>",
+          "</footer>"
+      ],
+      "tests": [
+        "assert($('header').css('display') == 'flex', 'message: Your <code>header</code> should have a <code>display</code> property set to flex.');",
+        "assert($('footer').css('display') == 'flex', 'message: Your <code>footer</code> should have a <code>display</code> property set to flex.');",
+        "assert($('h3').css('display') == 'flex', 'message: Your <code>h3</code> should have a <code>display</code> property set to flex.');",
+        "assert($('h4').css('display') == 'flex', 'message: Your <code>h4</code> should have a <code>display</code> property set to flex.');",
+        "assert($('.profile-name').css('display') == 'flex', 'message: Your <code>.profile-name</code> should have a <code>display</code> property set to flex.');",
+        "assert($('.follow-btn').css('display') == 'flex', 'message: Your <code>.follow-btn</code> should have a <code>display</code> property set to flex.');",
+        "assert($('.stats').css('display') == 'flex', 'message: Your <code>.stats</code> should have a <code>display</code> property set to flex.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78ab367417b2b2512af2",
+      "title": "Using the Flex-direction Property to Make a Row",
+      "description": [
+        "Adding <code>display: flex</code> to an element turns it into a flex container. This makes it possible to align any children of that element into rows or columns. You do this by adding the <code>flex-direction</code> property to the parent item and setting it to row or column. Creating a row will align the children horizontally, and creating a column will align the children vertically.",
+        "<strong>Note</strong><br>The default value for the <code>flex-direction</code> property is row.",
+        "<h4>Instructions</h4>",
+        "Add the CSS property <code>flex-direction</code> to the <code>#box-container</code> element, and give it a value of row."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  #box-container {",
+        "    display: flex;",
+        "    ",
+        "  }",
+        "  #box-1 {",
+        "    background-color: dodgerblue;",
+        "    width: 500px;",
+        "    height: 500px;",
+        "  }",
+        "",
+        "  #box-2 {",
+        "    background-color: orangered;",
+        "    width: 500px;",
+        "    height: 500px;",
+        "  }",
+        "</style>",
+        "",
+        "<div id=\"box-container\">",
+        "  <div id=\"box-1\"></div>",
+        "  <div id=\"box-2\"></div>",
+        "</div>"
+      ],
+      "tests": [
+          "assert($('#box-container').css('flex-direction') == 'row', 'message: The <code>#box-container</code> element should have a <code>flex-direction</code> property set to row.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78ab367417b2b2512af3",
+      "title": "Applying the Flex-direction Property to Create Rows in the Tweet Embed",
+      "description": [
+        "The <code>header</code> and <code>footer</code> in the tweet embed example have child items that could be arranged as rows using the <code>flex-direction</code> property. This tells CSS to align the children horizontally.",
+        "<h4>Instructions</h4>",
+        "Add the CSS property <code>flex-direction</code> to both the <code>header</code> and <code>footer</code> and set the value to row."
+      ],
+      "challengeSeed": [
+          "<style>",
+          "  body {",
+          "    font-family: Arial, sans-serif;",
+          "  }",
+          "  header {",
+          "    display: flex;",
+          "    ",
+          "  }",
+          "  header .profile-thumbnail {",
+          "    width: 50px;",
+          "    height: 50px;",
+          "    border-radius: 4px;",
+          "  }",
+          "  header .profile-name {",
+          "    display: flex;",
+          "    margin-left: 10px;",
+          "  }",
+          "  header .follow-btn {",
+          "    display: flex;",
+          "    margin: 0 0 0 auto;",
+          "  }",
+          "  header .follow-btn button {",
+          "    border: 0;",
+          "    border-radius: 3px;",
+          "    padding: 5px;",
+          "  }",
+          "  header h3, header h4 {",
+          "    display: flex;",
+          "    margin: 0;",
+          "  }",
+          "  #inner p {",
+          "    margin-bottom: 10px;",
+          "    font-size: 20px;",
+          "  }",
+          "  #inner hr {",
+          "    margin: 20px 0;",
+          "    border-style: solid;",
+          "    opacity: 0.1;",
+          "  }",
+          "  footer {",
+          "    display: flex;",
+          "    ",
+          "  }",
+          "  footer .stats {",
+          "    display: flex;",
+          "    font-size: 15px;",
+          "  }",
+          "  footer .stats strong {",
+          "    font-size: 18px;",
+          "  }",
+          "  footer .stats .likes {",
+          "    margin-left: 10px;",
+          "  }",
+          "  footer .cta {",
+          "    margin-left: auto;",
+          "  }",
+          "  footer .cta button {",
+          "    border: 0;",
+          "    background: transparent;",
+          "  }",
+          "</style>",
+          "<header>",
+          "  <img src=\"https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png\" alt=\"Quincy Larson's profile picture\" class=\"profile-thumbnail\">",
+          "  <div class=\"profile-name\">",
+          "    <h3>Quincy Larson</h3>",
+          "    <h4>@ossia</h4>",
+          "  </div>",
+          "  <div class=\"follow-btn\">",
+          "    <button>Follow</button>",
+          "  </div>",
+          "</header>",
+          "<div id=\"inner\">",
+          "  <p>How would you describe to a layperson the relationship between Node, Express, and npm in a single tweet? An analogy would be helpful.</p>",
+          "  <span class=\"date\">7:24 PM - 17 Aug 2016</span>",
+          "  <hr>",
+          "</div>",
+          "<footer>",
+          "  <div class=\"stats\">",
+          "    <div class=\"retweets\">",
+          "      <strong>56,203</strong> RETWEETS",
+          "    </div>",
+          "    <div class=\"likes\">",
+          "      <strong>84,703</strong> LIKES",
+          "    </div>",
+          "  </div>",
+          "  <div class=\"cta\">",
+          "    <button class=\"share-btn\">Share</button>",
+          "    <button class=\"retweet-btn\">Retweet</button>",
+          "    <button class=\"like-btn\">Like</button>",
+          "  </div>",
+          "</footer>"
+      ],
+      "tests": [
+        "assert($('header').css('flex-direction') == 'row', 'message: The <code>header</code> should have a <code>flex-direction</code> property set to row.');",
+        "assert($('footer').css('flex-direction') == 'row', 'message: The <code>footer</code> should have a <code>flex-direction</code> property set to row.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78ac367417b2b2512af4",
+      "title": "Using the Flex-direction Property to Make a Column",
+      "description": [
+        "The last two challenges used the <code>flex-direction</code> property set to row. This property can also create a column by vertically stacking the children of a flex container.",
+        "<h4>Instructions</h4>",
+        "Add the CSS property <code>flex-direction</code> to the <code>#box-container</code> element, and give it a value of column."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  #box-container {",
+        "    display: flex;",
+        "    ",
+        "  }",
+        "  #box-1 {",
+        "    background-color: dodgerblue;",
+        "    width: 500px;",
+        "    height: 500px;",
+        "  }",
+        "",
+        "  #box-2 {",
+        "    background-color: orangered;",
+        "    width: 500px;",
+        "    height: 500px;",
+        "  }",
+        "</style>",
+        "",
+        "<div id=\"box-container\">",
+        "  <div id=\"box-1\"></div>",
+        "  <div id=\"box-2\"></div>",
+        "</div>"
+      ],
+      "tests": [
+          "assert($('#box-container').css('flex-direction') == 'column', 'message: The <code>#box-container</code> element should have a <code>flex-direction</code> property set to column.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78ac367417b2b2512af5",
+      "title": "Applying the Flex-direction Property to Create a Column in the Tweet Embed",
+      "description": [
+        "The tweet embed <code>header</code> and <code>footer</code> used the <code>flex-direction</code> property earlier with a row value. Similarly, the items inside the <code>.profile-name</code> element would work well stacked as a column.",
+        "<h4>Instructions</h4>",
+        "Add the CSS property <code>flex-direction</code> to the header's <code>.profile-name</code> element and set the value to column."
+      ],
+      "challengeSeed": [
+          "<style>",
+          "  body {",
+          "    font-family: Arial, sans-serif;",
+          "  }",
+          "  header, footer {",
+          "    display: flex;",
+          "    flex-direction: row;",
+          "  }",
+          "  header .profile-thumbnail {",
+          "    width: 50px;",
+          "    height: 50px;",
+          "    border-radius: 4px;",
+          "  }",
+          "  header .profile-name {",
+          "    display: flex;",
+          "    ",
+          "    margin-left: 10px;",
+          "  }",
+          "  header .follow-btn {",
+          "    display: flex;",
+          "    margin: 0 0 0 auto;",
+          "  }",
+          "  header .follow-btn button {",
+          "    border: 0;",
+          "    border-radius: 3px;",
+          "    padding: 5px;",
+          "  }",
+          "  header h3, header h4 {",
+          "    display: flex;",
+          "    margin: 0;",
+          "  }",
+          "  #inner p {",
+          "    margin-bottom: 10px;",
+          "    font-size: 20px;",
+          "  }",
+          "  #inner hr {",
+          "    margin: 20px 0;",
+          "    border-style: solid;",
+          "    opacity: 0.1;",
+          "  }",
+          "  footer .stats {",
+          "    display: flex;",
+          "    font-size: 15px;",
+          "  }",
+          "  footer .stats strong {",
+          "    font-size: 18px;",
+          "  }",
+          "  footer .stats .likes {",
+          "    margin-left: 10px;",
+          "  }",
+          "  footer .cta {",
+          "    margin-left: auto;",
+          "  }",
+          "  footer .cta button {",
+          "    border: 0;",
+          "    background: transparent;",
+          "  }",
+          "</style>",
+          "<header>",
+          "  <img src=\"https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png\" alt=\"Quincy Larson's profile picture\" class=\"profile-thumbnail\">",
+          "  <div class=\"profile-name\">",
+          "    <h3>Quincy Larson</h3>",
+          "    <h4>@ossia</h4>",
+          "  </div>",
+          "  <div class=\"follow-btn\">",
+          "    <button>Follow</button>",
+          "  </div>",
+          "</header>",
+          "<div id=\"inner\">",
+          "  <p>How would you describe to a layperson the relationship between Node, Express, and npm in a single tweet? An analogy would be helpful.</p>",
+          "  <span class=\"date\">7:24 PM - 17 Aug 2016</span>",
+          "  <hr>",
+          "</div>",
+          "<footer>",
+          "  <div class=\"stats\">",
+          "    <div class=\"retweets\">",
+          "      <strong>56,203</strong> RETWEETS",
+          "    </div>",
+          "    <div class=\"likes\">",
+          "      <strong>84,703</strong> LIKES",
+          "    </div>",
+          "  </div>",
+          "  <div class=\"cta\">",
+          "    <button class=\"share-btn\">Share</button>",
+          "    <button class=\"retweet-btn\">Retweet</button>",
+          "    <button class=\"like-btn\">Like</button>",
+          "  </div>",
+          "</footer>"
+      ],
+      "tests": [
+        "assert($('.profile-name').css('flex-direction') == 'column', 'message: The <code>.profile-name</code> element should have a <code>flex-direction</code> property set to column.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78ac367417b2b2512af6",
+      "title": "Aligning Elements Using the Justify-content Property",
+      "description": [
+        "Sometimes the flex items within a flex container do not fill all the space in the container. It is common to want to tell CSS how to align and space out the flex items a certain way. Fortunately, the <code>justify-content</code> property has several options to do this. But first, there is some important terminology to understand before reviewing those options.",
+        "<a href=\"https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg\" target=\"_blank\">Here is a useful image showing a row to illustrate the concepts below.</a>",
+        "Recall that setting a flex container as a row places the flex items side-by-side from left-to-right. A flex container set as a column places the flex items in a vertical stack from top-to-bottom. For each, the direction the flex items are arranged is called the <strong>main axis</strong>. For a row, this is a horizontal line that cuts through each item. And for a column, the main axis is a vertical line through the items.",
+        "There are several options for how to space the flex items along the line that is the main axis. One of the most commonly used is <code>justify-content: center;</code>, which aligns all the flex items to the center inside the flex container. Others options include:",
+        "<ul>",
+        "<li><code>flex-start</code>: aligns items to the start of the flex container. For a row, this pushes the items to the left of the container. For a column, this pushes the items to the top of the container.</li>",
+        "<li><code>flex-end</code>: aligns items to the end of the flex container. For a row, this pushes the items to the right of the container. For a column, this pushes the items to the bottom of the container.</li>",
+        "<li><code>space-between</code>: aligns items to the center of the main axis, with extra space placed between the items. The first and last items are pushed to the very edge of the flex container. For example, in a row the first item is against the left side of the container, the last item is against the right side of the container, then the other items between them are spaced evenly.</li>",
+        "<li><code>space-around</code>: similar to <code>space-between</code> but the first and last items are not locked to the edges of the container, the space is distributed around all the items</li>",
+        "</ul>",
+        "<h4>Instructions</h4>",
+        "An example helps show this property in action. Add the CSS property <code>justify-content</code> to the <code>#box-container</code> element, and give it a value of center.",
+        "<strong>Bonus</strong><br>Try the other options for the <code>justify-content</code> property in the code editor to see their differences. But note that a value of center is the only one that will pass this challenge."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  #box-container {",
+        "    background: gray;",
+        "    display: flex;",
+        "    height: 500px;",
+        "    ",
+        "  }",
+        "  #box-1 {",
+        "    background-color: dodgerblue;",
+        "    width: 100px;",
+        "    height: 200px;",
+        "  }",
+        "",
+        "  #box-2 {",
+        "    background-color: orangered;",
+        "    width: 100px;",
+        "    height: 200px;",
+        "  }",
+        "</style>",
+        "",
+        "<div id=\"box-container\">",
+        "  <div id=\"box-1\"></div>",
+        "  <div id=\"box-2\"></div>",
+        "</div>"
+      ],
+      "tests": [
+          "assert($('#box-container').css('justify-content') == 'center', 'message: The <code>#box-container</code> element should have a <code>justify-content</code> property set to a value of center.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78ac367417b2b2512af7",
+      "title": "Using the Justify-content Property in the Tweet Embed",
+      "description": [
+        "The last challenge showed an example of the <code>justify-content</code> property. For the tweet embed, this property can be applied to align the items in the <code>.profile-name</code> element.",
+        "<h4>Instructions</h4>",
+        "Add the CSS property <code>justify-content</code> to the header's <code>.profile-name</code> element and set the value to any of the options from the last challenge."
+      ],
+      "challengeSeed": [
+          "<style>",
+          "  body {",
+          "    font-family: Arial, sans-serif;",
+          "  }",
+          "  header, footer {",
+          "    display: flex;",
+          "    flex-direction: row;",
+          "  }",
+          "  header .profile-thumbnail {",
+          "    width: 50px;",
+          "    height: 50px;",
+          "    border-radius: 4px;",
+          "  }",
+          "  header .profile-name {",
+          "    display: flex;",
+          "    flex-direction: column;",
+          "    ",
+          "    margin-left: 10px;",
+          "  }",
+          "  header .follow-btn {",
+          "    display: flex;",
+          "    margin: 0 0 0 auto;",
+          "  }",
+          "  header .follow-btn button {",
+          "    border: 0;",
+          "    border-radius: 3px;",
+          "    padding: 5px;",
+          "  }",
+          "  header h3, header h4 {",
+          "    display: flex;",
+          "    margin: 0;",
+          "  }",
+          "  #inner p {",
+          "    margin-bottom: 10px;",
+          "    font-size: 20px;",
+          "  }",
+          "  #inner hr {",
+          "    margin: 20px 0;",
+          "    border-style: solid;",
+          "    opacity: 0.1;",
+          "  }",
+          "  footer .stats {",
+          "    display: flex;",
+          "    font-size: 15px;",
+          "  }",
+          "  footer .stats strong {",
+          "    font-size: 18px;",
+          "  }",
+          "  footer .stats .likes {",
+          "    margin-left: 10px;",
+          "  }",
+          "  footer .cta {",
+          "    margin-left: auto;",
+          "  }",
+          "  footer .cta button {",
+          "    border: 0;",
+          "    background: transparent;",
+          "  }",
+          "</style>",
+          "<header>",
+          "  <img src=\"https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png\" alt=\"Quincy Larson's profile picture\" class=\"profile-thumbnail\">",
+          "  <div class=\"profile-name\">",
+          "    <h3>Quincy Larson</h3>",
+          "    <h4>@ossia</h4>",
+          "  </div>",
+          "  <div class=\"follow-btn\">",
+          "    <button>Follow</button>",
+          "  </div>",
+          "</header>",
+          "<div id=\"inner\">",
+          "  <p>How would you describe to a layperson the relationship between Node, Express, and npm in a single tweet? An analogy would be helpful.</p>",
+          "  <span class=\"date\">7:24 PM - 17 Aug 2016</span>",
+          "  <hr>",
+          "</div>",
+          "<footer>",
+          "  <div class=\"stats\">",
+          "    <div class=\"retweets\">",
+          "      <strong>56,203</strong> RETWEETS",
+          "    </div>",
+          "    <div class=\"likes\">",
+          "      <strong>84,703</strong> LIKES",
+          "    </div>",
+          "  </div>",
+          "  <div class=\"cta\">",
+          "    <button class=\"share-btn\">Share</button>",
+          "    <button class=\"retweet-btn\">Retweet</button>",
+          "    <button class=\"like-btn\">Like</button>",
+          "  </div>",
+          "</footer>"
+      ],
+      "tests": [
+        "assert($('.profile-name').css('justify-content') == 'center' || $('.profile-name').css('justify-content') == 'flex-start' || $('.profile-name').css('justify-content') == 'flex-end' || $('.profile-name').css('justify-content') == 'space-between' || $('.profile-name').css('justify-content') == 'space-around', 'message: The <code>.profile-name</code> element should have the <code>justify-content</code> property set to any of these values: center, flex-start, flex-end, space-between, or space-around.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78ad367417b2b2512af8",
+      "title": "Aligning Elements Using the Align-items Property",
+      "description": [
+        "The <code>align-items</code> property is similar to <code>justify-content</code>. Recall that the <code>justify-content</code> property aligned flex items along the main axis. For rows, the main axis is a horizontal line and for columns it is a vertical line.",
+        "Flex containers also have a <strong>cross axis</strong> which is the opposite of the main axis. For rows, the cross axis is vertical and for columns, the cross axis is horizontal.",
+        "CSS offers the <code>align-items</code> property to align flex items along the cross axis. For a row, it tells CSS how to push the items in the entire row up or down within the container. And for a column, how to push all the items left or right within the container.",
+        "The different values available for <code>align-items</code> include:",
+        "<ul>",
+        "<li><code>flex-start</code>: aligns items to the start of the flex container. For rows, this aligns items to the top of the container. For columns, this aligns items to the left of the container.</li>",
+        "<li><code>flex-end</code>: aligns items to the end of the flex container. For rows, this aligns items to the bottom of the container. For columns, this aligns items to the right of the container.</li>",
+        "<li><code>center</code>: align items to the center. For rows, this vertically aligns items (equal space above and below the items). For columns, this horizontally aligns them (equal space to the left and right of the items).</li>",
+        "<li><code>stretch</code>: stretch the items to fill the flex container. For example, rows items are stretched to fill the flex container top-to-bottom.</li>",
+        "<li><code>baseline</code>: align items to their baselines. Baseline is a text concept, think of it as the line that the letters sit on.</li>",
+        "</ul>",
+        "<h4>Instructions</h4>",
+        "An example helps show this property in action. Add the CSS property <code>align-items</code> to the <code>#box-container</code> element, and give it a value of center.",
+        "<strong>Bonus</strong><br>Try the other options for the <code>align-items</code> property in the code editor to see their differences. But note that a value of center is the only one that will pass this challenge."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  #box-container {",
+        "    background: gray;",
+        "    display: flex;",
+        "    ",
+        "    height: 500px;",
+        "  }",
+        "  #box-1 {",
+        "    background-color: dodgerblue;",
+        "    width: 200px;",
+        "    font-size: 24px;",
+        "  }",
+        "",
+        "  #box-2 {",
+        "    background-color: orangered;",
+        "    width: 200px;",
+        "    font-size: 18px;",
+        "  }",
+        "</style>",
+        "",
+        "<div id=\"box-container\">",
+        "  <div id=\"box-1\"><p>Hello</p></div>",
+        "  <div id=\"box-2\"><p>Goodbye</p></div>",
+        "</div>"
+      ],
+      "tests": [
+          "assert($('#box-container').css('align-items') == 'center', 'message: The <code>#box-container</code> element should have an <code>align-items</code> property set to a value of center.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78ad367417b2b2512af9",
+      "title": "Using the Align-items Property in the Tweet Embed",
+      "description": [
+        "The last challenge introduced the <code>align-items</code> property and gave an example. This property can be applied to a few tweet embed elements to align the flex items inside them.",
+        "<h4>Instructions</h4>",
+        "Add the CSS property <code>align-items</code> to the header's <code>.follow-btn</code> element, the header's <code>h3</code>, and the header's <code>h4</code>. Set the value to center."
+      ],
+      "challengeSeed": [
+          "<style>",
+          "  body {",
+          "    font-family: Arial, sans-serif;",
+          "  }",
+          "  header, footer {",
+          "    display: flex;",
+          "    flex-direction: row;",
+          "  }",
+          "  header .profile-thumbnail {",
+          "    width: 50px;",
+          "    height: 50px;",
+          "    border-radius: 4px;",
+          "  }",
+          "  header .profile-name {",
+          "    display: flex;",
+          "    flex-direction: column;",
+          "    justify-content: center;",
+          "    margin-left: 10px;",
+          "  }",
+          "  header .follow-btn {",
+          "    display: flex;",
+          "    ",
+          "    margin: 0 0 0 auto;",
+          "  }",
+          "  header .follow-btn button {",
+          "    border: 0;",
+          "    border-radius: 3px;",
+          "    padding: 5px;",
+          "  }",
+          "  header h3, header h4 {",
+          "    display: flex;",
+          "    ",
+          "    margin: 0;",
+          "  }",
+          "  #inner p {",
+          "    margin-bottom: 10px;",
+          "    font-size: 20px;",
+          "  }",
+          "  #inner hr {",
+          "    margin: 20px 0;",
+          "    border-style: solid;",
+          "    opacity: 0.1;",
+          "  }",
+          "  footer .stats {",
+          "    display: flex;",
+          "    font-size: 15px;",
+          "  }",
+          "  footer .stats strong {",
+          "    font-size: 18px;",
+          "  }",
+          "  footer .stats .likes {",
+          "    margin-left: 10px;",
+          "  }",
+          "  footer .cta {",
+          "    margin-left: auto;",
+          "  }",
+          "  footer .cta button {",
+          "    border: 0;",
+          "    background: transparent;",
+          "  }",
+          "</style>",
+          "<header>",
+          "  <img src=\"https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png\" alt=\"Quincy Larson's profile picture\" class=\"profile-thumbnail\">",
+          "  <div class=\"profile-name\">",
+          "    <h3>Quincy Larson</h3>",
+          "    <h4>@ossia</h4>",
+          "  </div>",
+          "  <div class=\"follow-btn\">",
+          "    <button>Follow</button>",
+          "  </div>",
+          "</header>",
+          "<div id=\"inner\">",
+          "  <p>How would you describe to a layperson the relationship between Node, Express, and npm in a single tweet? An analogy would be helpful.</p>",
+          "  <span class=\"date\">7:24 PM - 17 Aug 2016</span>",
+          "  <hr>",
+          "</div>",
+          "<footer>",
+          "  <div class=\"stats\">",
+          "    <div class=\"retweets\">",
+          "      <strong>56,203</strong> RETWEETS",
+          "    </div>",
+          "    <div class=\"likes\">",
+          "      <strong>84,703</strong> LIKES",
+          "    </div>",
+          "  </div>",
+          "  <div class=\"cta\">",
+          "    <button class=\"share-btn\">Share</button>",
+          "    <button class=\"retweet-btn\">Retweet</button>",
+          "    <button class=\"like-btn\">Like</button>",
+          "  </div>",
+          "</footer>"
+      ],
+      "tests": [
+        "assert($('.follow-btn').css('align-items') == 'center', 'message: The <code>.follow-btn</code> element should have the <code>align-items</code> property set to a value of center.');",
+        "assert($('h3').css('align-items') == 'center', 'message: The <code>h3</code> element should have the <code>align-items</code> property set to a value of center.');",
+        "assert($('h4').css('align-items') == 'center', 'message: The <code>h4</code> element should have the <code>align-items</code> property set to a value of center.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78ad367417b2b2512afa",
+      "title": "Using the Flex-wrap Property to Wrap a Row or Column",
+      "description": [
+        "CSS flexbox has a feature to split a flex item into multiple rows (or columns). By default, a flex container will fit all flex items together. For example, a row will all be on one line.",
+        "However, using the <code>flex-wrap</code> property, it tells CSS to wrap items. This means extra items move into a new row or column. The break point of where the wrapping happens depends on the size of the items and the size of the container.",
+        "CSS also has options for the direction of the wrap:",
+        "<ul>",
+        "<li><code>nowrap</code>: this is the default setting, and does not wrap items.</li>",
+        "<li><code>wrap</code>: wraps items from left-to-right if they are in a row, or top-to-bottom if they are in a column.</li>",
+        "<li><code>wrap-reverse</code>: wraps items from right-to-left if they are in a row, or bottom-to-top if they are in a column.</li>",
+        "</ul>",
+        "<h4>Instructions</h4>",
+        "The current layout has too many boxes for one row. Add the CSS property <code>flex-wrap</code> to the <code>#box-container</code> element, and give it a value of wrap."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  #box-container {",
+        "    background: gray;",
+        "    display: flex;",
+        "    ",
+        "    height: 500px;",
+        "  }",
+        "  #box-1 {",
+        "    background-color: dodgerblue;",
+        "    width: 200px;",
+        "    height: 200px;",
+        "  }",
+        "",
+        "  #box-2 {",
+        "    background-color: orangered;",
+        "    width: 200px;",
+        "    height: 200px;",
+        "  }",
+        "  #box-3 {",
+        "    background-color: violet;",
+        "    width: 200px;",
+        "    height: 200px;",
+        "  }",
+        "  #box-4 {",
+        "    background-color: yellow;",
+        "    width: 200px;",
+        "    height: 200px;",
+        "  }",
+        "  #box-5 {",
+        "    background-color: green;",
+        "    width: 200px;",
+        "    height: 200px;",
+        "  }",
+        "  #box-6 {",
+        "    background-color: black;",
+        "    width: 200px;",
+        "    height: 200px;",
+        "  }",
+        "</style>",
+        "",
+        "<div id=\"box-container\">",
+        "  <div id=\"box-1\"></div>",
+        "  <div id=\"box-2\"></div>",
+        "  <div id=\"box-3\"></div>",
+        "  <div id=\"box-4\"></div>",
+        "  <div id=\"box-5\"></div>",
+        "  <div id=\"box-6\"></div>",
+        "</div>"
+      ],
+      "tests": [
+          "assert($('#box-container').css('flex-wrap') == 'wrap', 'message: The <code>#box-container</code> element should have the <code>flex-wrap</code> property set to a value of wrap.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78ad367417b2b2512afb",
+      "title": "Using the Flex-shrink Property to Shrink Items",
+      "description": [
+        "So far, all the properties in the challenges apply to the flex container (the parent of the flex items). However, there are several useful properties for the flex items.",
+        "The first is the <code>flex-shrink</code> property. When it's used, it allows an item to shrink if the flex container is too small. Items shrink when the width of the parent container is smaller than the combined widths of all the flex items within it.",
+        "The <code>flex-shrink</code> property takes numbers as values. The higher the number, the more it will shrink compared to the other items in the container. For example, if one item has a <code>flex-shrink</code> value of 1 and the other has a <code>flex-shrink</code> value of 3, the one with the value of 3 will shrink three times as much as the other.",
+        "<h4>Instructions</h4>",
+        "Add the CSS property <code>flex-shrink</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> a value of 1 and <code>#box-2</code> a value of 2."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  #box-container {",
+        "    display: flex;",
+        "    height: 500px;",
+        "  }",
+        "  #box-1 {",
+        "    background-color: dodgerblue;",
+        "    width: 100%;",
+        "    height: 200px;",
+        "    ",
+        "  }",
+        "",
+        "  #box-2 {",
+        "    background-color: orangered;",
+        "    width: 100%;",
+        "    height: 200px;",
+        "    ",
+        "  }",
+        "</style>",
+        "",
+        "<div id=\"box-container\">",
+        "  <div id=\"box-1\"></div>",
+        "  <div id=\"box-2\"></div>",
+        "</div>"
+      ],
+      "tests": [
+          "assert($('#box-1').css('flex-shrink') == '1', 'message: The <code>#box-1</code> element should have the <code>flex-shrink</code> property set to a value of 1.');",
+          "assert($('#box-2').css('flex-shrink') == '2', 'message: The <code>#box-2</code> element should have the <code>flex-shrink</code> property set to a value of 2.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78ae367417b2b2512afc",
+      "title": "Using the Flex-grow Property to Expand Items",
+      "description": [
+        "The opposite of <code>flex-shrink</code> is the <code>flex-grow</code> property. Recall that <code>flex-shrink</code> controls the size of the items when the container shrinks. The <code>flex-grow</code> property controls the size of items when the parent container expands.",
+        "Using a similar example from the last challenge, if one item has a <code>flex-grow</code> value of 1 and the other has a <code>flex-grow</code> value of 3, the one with the value of 3 will grow three times as much as the other.",
+        "<h4>Instructions</h4>",
+        "Add the CSS property <code>flex-grow</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> a value of 1 and <code>#box-2</code> a value of 2."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  #box-container {",
+        "    display: flex;",
+        "    height: 500px;",
+        "  }",
+        "  #box-1 {",
+        "    background-color: dodgerblue;",
+        "    flex-basis: 10em; /* See next challenge! */",
+        "    height: 200px;",
+        "    ",
+        "  }",
+        "",
+        "  #box-2 {",
+        "    background-color: orangered;",
+        "    flex-basis: 10em; /* See next challenge! */",
+        "    height: 200px;",
+        "    ",
+        "  }",
+        "</style>",
+        "",
+        "<div id=\"box-container\">",
+        "  <div id=\"box-1\"></div>",
+        "  <div id=\"box-2\"></div>",
+        "</div>"
+      ],
+      "tests": [
+          "assert($('#box-1').css('flex-grow') == '1', 'message: The <code>#box-1</code> element should have the <code>flex-grow</code> property set to a value of 1.');",
+          "assert($('#box-2').css('flex-grow') == '2', 'message: The <code>#box-2</code> element should have the <code>flex-grow</code> property set to a value of 2.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78ae367417b2b2512afd",
+      "title": "Using the Flex-basis Property to Set the Initial Size of an Item",
+      "description": [
+        "The previous example included <code>flex-basis</code> to help demonstrate how the <code>flex-grow</code> property works. The <code>flex-basis</code> property specifies the initial size of the item before CSS makes adjustments with <code>flex-shrink</code> or <code>flex-grow</code>.",
+        "The units used by the <code>flex-basis</code> property are the same as other size properties (<code>px</code>, <code>em</code>, <code>%</code>, etc.). The value <code>auto</code> sizes items based on the content.",
+        "<h4>Instructions</h4>",
+        "Set the initial size of the boxes using <code>flex-basis</code>. Add the CSS property <code>flex-basis</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> a value of 10em and <code>#box-2</code> a value of 20em."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  #box-container {",
+        "    display: flex;",
+        "    height: 500px;",
+        "  }",
+        "  #box-1 {",
+        "    background-color: dodgerblue;",
+        "    ",
+        "    height: 200px;",
+        "  }",
+        "",
+        "  #box-2 {",
+        "    background-color: orangered;",
+        "    ",
+        "    height: 200px;",
+        "  }",
+        "</style>",
+        "",
+        "<div id=\"box-container\">",
+        "  <div id=\"box-1\"></div>",
+        "  <div id=\"box-2\"></div>",
+        "</div>"
+      ],
+      "tests": [
+          "assert($('#box-1').css('flex-basis') != 'auto', 'message: The <code>#box-1</code> element should have a <code>flex-basis</code> property.');",
+          "assert(code.match(/#box-1\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-basis:\\s*?10em;/g), 'message: The <code>#box-1</code> element should have a <code>flex-basis</code> value of 10em.');",
+          "assert($('#box-2').css('flex-basis') != 'auto', 'message: The <code>#box-2</code> element should have the <code>flex-basis</code> property.');",
+          "assert(code.match(/#box-2\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-basis:\\s*?20em;/g), 'message: The <code>#box-2</code> element should have a <code>flex-basis</code> value of 20em.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78ae367417b2b2512afe",
+      "title": "Using the Flex Shorthand Property",
+      "description": [
+        "There is a shortcut available to set several flex properties at once. The <code>flex-grow</code>, <code>flex-shrink</code>, and <code>flex-basis</code> properties can all be set together by using the <code>flex</code> property.",
+        "For example, <code>flex: 1 0 10px;</code> will set the item to <code>flex-grow: 1;</code>, <code>flex-shrink: 0;</code>, and <code>flex-basis: 10px;</code>.",
+        "The default property settings are <code>flex: 0 1 auto;</code>.",
+        "<h4>Instructions</h4>",
+        "Add the CSS property <code>flex</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> the values so its <code>flex-grow</code> is 2, its <code>flex-shrink</code> is 2, and its <code>flex-basis</code> is 150px. Give <code>#box-2</code> the values so its <code>flex-grow</code> is 1, its <code>flex-shrink</code> is 1, and its <code>flex-basis</code> is 150px.",
+        "These values will cause <code>#box-1</code> to be twice the size of <code>#box-2</code> when the container is greater than 300px and half the size of #box-2 when the container is less than 300px. 300px is the combined size of the <code>flex-basis</code> values of the two boxes."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  #box-container {",
+        "    display: flex;",
+        "    height: 500px;",
+        "  }",
+        "  #box-1 {",
+        "    background-color: dodgerblue;",
+        "    ",
+        "    height: 200px;",
+        "  }",
+        "",
+        "  #box-2 {",
+        "    background-color: orangered;",
+        "    ",
+        "    height: 200px;",
+        "  }",
+        "</style>",
+        "",
+        "<div id=\"box-container\">",
+        "  <div id=\"box-1\"></div>",
+        "  <div id=\"box-2\"></div>",
+        "</div>"
+      ],
+      "tests": [
+          "assert($('#box-1').css('flex-grow') == '2' && $('#box-1').css('flex-shrink') == '2' && $('#box-1').css('flex-basis') == '150px', 'message: The <code>#box-1</code> element should have the <code>flex</code> property set to a value of 2 2 150px.');",
+          "assert($('#box-2').css('flex-grow') == '1' && $('#box-2').css('flex-shrink') == '1' && $('#box-2').css('flex-basis') == '150px', 'message: The <code>#box-2</code> element should have the <code>flex</code> property set to a value of 1 1 150px.');",
+          "assert(code.match(/flex:\\s*?\\d\\s+?\\d\\s+?150px;/g).length == 2, 'message: Your code should use the <code>flex</code> property for <code>#box-1</code> and <code>#box-2</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78ae367417b2b2512aff",
+      "title": "Using the Order Property to Rearrange Items",
+      "description": [
+        "The <code>order</code> property is used to tell CSS the order of how flex items appear in the flex container. By default, items will appear in the same order they come in the source HTML. The property takes numbers as values, and negative numbers can be used.",
+        "<h4>Instructions</h4>",
+        "Add the CSS property <code>order</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> a value of 2 and give <code>#box-2</code> a value of 1."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  #box-container {",
+        "    display: flex;",
+        "    height: 500px;",
+        "  }",
+        "  #box-1 {",
+        "    background-color: dodgerblue;",
+        "    ",
+        "    height: 200px;",
+        "    width: 200px;",
+        "  }",
+        "",
+        "  #box-2 {",
+        "    background-color: orangered;",
+        "    ",
+        "    height: 200px;",
+        "    width: 200px;",
+        "  }",
+        "</style>",
+        "",
+        "<div id=\"box-container\">",
+        "  <div id=\"box-1\"></div>",
+        "  <div id=\"box-2\"></div>",
+        "</div>"
+      ],
+      "tests": [
+          "assert($('#box-1').css('order') == '2', 'message: The <code>#box-1</code> element should have the <code>order</code> property set to a value of 2.');",
+          "assert($('#box-2').css('order') == '1', 'message: The <code>#box-2</code> element should have the <code>order</code> property set to a value of 1.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78af367417b2b2512b00",
+      "title": "Using the Align-self Property",
+      "description": [
+        "The final property for flex items is <code>align-self</code>. This property allows you to adjust each item's alignment individually, instead of setting them all at once. This is useful since other common adjustment techniques using the CSS properties <code>float</code>, <code>clear</code>, and <code>vertical-align</code> do not work on flex items.",
+        "<code>align-self</code> accepts the same values as <code>align-items</code> and will override any value set by the <code>align-items</code> property.",
+        "<h4>Instructions</h4>",
+        "Add the CSS property <code>align-self</code> to both <code>#box-1</code> and <code>#box-2</code>. Give <code>#box-1</code> a value of center and give <code>#box-2</code> a value of flex-end."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  #box-container {",
+        "    display: flex;",
+        "    height: 500px;",
+        "  }",
+        "  #box-1 {",
+        "    background-color: dodgerblue;",
+        "    ",
+        "    height: 200px;",
+        "    width: 200px;",
+        "  }",
+        "",
+        "  #box-2 {",
+        "    background-color: orangered;",
+        "    ",
+        "    height: 200px;",
+        "    width: 200px;",
+        "  }",
+        "</style>",
+        "",
+        "<div id=\"box-container\">",
+        "  <div id=\"box-1\"></div>",
+        "  <div id=\"box-2\"></div>",
+        "</div>"
+      ],
+      "tests": [
+          "assert($('#box-1').css('align-self') == 'center', 'message: The <code>#box-1</code> element should have the <code>align-self</code> property set to a value of center.');",
+          "assert($('#box-2').css('align-self') == 'flex-end', 'message: The <code>#box-2</code> element should have the <code>align-self</code> property set to a value of flex-end.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    }
+  ]
+}
diff --git a/seed/challenges/01-responsive-web-design/responsive-web-design-projects.json b/seed/challenges/01-responsive-web-design/responsive-web-design-projects.json
new file mode 100644
index 00000000000000..c746a15a2a9435
--- /dev/null
+++ b/seed/challenges/01-responsive-web-design/responsive-web-design-projects.json
@@ -0,0 +1,346 @@
+{
+  "name": "Applied Responsive Web Design Projects",
+  "order": 6,
+  "time": "150 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "587d78af367417b2b2512b02",
+      "title": "Get Set for our Responsive Web Design Projects",
+      "description": [
+        [
+          "//i.imgur.com/OAD6SJz.png",
+          "An image of a Simon game, one our front end projects.",
+          "Our front end development projects will give you a chance to apply the front end skills you've developed up to this point. We'll use a popular browser-based code editor called CodePen.",
+          ""
+        ],
+        [
+          "//i.imgur.com/WBetuBa.jpg",
+          "A programmer punching through his laptop screen in frustration.",
+          "These projects are hard. It takes most campers several days to build each project. You will get frustrated. But don't quit. This gets easier with practice.",
+          ""
+        ],
+        [
+          "//i.imgur.com/p2TpOQd.jpg",
+          "A cute dog jumping over a hurdle and winking and pointing his paw at you.",
+          "When you get stuck, just use the Read-Search-Ask methodology. Don't worry - you've got this.",
+          ""
+        ],
+        [
+          "//i.imgur.com/G1saeDt.gif",
+          "A gif showing how to create a Codepen account.",
+          "For our front end project challenges, we'll use a popular browser-based code editor called CodePen. Click the \"Open link in new tab\" button below to open CodePen's signup page. Fill out the form and click \"Sign up\". <br><div class=\"small\">Note: If you already have a CodePen account, you can skip this step by clicking \"Open link in new tab\", closing the new tab that opens, then clicking \"go to my next step\". We removed our \"skip step\" button because many people would just click it repeatedly without doing these important steps.</div>",
+          "https://codepen.io/signup/free"
+        ],
+        [
+          "//i.imgur.com/U4y9RJ1.gif",
+          "A gif showing that you can type \"hello world\" will output \"hello world\" in the preview window. You can also drag windows to resize them, and change their orientation.",
+          "In the HTML box, create an <code>h1</code> element with the text \"Hello World\". You can drag the frames around to resize them. You can also click the \"Change View\" button and change the orientation of the frames.",
+          ""
+        ],
+        [
+          "//i.imgur.com/G9KFQDL.gif",
+          "A gif showing the process of adding Bootstrap to your pen.",
+          "Click the gear in the upper left hand corner of the CSS box, then scroll down to \"Quick add\" and choose Bootstrap. Now give your <code>h1</code> element the class of <code>text-primary</code> to change its color and prove that Bootstrap is now available.",
+          ""
+        ],
+        [
+          "//i.imgur.com/m0pWik2.gif",
+          "A gif showing the process of turning off auto update preview",
+          "When using CodePen and Ajax, it is a good idea to turn off automatic preview updating so API calls are not made too often. Too many API calls can sometimes lead to temporary blockages, and may require waiting periods before they can be used again. <br> <div class=\"small\"> To disable automatic preview updating click the \"Settings\" button at the top of the page, then click the \"Behavior\" tab. At the bottom of the page, un-check \"AUTO UPDATE PREVIEW\". Now press \"Run\" at the top of the page to update the preview, and click \"Save\".</div>",
+          ""
+        ]
+      ],
+      "challengeSeed": [],
+      "tests": [],
+      "type": "Waypoint",
+      "isRequired": false,
+      "challengeType": 7,
+      "translations": {
+        "es": {
+          "title": "Prepárate para los Proyectos de Desarrollo de Interfaces",
+          "description": [
+            [
+              "//i.imgur.com/OAD6SJz.png",
+              "Una imagen del juego Simón, uno de nuestros proyectos de interfaz.",
+              "Nuestros proyectos de desarrollo de interfaces te darán oportunidad de aplicar las habilidades con interfaces que has desarrollado hasta este momento.  Usaremos un editor de código basado en el navegador llamado CodePen.",
+              ""
+            ],
+            [
+              "//i.imgur.com/WBetuBa.jpg",
+              "Un programador frustado golpeando la pantalla de su computador.",
+              "Nuestros desafíos sobre algoritmos son difíciles.  Algunos pueden requerir muchas horas para resolverse.  Podrás frustarte, pero no te rindas. Se vuelve fácil con práctica.",
+              ""
+            ],
+            [
+              "//i.imgur.com/p2TpOQd.jpg",
+              "Un tierno perro que salta sobre un obstáculo, pica el ojo y te apunta con su pata.",
+              "Cuando te atasques, usa la metodología Leer-Buscar-Preguntar. No te preocupes -  lo tienes resuelto.",
+              ""
+            ],
+            [
+              "//i.imgur.com/G1saeDt.gif",
+              "Un gif que muestra cómo crear una cuenta en Codepen.",
+              "Para nuestros desafíos de interfaces, usaremos un editor de código basado en el navegador que es muy famoso llamado Codepen. Pulsa en el botón de abajo \"Open link in new tab\" para abrir la página de registro de CodePen. Rellena el formulario y pulsa \"Sign up\". <br><div class=\"small\">Nota: Si ya tienes una cuenta de CodePen, puedes omitir este paso pulsando \"Open link in new tab\", cierra la nueva pestaña que se abre, entonces pulsa \"go to my next step\". Eliminamos nuestro botón \"skip step\" porque mucha gente solamente pulsa el botón sin realizar estos importantes pasos.</div>",
+              "https://codepen.io/signup/free"
+            ],
+            [
+              "//i.imgur.com/U4y9RJ1.gif",
+              "Un gif que muestra que puedes escribir \"hello world\" en el editor, lo cual escribirá \"hello world\" en la ventana de vista previa. También puedes mover las ventanas para cambiar su tamaño, y cambiar su orientación.",
+              "En la ventana de HTML, crea un elemento h1 con el texto \"Hola mundo\". Puedes arrastrar los bordes de las ventanas para cambiar su tamaño. También puedes pulsar el botón de \"Change View\" para cambiar la orientación de las ventanas.",
+              ""
+            ],
+            [
+              "//i.imgur.com/G9KFQDL.gif",
+              "Un gif que muestra el proceso de agregar Bootstrap a tu proyecto.",
+              "Pulsa el engrane en la esquina superior izquierda de la ventana de CSS, luego ve hacia abajo hasta donde dice \"Quick add\" y elige Bootstrap. Ahora dale a tu elemento h1 la clase \"text-primary\" para cambiar su color y verificar que Bootstrap está activado.",
+              ""
+            ]
+          ]
+        },
+        "pt-br": {
+          "title": "Prepare-se para nossos Projetos de Desenvolvimento Front End",
+          "description": [
+            [
+              "//i.imgur.com/OAD6SJz.png",
+              "A imagem de um jogo Simon, um de nossos projetos front end.",
+              "Nossos projetos de Desenvolvimento front end vão dar a você a chance de aplicar as habilidades front end que você desenvolveu até esse ponto. Nós vamos usar um editor popular chamado CodePen que funciona direto no navegador.",
+              ""
+            ],
+            [
+              "//i.imgur.com/WBetuBa.jpg",
+              "Um programador atravessando a tela de seu laptop com um soco em frustração.",
+              "Esses projetos são difíceis. A maioria dos campistas leva alguns dias para contruir cada projeto. Você vai ficar frustrado. Mas não desista. Isso fica mais fácil com a prática.",
+              ""
+            ],
+            [
+              "//i.imgur.com/p2TpOQd.jpg",
+              "Um cachorro fofo pulando sobre um obstáculo, piscando e apontando sua pata a você.",
+              "Quando ficar travado, use a metodologia Ler-Buscar-Perguntar. Não se preocupe - você consegue.",
+              ""
+            ],
+            [
+              "//i.imgur.com/G1saeDt.gif",
+              "Um gif mostrando com criar uma conta CodePen.",
+              "Para nossos projetos front end, usaremos um popular editor de código baseado em navegador chamado CodePen. Clique no botão \"Open link in new tab\" abaixo para abrir a página de resgistro do CodePen. Preencha o formulário e clique em \"Sign up\". <br><div class=\"small\">Nota: Se você já tem uma conta CodePen, você pode pular esse passo clicando em \"Open link in new tab\", fechando a nova aba que abrir, e clicando em \"go to my next step\". Nós removemos nosso botão \"skip step\" pois muitas pessoas iam simplesmente clicar nele repetidamente sem passar por esses passos importantes.</div>",
+              "https://codepen.io/signup/free"
+            ],
+            [
+              "//i.imgur.com/U4y9RJ1.gif",
+              "Um gif mostrando que você pode digitar \"hello world\" e será mostrado \"hello world\" na janela de visualização. Você também pode arrastar janelas para redimensioná-las e mudar a orientação das mesmas.",
+              "Na caixa do HTML, crie um elemento <code>h1</code> com o texto \"Hello World\". Você pode arrastar as bordas para redimensioná-las. Você pode também clicar no botão \"Change View\" e mudar a orientação das janelas.",
+              ""
+            ],
+            [
+              "//i.imgur.com/G9KFQDL.gif",
+              "Um gif mostrando como adicionar o Bootstrap à sua pen.",
+              "Clique na engrenagem no canto superior esquerdo da caixa do CSS, então role para baixo até \"Quick add\" e escolha Bootstrap. Agora adicione ao seu elemento <code>h1</code> a classe <code>text-primary</code> para mudar sua cor e provar que o Bootstrap agora está disponível.",
+              ""
+            ],
+            [
+              "//i.imgur.com/m0pWik2.gif",
+              "Um gif mostrando o processo de desativar o update automático da janela de visualização",
+              "Ao usar CodePen e Ajax, é uma boa idea desativar o update automático da janela de visualização para que as chamadas para as APIs não sejam feitas a todo momento. Muitas chamadas para API pode levar à bloqueios temporários e podem requerer períodos de esperar para que possam ser usadas novamente. <br> <div class=\"small\"> Para desativar o update automático da janela de visualização clique no botão \"Settings\" no topo da página, então clique na aba \"Behavior\". No final da página, desmarque \"AUTO UPDATE PREVIEW\". Agora clique em \"Run\" no topo da página para atualizar a janela de visualização e clique \"Save\".</div>",
+              ""
+            ]
+          ]
+        },
+        "ru": {
+          "title": "Приготовьтесь к разработке фронтенд проектов",
+          "description": [
+            [
+              "//i.imgur.com/OAD6SJz.png",
+              "Игра Саймона - один из фронтенд проектов.",
+              "Наши фронтенд проекты дадут вам шанс применить полученные к этому моменту знания по фронтенд разработке. Мы будем использовать популярный браузерный редактор кода - CodePen.",
+              ""
+            ],
+            [
+              "//i.imgur.com/WBetuBa.jpg",
+              "Программист от отчаяния кулаком пробивает экран своего ноутбука.",
+              "Это трудные проекты. Разработка каждого занимает у большинства кэмперов несколько дней. У вас может возникнуть чувство отчаяния. Несмотря на это не сдавайтесь. С практикой этот процесс станет проще.",
+              ""
+            ],
+            [
+              "//i.imgur.com/p2TpOQd.jpg",
+              "Милый пес, прыгающий через препятствие, указывает на вас лапой и подмигивает.",
+              "Если что-то не получается, воспользуйтесь Read-Search-Ask. Не волнуйтесь - вы сможете это сделать.",
+              ""
+            ],
+            [
+              "//i.imgur.com/G1saeDt.gif",
+              "Гифка показывающая как зарегистрироваться на CodePen.",
+              "Для заданий по фронтенд разработке, мы будем использовать популярный браузерный редактор кода под названием CodePen. Откройте страницу регистрации на сайте CodePen, нажав на расположенную чуть ниже кнопку \"Open link in new tab\". Заполните форму и нажмите \"Sign up\". <br><div class=\"small\">Замечание: Если у вас уже есть аккаунт CodePen, то этот шаг можно пропустить: нажмите на кнопку \"Open link in new tab\", закройте появившуюся вкладку и затем кликните \"go to my next step\". Мы убрали кнопку \"skip step\", ввиду того что большинство людей просто нажимали бы ее несколько раз подряд и пропускали бы эти важные инструкции.</div>",
+              "https://codepen.io/signup/free"
+            ],
+            [
+              "//i.imgur.com/U4y9RJ1.gif",
+              "Гифка показывающая набор в редакторе заголовка с текстом \"hello world\", который затем отображается в окошке предпросмотра. А также указывающая как изменить размер окон редактора или поменять их расположение.",
+              "В окошке HTML создайте элемент h1 с текстом \"Hello World\". Ухватив края окон можно изменить их размер. А нажав на кнопку \"Change View\" поменять их расположение.",
+              ""
+            ],
+            [
+              "//i.imgur.com/G9KFQDL.gif",
+              "Гифка показывающая как в CodePen добавить к проекту Bootstrap.",
+              "Нажмите на звездочку в левом верхнем углу окошка CSS, найдите внизу поле \"Quick add\" и выберите в нем Bootstrap. Добавьте к элементу h1 класс \"text-primary\", чтобы изменить его цвет и удостовериться, что Bootstrap подключен.",
+              ""
+            ]
+          ]
+        }
+      }
+    },
+    {
+      "id": "bd7158d8c442eddfaeb5bd18",
+      "title": "Build a Tribute Page",
+      "description": [
+        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "Here's a <a href='http://codepen.io/freeCodeCamp/full/zNqgVx' target='_blank'>working example</a>. Try not to look at its code.",
+        "You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
+        "Once you're done, submit below the URL to your working project with all its tests passing.",
+        "Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
+      ],
+      "releasedOn": "January 1, 2016",
+      "challengeSeed": [
+"Nk0DzQi"
+      ],
+      "tests": [],
+      "type": "zipline",
+      "isRequired": true,
+      "challengeType": 3,
+      "translations": {
+        "es": {
+          "title": "Construye una página Tributo",
+          "description": []
+        },
+        "pt-br": {
+          "title": "Construa uma Página Tributo",
+          "description": []
+        },
+        "ru": {
+          "title": "Создайте страницу посвященную тому что вас вдохновляет",
+          "description": []
+        }
+      }
+    },
+    {
+      "id": "587d78af367417b2b2512b03",
+      "title": "Build a Survey Form",
+      "description": [
+        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "Here's a <a href='http://codepen.io/freeCodeCamp/full/VPaoNP' target='_blank'>working example</a>. Try not to look at its code.",
+        "You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
+        "Once you're done, submit below the URL to your working project with all its tests passing.",
+        "Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
+      ],
+      "releasedOn": "January 15, 2017",
+      "challengeSeed": [
+        "A7Pn5zw"
+      ],
+      "tests": [],
+      "type": "zipline",
+      "isRequired": true,
+      "challengeType": 3,
+      "translations": {
+        "es": {
+          "title": "",
+          "description": []
+        },
+        "ru": {
+          "title": "",
+          "description": []
+        }
+      }
+    },
+    {
+      "id": "587d78af367417b2b2512b04",
+      "title": "Build a Product Landing Page",
+      "description": [
+        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "Here's a <a href='http://codepen.io/freeCodeCamp/pen/RKRbwL' target='_blank'>working example</a>. Try not to look at its code.",
+        "You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
+        "Once you're done, submit below the URL to your working project with all its tests passing.",
+        "Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
+      ],
+      "releasedOn": "January 15, 2017",
+      "challengeSeed": [
+        "ExCJjAT"
+      ],
+      "tests": [],
+      "type": "zipline",
+      "isRequired": true,
+      "challengeType": 3,
+      "translations": {
+        "es": {
+          "title": "",
+          "description": []
+        },
+        "ru": {
+          "title": "",
+          "description": []
+        }
+      }
+    },
+    {
+      "id": "587d78b0367417b2b2512b05",
+      "title": "Build a Technical Documentation Page",
+      "description": [
+        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "Here's a <a href='http://codepen.io/freeCodeCamp/full/NdrKKL' target='_blank'>working example</a>. Try not to look at its code.",
+        "You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
+        "Once you're done, submit below the URL to your working project with all its tests passing.",
+        "Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
+      ],
+      "releasedOn": "January 15, 2017",
+      "challengeSeed": [
+        "cDIfODs"
+      ],
+      "tests": [],
+      "type": "zipline",
+      "isRequired": true,
+      "challengeType": 3,
+      "translations": {
+        "es": {
+          "title": "",
+          "description": []
+        },
+        "ru": {
+          "title": "",
+          "description": []
+        }
+      }
+    },
+    {
+      "id": "587d78b0367417b2b2512b06",
+      "title": "Build a Personal Portfolio Webpage",
+      "description": [
+        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "Here's a <a href='http://codepen.io/freeCodeCamp/full/zNBOYG' target='_blank'>working example</a>. Try not to look at its code.",
+        "You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
+        "Once you're done, submit below the URL to your working project with all its tests passing.",
+        "Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
+      ],
+      "challengeSeed": [
+        "Uw6sYKY"
+      ],
+      "tests": [],
+      "type": "zipline",
+      "isRequired": true,
+      "challengeType": 3,
+      "translations": {
+        "es": {
+          "title": "Construye una página web para tu portafolio",
+          "description": []
+        },
+        "pt-br": {
+          "title": "Construa uma Página de Portfólio Pessoal",
+          "description": [
+          ]
+        },
+        "ru": {
+          "title": "Создайте сайт-портфолио",
+          "description": [
+          ]
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/01-responsive-web-design/responsive-web-design.json b/seed/challenges/01-responsive-web-design/responsive-web-design.json
new file mode 100644
index 00000000000000..7da9b1abb2df44
--- /dev/null
+++ b/seed/challenges/01-responsive-web-design/responsive-web-design.json
@@ -0,0 +1,243 @@
+{
+  "name": "Responsive Web Design",
+  "order": 4,
+  "time": "5 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "587d78b0367417b2b2512b07",
+      "title": "Introduction to the Responsive Web Design Challenges",
+      "description": [
+        [
+          "",
+          "",
+          "Today, there are many types of devices that can access the web. They range from large desktop computers to small mobile phones. These devices have different screen sizes, resolutions, and processing power.",
+          ""
+        ],
+        [
+          "",
+          "",
+          "Responsive Web Design is an approach to designing web content that responds to the constraints of different devices. The page structure and CSS rules should be flexible to accommodate these differences.",
+          ""
+        ],
+        [
+          "",
+          "",
+          "In general, design the page's CSS to your target audience. If you expect most of your traffic to be from mobile users, take a 'mobile-first' approach. Then add conditional rules for larger screen sizes. If your visitors are desktop users, then design for larger screens with conditional rules for smaller sizes.",
+          ""
+        ],
+        [
+          "",
+          "",
+          "CSS gives you the tools to write different style rules, then apply them depending on the device displaying the page. This section will cover the basic ways to use CSS for Responsive Web Design.",
+          ""
+        ]
+      ],
+      "releasedOn": "",
+      "challengeSeed": [],
+      "tests": [],
+      "type": "Waypoint",
+      "challengeType": 7,
+      "isRequired": false,
+      "titleEs": "",
+      "descriptionEs": [
+        []
+      ],
+      "titleFr": "",
+      "descriptionFr": [
+        []
+      ],
+      "titleDe": "",
+      "descriptionDe": [
+        []
+      ]
+    },
+    {
+      "id": "587d78b0367417b2b2512b08",
+      "title": "Create a Media Query",
+      "description": [
+        "Media Queries are a new technique introduced in CSS3 that change the presentation of content based on different viewport sizes. The viewport is a user's visible area of a web page, and is different depending on the device used to access the site.",
+        "Media Queries consist of a media type, and if that media type matches the type of device the document is displayed on, the styles are applied. You can have as many selectors and styles inside your media query as you want.",
+        "Here's an example of a media query that returns the content when the device's width is smaller than 100px:",
+        "<code>@media (max-width: 100px) { /* CSS Rules */ }</code>",
+        "Remember, the CSS inside the media query is applied only if the media type matches that of the device being used.",
+        "<h4>Instructions</h4>",
+        "Add a media query, so that the <code>p</code> tag has a <code>font-size</code> of 10px when the device's height is smaller than 800px."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  ",
+        "</style>",
+        "",
+        "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>"
+      ],
+      "tests": [
+        "assert($('p').css('font-size') == '10px', 'message: Your <code>p</code> tag should have the <code>font-size</code> of 10px when the device <code>height</code> is smaller than 800px.');",
+        "assert(code.match(/@media \\(max-height:\\s*?800px\\)/g), 'message: Declare an <code>@media</code> query for devices with <code>height</code> less than 800px.');"
+      ],
+      "type": "waypoint",
+      "solution": [],
+      "hints": [],
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78b1367417b2b2512b09",
+      "title": "Make an Image Responsive",
+      "description": [
+        "Making images responsive with CSS is actually very simple. Instead of applying an absolute width to an element:",
+        "<code>img { width: 720px; }</code>",
+        "You can use:",
+        "<blockquote>img {<br>  max-width: 100%;<br>  display: block;<br>  height: auto;<br>}</blockquote>",
+        "The <code>max-width</code> property of 100% scales the image to fit the width of its container, but the image won't stretch wider than its original width. Setting the <code>display</code> property to block changes the image from an inline element (its default), to a block element on its own line. The <code>height</code> property of auto keeps the original aspect ratio of the image.",
+        "<h4>Instructions</h4>",
+        "Add style rules for the <code>img</code> tag to make it responsive to the size of its container. It should display as a block-level element, it should fit the full width of its container without stretching, and it should keep its original aspect ratio."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  ",
+        "</style>",
+        "",
+        "<img src=\"https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg\" alt=\"Free Code Camp stickers set\">"
+      ],
+      "tests": [
+        "assert(code.match(/max-width:\\s*?100%;/g), 'message: Your <code>img</code> tag should have a <code>max-width</code> set to 100%.');",
+        "assert($('img').css('display') == 'block', 'message: Your <code>img</code> tag should have a <code>display</code> set to block.');",
+        "assert(code.match(/height:\\s*?auto;/g), 'message: Your <code>img</code> tag should have a <code>height</code> set to auto.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "solutions": [],
+      "hints": [],
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78b1367417b2b2512b0a",
+      "title": "Use a Retina Image for Higher Resolution Displays",
+      "description": [
+        "The simplest way to make your images appear \"retina\" (and optimize them for retina displays) is to define their <code>width</code> and <code>height</code> values as only half of what the original file is.",
+        "Here is an example of an image that is only using half of the original height and width:",
+        "<blockquote>&lt;style&gt;<br>  img { height: 250px; width: 250px; }<br>&lt;/style&gt;<br>&lt;img src=&quot;coolPic500x500&quot; alt=&quot;A most excellent picture&quot;&gt;</blockquote>",
+        "<h4>Instructions</h4>",
+        "Set the <code>width</code> and <code>height</code> of the <code>img</code> tag to half of their original values. In this case, both the original <code>height</code> and the original <code>width</code> are 200px."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  ",
+        "</style>",
+        "",
+        "<img src=\"https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg\" alt=\"Free Code Camp sticker that says 'Because CamperBot Cares'\">"
+      ],
+      "tests": [
+        "assert($('img').css('width') == '100px', 'message: Your <code>img</code> tag should have a <code>width</code> of 100 pixels.');",
+        "assert($('img').css('height') == '100px', 'message: Your <code>img</code> tag should have a <code>height</code> of 100 pixels.');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "solutions": [],
+      "hints": [],
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d78b1367417b2b2512b0c",
+      "title": "Make Typography Responsive",
+      "description": [
+        "Instead of using <code>em</code> or <code>px</code> to size text, you can use viewport units for responsive typography. Viewport units, like percentages, are relative units, but they are based off different items. Viewport units are relative to the viewport dimensions (width or height) of a device, and percentages are relative to the size of the parent container element.",
+        "The four different viewport units are:",
+        "<ul>",
+        "<li><code>vw: 10vw</code> would be 10% of the viewport's width.</li>",
+        "<li><code>vh: 3vh</code> would be 3% of the viewport's height.</li>",
+        "<li><code>vmin: 70vmin</code> would be 70% of the viewport's smaller dimension (height vs. width).</li>",
+        "<li><code>vmax: 100vmax</code> would be 100% of the viewport's bigger dimension (height vs. width).</li>",
+        "</ul>",
+        "<h4>Instructions</h4>",
+        "Set the <code>width</code> of the <code>h2</code> tag to 80% of the viewport's width and the <code>width</code> of the paragraph as 75% of the viewport's smaller dimension."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  ",
+        "</style>",
+        "",
+        "<h2>Importantus Ipsum</h2>",
+        "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>"
+      ],
+      "tests": [
+        "assert(code.match(/h2\\s*?{\\s*?width:\\s*?80vw;\\s*?}/g), 'message: Your <code>h2</code> tag should have a <code>width</code> of 80vw.');",
+        "assert(code.match(/p\\s*?{\\s*?width:\\s*?75vmin;\\s*?}/g), 'message: Your <code>p</code> tag should have a <code>width</code> of 75vmin.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "hints": [],
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/02-data-visualization-certification/d3.json b/seed/challenges/02-data-visualization-certification/d3.json
deleted file mode 100644
index 42c97bf4c5df58..00000000000000
--- a/seed/challenges/02-data-visualization-certification/d3.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "D3",
-  "order": 16,
-  "isComingSoon": true,
-  "time": "5 hours",
-  "helpRoom": "HelpDataViz",
-  "challenges": [
-    {
-      "id": "bd7158d8c423ede2aab5bdee",
-      "title": "Learn D3 Challenges",
-      "description": [],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "waypoint",
-      "challengeType": 3,
-      "translations": {
-        "es": {
-          "title": "Desafios para aprender D3"
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/02-data-visualization-certification/data-visualization-certificate.json b/seed/challenges/02-data-visualization-certification/data-visualization-certificate.json
deleted file mode 100644
index 1c6c2a01fde63b..00000000000000
--- a/seed/challenges/02-data-visualization-certification/data-visualization-certificate.json
+++ /dev/null
@@ -1,157 +0,0 @@
-{
-  "name": "Claim Your Data Visualization Certificate",
-  "order": 18,
-  "time": "5 minutes",
-  "challenges": [
-    {
-      "id": "561add10cb82ac38a17513b3",
-      "title": "Claim Your Data Visualization Certificate",
-      "description": [
-        [
-          "//i.imgur.com/Et3iD74.jpg",
-          "An image of our Data Visualization Certificate",
-          "This challenge will give you your verified Data Visualization Certificate. Before we issue your certificate, we must verify that you have completed all of our React and D3.js projects. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
-          ""
-        ],
-        [
-          "//i.imgur.com/woACUFX.png",
-          "The definition of plagiarism: Plagiarism (noun) - copying someone else’s work and presenting it as your own without crediting them",
-          "By clicking below, you pledge that all of your submitted code A) is code you or your pair personally wrote, or B) comes from open source libraries like jQuery, or C) has been clearly attributed to its original authors. You also give us permission to audit your challenge solutions and revoke your certificate if we discover evidence of plagiarism.",
-          "#"
-        ],
-        [
-          "//i.imgur.com/nTuA3rZ.png",
-          "An image of the text \"Data Visualization Certificate requirements\"",
-          "Let's confirm that you have completed our React and D3.js projects. Click the button below to verify this.",
-          "#"
-        ],
-        [
-          "//i.imgur.com/3Is4oV0.png",
-          "An image of the word \"Congratulations!\"",
-          "Congratulations! We've added your Data Visualization Certificate to your portfolio page. Unless you choose to hide your solutions, this certificate will remain publicly visible and verifiable.",
-          ""
-        ]
-      ],
-      "challengeSeed": [
-        {
-          "properties": [
-            "isHonest",
-            "isDataVisualizationCert"
-          ],
-          "apis": [
-            "/certificate/honest",
-            "/certificate/verify/data-visualization"
-          ],
-          "stepIndex": [
-            1,
-            2
-          ]
-        }
-      ],
-      "tests": [
-        {
-          "id": "bd7157d8c242eddfaeb5bd13",
-          "title": "Build a Markdown Previewer"
-        },
-        {
-          "id": "bd7156d8c242eddfaeb5bd13",
-          "title": "Build a Camper Leaderboard"
-        },
-        {
-          "id": "bd7155d8c242eddfaeb5bd13",
-          "title": "Build a Recipe Box"
-        },
-        {
-          "id": "bd7154d8c242eddfaeb5bd13",
-          "title": "Build the Game of Life"
-        },
-        {
-          "id": "bd7153d8c242eddfaeb5bd13",
-          "title": "Build a Roguelike Dungeon Crawler Game"
-        },
-        {
-          "id": "bd7168d8c242eddfaeb5bd13",
-          "title": "Visualize Data with a Bar Chart"
-        },
-        {
-          "id": "bd7178d8c242eddfaeb5bd13",
-          "title": "Visualize Data with a Scatterplot Graph"
-        },
-        {
-          "id": "bd7188d8c242eddfaeb5bd13",
-          "title": "Visualize Data with a Heat Map"
-        },
-        {
-          "id": "bd7198d8c242eddfaeb5bd13",
-          "title": "Show National Contiguity with a Force Directed Graph"
-        },
-        {
-          "id": "bd7108d8c242eddfaeb5bd13",
-          "title": "Map Data Across the Globe"
-        }
-      ],
-      "type": "Waypoint",
-      "challengeType": 7,
-      "translations": {
-        "es": {
-          "title": "Reclama tu certificado de Visualización de datos",
-          "description": [
-            [
-              "//i.imgur.com/Et3iD74.jpg",
-              "Una imagen que muestra nuestro certificado de Visualización de datos",
-              "Este desafío te otorga tu certificado autenticado de Visualización de datos. Antes de que podamos emitir tu certificado, debemos verificar que has completado todos los proyectos con React y D3.js. También debes aceptar nuestro Juramento de honestidad académica. Pulsa el botón siguiente para iniciar este proceso.",
-              ""
-            ],
-            [
-              "//i.imgur.com/swuEma9.png",
-              "Plagio (nombre): acción y efecto de plagiar. Plagiar (verbo) - copiar en lo sustancial obras ajenas, dándolas como propias.",
-              "Al pulsar el botón siguiente, juras que todo el código en tus soluciones a los desafíos A) es código que tú o tu compañero escribieron personalmente, o B) proviene de librerías de código abierto como jQuery, o C) ha sido claramente atribuido a sus autores originales. También nos otorgas el permiso para auditar tus soluciones a los desafíos y revocar tu certificado si encontramos evidencia de plagio.",
-              "#"
-            ],
-            [
-              "//i.imgur.com/6b50POD.png",
-              "Una imagen del texto \"Los requisitos de Certificación de Visualización de datos\"",
-              "Confirmemos que has completado todos nuestros proyectos en React y D3.js. Pulsa el botón siguiente para hacer la verificación.",
-              "#"
-            ],
-            [
-              "//i.imgur.com/PnFG11N.png",
-              "Una imagen de la palabra \"Felicitaciones!\"",
-              "¡Felicitaciones! Hemos agregado tu certificado de Visualización de datos a tu portafolio. A menos que elijas no mostrar tus soluciones, este certificado será públicamente visible y verificable.",
-              ""
-            ]
-          ]
-        },
-        "fr": {
-          "title": "Réclamer votre Certificat de Visualisation de données",
-          "description": [
-            [
-              "//i.imgur.com/Et3iD74.jpg",
-              "Une image de note Certificat de Visualisation de données",
-              "Ce défi vous permettra d’avoir votre Certificat de Visualisation de données vérifiée. Avant de vous donner votre certificat, il faut s’assurer que vous avez bien accomplie tous les projets de React et D3.js et il faut que vous acceptiez notre Academic Honesty Pledge. Cliquez sur le bouton si dessous pour démarrer le processus.",
-              ""
-            ],
-            [
-              "//i.imgur.com/iFL1xR1.png",
-              "Une définition du plagiat : Plagiat (nom) – copier le travail d’un autre et le présenter comme étant le tien, sans mention de l’auteur original",
-              "En cliquant si dessous, je garantie que tout le code que j’ai présenté A) est mon propre code ou celui de mon collaborateur, B) vient d’un projet open-source comme jQuery, ou C) contient les mentions nécessaires des auteurs. Vous nous donnez aussi la permission de vérifier vos solutions et de révoquer votre certificat en cas de détection de plagiat.",
-              "#"
-            ],
-            [
-              "//i.imgur.com/0GZ0KHa.png",
-              "Une image du texte \"Les exigences de certification de visualisation de données\"",
-              "On va confirmer maintenant que vous avez bien terminé nos projets de React et D3.js. Cliquez sur le bouton si dessous pour vérifier cela.",
-              "#"
-            ],
-            [
-              "//i.imgur.com/EJXMNIQ.png",
-              "Une image du mot \"Félicitations à vous!\"",
-              "Félicitations! On vient d’ajouter votre Certificat de Visualisation de données à votre profile. Cette certificat est public et vérifiable, mais vous pouvez le cacher si vous désirer.",
-              ""
-            ]
-          ]
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/02-data-visualization-certification/data-visualization-projects.json b/seed/challenges/02-data-visualization-certification/data-visualization-projects.json
deleted file mode 100644
index 311f2e9921fda0..00000000000000
--- a/seed/challenges/02-data-visualization-certification/data-visualization-projects.json
+++ /dev/null
@@ -1,211 +0,0 @@
-{
-  "name": "Data Visualization Projects",
-  "order": 17,
-  "time": "200 hours",
-  "helpRoom": "HelpDataViz",
-  "challenges": [
-    {
-      "id": "bd7168d8c242eddfaeb5bd13",
-      "title": "Visualize Data with a Bar Chart",
-      "description": [
-        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/vGjLVZ' target='_blank'>https://codepen.io/freeCodeCamp/full/vGjLVZ</a>.",
-        "Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
-        "<strong>User Story:</strong> I can see US Gross Domestic Product by quarter, over time.",
-        "<strong>User Story:</strong> I can mouse over a bar and see a tooltip with the GDP amount and exact year and month that bar represents.",
-        "<strong>Hint:</strong> Here's a dataset you can use to build this: <a href='https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json' target='_blank'>https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json</a>",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
-        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. ",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "challengeSeed": [
-        "nss_5sZpjIE"
-      ],
-      "tests": [],
-      "isRequired": true,
-      "releasedOn": "January 1, 2016",
-      "type": "zipline",
-      "challengeType": 3,
-      "translations": {
-        "es": {
-          "title": "Visualiza datos utilizando un gráfico de barras",
-          "description": [
-            "<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/freeCodeCamp/full/vGjLVZ' target='_blank'>https://codepen.io/freeCodeCamp/full/vGjLVZ</a>.",
-            "<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
-            "<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
-            "<strong>Regla #3:</strong> Debes utilizar D3.js para construir este proyecto.",
-            "<strong>Historia de usuario:</strong> Puedo ver el Producto Interno Bruto (PIB) de los EEUU por trimestre, a través del tiempo.",
-            "<strong>Historia de usuario:</strong> Puedo ver una descripción emergente con el monto de PIB y el mes y año que representa cada barra al mover el ratón sobre ellas.",
-            "<strong>Pista:</strong> Puedes utilizar el siguiente conjunto de datos para construir tu proyecto: <a href='https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json' target='_blank'>https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json</a>",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
-            "Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
-            "Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7178d8c242eddfaeb5bd13",
-      "title": "Visualize Data with a Scatterplot Graph",
-      "description": [
-        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/ONxvaa/' target='_blank'>https://codepen.io/freeCodeCamp/full/ONxvaa/</a>.",
-        "Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
-        "<strong>User Story:</strong> I can see performance time visualized in a scatterplot graph.",
-        "<strong>User Story:</strong> I can mouse over a plot to see a tooltip with additional details.",
-        "<strong>Hint:</strong> Here's a dataset you can use to build this: <a href='https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json' target='_blank'>https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json</a>",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
-        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. ",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "challengeSeed": [
-        "barVgJDnTMk"
-      ],
-      "tests": [],
-      "isRequired": true,
-      "releasedOn": "January 1, 2016",
-      "type": "zipline",
-      "challengeType": 3,
-      "translations": {
-        "es": {
-          "title": "Visualiza datos utilizando un gráfico de dispersión",
-          "description": [
-            "<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/freeCodeCamp/full/ONxvaa/' target='_blank'>https://codepen.io/freeCodeCamp/full/ONxvaa/</a>.",
-            "<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
-            "<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
-            "<strong>Regla #3:</strong> Debes utilizar D3.js para construir este proyecto.",
-            "<strong>Historia de usuario:</strong> Puedo ver el tiempo de recorrido en el diagrama de dispersión.",
-            "<strong>Historia de usuario:</strong> Puedo ver una descripción emergente con información adicional al mover el ratón sobre el gráfico.",
-            "<strong>Pista:</strong> Puedes utilizar el siguiente conjunto de datos para construir tu proyecto: <a href='https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json' target='_blank'>https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json</a>",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
-            "Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
-            "Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7188d8c242eddfaeb5bd13",
-      "title": "Visualize Data with a Heat Map",
-      "description": [
-        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/aNLYPp/' target='_blank'>https://codepen.io/freeCodeCamp/full/aNLYPp/</a>.",
-        "Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
-        "<strong>User Story:</strong> I can view a heat map with data represented both on the Y and X axis.",
-        "<strong>User Story:</strong> Each cell is colored based its relationship to other data.",
-        "<strong>User Story:</strong> I can mouse over a cell in the heat map to get more exact information.",
-        "<strong>Hint:</strong> Here's a dataset you can use to build this: <a href='https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json' target='_blank'>https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json</a>",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
-        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. ",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "challengeSeed": [
-        "TVJr7ndWAYo"
-      ],
-      "tests": [],
-      "isRequired": true,
-      "releasedOn": "January 1, 2016",
-      "type": "zipline",
-      "challengeType": 3,
-      "translations": {
-        "es": {
-          "title": "Visualiza datos utilizando un mapa de calor",
-          "description": [
-            "<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/freeCodeCamp/full/aNLYPp/' target='_blank'>https://codepen.io/freeCodeCamp/full/aNLYPp/</a>.",
-            "<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
-            "<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
-            "<strong>Regla #3:</strong> Debes utilizar D3.js para construir este proyecto.",
-            "<strong>Historia de usuario:</strong> Puedo ver un mapa de calor con datos representados en los ejes x, y.",
-            "<strong>Historia de usuario:</strong> El color de cada celda debe estar basado en su relación con otros datos.",
-            "<strong>Historia de usuario:</strong> Puedo mover el ratón sobre una celda en el mapa de calor para obtener información más detallada.",
-            "<strong>Pista:</strong> Puedes utilizar el siguiente conjunto de datos para construir tu proyecto: <a href='https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json' target='_blank'>https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json</a>",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
-            "Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
-            "Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7198d8c242eddfaeb5bd13",
-      "title": "Show National Contiguity with a Force Directed Graph",
-      "description": [
-        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/xVopBo' target='_blank'>https://codepen.io/freeCodeCamp/full/xVopBo</a>.",
-        "Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
-        "<strong>User Story:</strong> I can see a Force-directed Graph that shows which countries share borders.",
-        "<strong>User Story:</strong> I can see each country's flag on its node.",
-        "<strong>Hint:</strong> Here's a dataset you can use to build this: <a href='https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json' target='_blank'>https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json</a>",
-        "<strong>Hint:</strong> You can create a spritesheet of national flags at <a href='https://www.flag-sprites.com' target='_blank'>https://www.flag-sprites.com</a>.",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
-        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. ",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "challengeSeed": [
-        "etBaP3IdlIE"
-      ],
-      "tests": [],
-      "isRequired": true,
-      "releasedOn": "January 1, 2016",
-      "type": "zipline",
-      "challengeType": 3,
-      "translations": {
-        "es": {
-          "title": "Muestra asociaciones utilizando un gráfico de fuerzas dirigidas",
-          "description": [
-            "<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/freeCodeCamp/full/KVNNXY' target='_blank'>https://codepen.io/freeCodeCamp/full/KVNNXY</a>.",
-            "<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
-            "<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
-            "<strong>Regla #3:</strong> Debes utilizar D3.js para construir este proyecto.",
-            "<strong>Historia de usuario:</strong> Puedo ver un gráfico de fuerza dirigida que muestra qué campistas están publicando enlaces en Camper News hacia qué dominios.",
-            "<strong>Historia de usuario:</strong> Puedo ver el icono de cada campista en su nodo respectivo.",
-            "<strong>Historia de usuario:</strong> Puedo ver la relación entre los campistas y los dominios que publican.",
-            "<strong>Historia de usuario:</strong> Puedo conocer aproximadamente cuántas veces los campistas han enlazado un dominio en particular a partir del tamaño del nodo respectivo.",
-            "<strong>Historia de usuario:</strong> Puedo conocer aproximadamente cuántas veces un campista específico ha publicado un enlace a partir del tamaño de su nodo.",
-            "<strong>Pista:</strong> La siguiente es la ruta del API de noticias de Camper News: <code>http://www.freecodecamp.com/news/hot</code>.",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
-            "Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
-            "Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7108d8c242eddfaeb5bd13",
-      "title": "Map Data Across the Globe",
-      "description": [
-        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/mVEJag' target='_blank'>https://codepen.io/freeCodeCamp/full/mVEJag</a>.",
-        "Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
-        "<strong>User Story:</strong> I can see where all Meteorites landed on a world map.",
-        "<strong>User Story:</strong> I can tell the relative size of the meteorite, just by looking at the way it's represented on the map.",
-        "<strong>User Story:</strong> I can mouse over the meteorite's data point for additional data.",
-        "<strong>Hint:</strong> Here's a dataset you can use to build this: <a href='https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json' target='_blank'>https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json</a>",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
-        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. ",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "challengeSeed": [
-        "kSAqct10gA0"
-      ],
-      "tests": [],
-      "isRequired": true,
-      "releasedOn": "January 1, 2016",
-      "type": "zipline",
-      "challengeType": 3,
-      "translations": {
-        "es": {
-          "title": "Mapea datos a lo largo del Globo",
-          "description": [
-            "<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/freeCodeCamp/full/mVEJag' target='_blank'>https://codepen.io/freeCodeCamp/full/mVEJag</a>.",
-            "<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
-            "<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
-            "<strong>Regla #3:</strong> Debes utilizar D3.js para construir este proyecto.",
-            "<strong>Historia de usuario:</strong> Puedo ver a dónde cayeron todos los meteoritos en un mapa mundi.",
-            "<strong>Historia de usuario:</strong> Puedo distinguir el tamaño relativo de cada meteorito simplemente viendo la forma en que está representado en el mapa.",
-            "<strong>Historia de usuario:</strong> Puedo mover el ratón sobre el dato de cada meteorito para obtener información adicional.",
-            "<strong>Pista:</strong> Puedes utilizar el siguiente conjunto de datos para construir tu proyecto: <a href='https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json' target='_blank'>https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json</a>",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
-            "Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
-            "Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/02-data-visualization-certification/react-projects.json b/seed/challenges/02-data-visualization-certification/react-projects.json
deleted file mode 100644
index c8635e074aa1bd..00000000000000
--- a/seed/challenges/02-data-visualization-certification/react-projects.json
+++ /dev/null
@@ -1,330 +0,0 @@
-{
-  "name": "React Projects",
-  "order": 15,
-  "time": "200 hours",
-  "helpRoom": "HelpDataViz",
-  "challenges": [
-    {
-      "id": "bd7157d8c242eddfaeb5bd13",
-      "title": "Build a Markdown Previewer",
-      "description": [
-        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/JXrLLE/' target='_blank'>https://codepen.io/freeCodeCamp/full/JXrLLE/</a>.",
-        "Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
-        "<strong>User Story:</strong> I can type GitHub-flavored Markdown into a text area.",
-        "<strong>User Story:</strong> I can see a preview of the output of my markdown that is updated as I type.",
-        "<strong>Hint:</strong> You don't need to interpret Markdown yourself - you can import the Marked library for this: <a href='https://cdnjs.com/libraries/marked' target='_blank'>https://cdnjs.com/libraries/marked</a>",
-        "<strong>Note:</strong> If you want to use the React JSX syntax, you need to enable 'Babel' as a preprocessor",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
-        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. ",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "releasedOn": "January 1, 2016",
-      "challengeSeed": [
-        "giTx33ggIno"
-      ],
-      "tests": [],
-      "type": "zipline",
-      "isRequired": true,
-      "challengeType": 3,
-      "translations": {
-        "es": {
-          "title": "Crea un visualizador de lenguaje de marcado (Markdown)",
-          "description": [
-            "<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/freeCodeCamp/full/JXrLLE/' target='_blank'>https://codepen.io/freeCodeCamp/full/JXrLLE/</a>.",
-            "<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
-            "<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
-            "<strong>Rule #3:</strong> Debes utilizar ambos Sass y React para construir este proyecto.",
-            "<strong>Historia de usuario:</strong> Puedo escribir lenguaje de marcado al estilo GitHub en un área de texto.",
-            "<strong>Historia de usuario:</strong> Puedo tener una vista preliminar del resultado de mi marcado que se actualiza mientras escribo.",
-            "<strong>Pista:</strong> No necesitas interpretar el lenguaje de marcado por tu cuenta - puedes importar la librería de marcado en el enlace siguiente: <a href='https://cdnjs.com/libraries/marked'>https://cdnjs.com/libraries/marked</a>",
-            "<strong>Nota:</strong> Si quieres utilizar la sintaxis de React JSX, necesitarás habilitar 'Babel' como un preprocesador",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
-            "Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
-            "Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        },
-        "ru": {
-          "title": "Создайте предпросмотрщик языка разметки Markdown",
-          "description": [
-            "<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a>, функционал которого схож с этим: <a href='https://codepen.io/freeCodeCamp/full/JXrLLE/' target='_blank'>https://codepen.io/freeCodeCamp/full/JXrLLE/</a>.",
-            "<strong>Правило #1:</strong> Не подсматривайте код приложения-примера. Напишите его самостоятельно.",
-            "<strong>Правило #2:</strong> Приложение должно удовлетворять нижеприведённым <a href='https://ru.wikipedia.org/wiki/Пользовательские_истории' target='_blank'>пользовательским историям</a>. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.",
-            "<strong>Правило #3:</strong> Для создания этого проекта вы должны использовать Sass и React.",
-            "<strong>Пользовательская история:</strong> Я могу использовать язык разметки в стиле GitHub в текстовом поле.",
-            "<strong>Пользовательская история:</strong> Я могу видеть предварительный просмотр вывода моей разметки по мере ввода текста.",
-            "<strong>Подсказка:</strong> Вам не нужно интерпретировать разметку самостоятельно - вы можете импортировать библиотеку Marked для этого: <a href='https://cdnjs.com/libraries/marked'>https://cdnjs.com/libraries/marked</a>",
-            "<strong>Заметка:</strong> Если вы хотите использовать синтаксис React JSX, вам понадобится задействовать 'Babel' в качестве препроцессора.",
-            "Если что-то не получается, не забывайте пользоваться методом <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Читай-Ищи-Спрашивай</a>.",
-            "Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.",
-            "Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7156d8c242eddfaeb5bd13",
-      "title": "Build a Camper Leaderboard",
-      "description": [
-        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/eZGMjp/' target='_blank'>https://codepen.io/freeCodeCamp/full/eZGMjp/</a>.",
-        "Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
-        "<strong>User Story:</strong> I can see a table of the Free Code Camp campers who've earned the most brownie points in the past 30 days.",
-        "<strong>User Story:</strong> I can see how many brownie points they've earned in the past 30 days, and how many they've earned total.",
-        "<strong>User Story:</strong> I can toggle between sorting the list by how many brownie points they've earned in the past 30 days and by how many brownie points they've earned total.",
-        "<strong>Hint:</strong> To get the top 100 campers for the last 30 days: <a href='https://fcctop100.herokuapp.com/api/fccusers/top/recent' target='_blank'>https://fcctop100.herokuapp.com/api/fccusers/top/recent</a>.",
-        "<strong>Hint:</strong> To get the top 100 campers of all time: <a href='https://fcctop100.herokuapp.com/api/fccusers/top/alltime' target='_blank'>https://fcctop100.herokuapp.com/api/fccusers/top/alltime</a>.",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
-        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. ",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "releasedOn": "January 1, 2016",
-      "challengeSeed": [
-        "LJQcFNo_-QY"
-      ],
-      "tests": [],
-      "type": "zipline",
-      "isRequired": true,
-      "challengeType": 3,
-      "translations": {
-        "es": {
-          "title": "Crea un marcador para los campistas",
-          "description": [
-            "<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/freeCodeCamp/full/eZGMjp/' target='_blank'>https://codepen.io/freeCodeCamp/full/eZGMjp/</a>.",
-            "<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
-            "<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
-            "<strong>Rule #3:</strong> Debes utilizar ambos Sass y React para construir este proyecto.",
-            "<strong>Historia de usuario:</strong> Puedo ver un tablero con los campistas de Free Code Camp que han ganado más puntos de brownie en los últimos 30 días.",
-            "<strong>Historia de usuario:</strong> Puedo ver cuántos puntos de brownie han ganado en los últimos 30 días, y cuántos han ganado en total.",
-            "<strong>Historia de usuario:</strong> Puedo elegir entre dos formas de organizar la lista: 1) En base a cuántos puntos de brownie se han ganado en los últimos 30 días. 2) En base al número de puntos de brownie que han ganado en total.",
-            "<strong>Pista:</strong> Para obtener los 100 mejores campistas para los últimos 30 días: <a href='https://fcctop100.herokuapp.com/api/fccusers/top/recent' target='_blank'>https://fcctop100.herokuapp.com/api/fccusers/top/recent</a>.",
-            "<strong>Pista:</strong> Para obtener los 100 mejores campistas de toda la historia: <a href='http://fcctop100.herokuapp.com/api/fccusers/top/alltime' target='_blank'>http://fcctop100.herokuapp.com/api/fccusers/top/alltime</a>.",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
-            "Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
-            "Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        },
-        "ru": {
-          "title": "Создайте таблицу Кемперов-Лидеров",
-          "description": [
-            "<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a>, функционал которого схож с этим: <a href='https://codepen.io/freeCodeCamp/full/eZGMjp/' target='_blank'>https://codepen.io/freeCodeCamp/full/eZGMjp/</a>.",
-            "<strong>Правило #1:</strong> Не подсматривайте код приложения-примера. Напишите его самостоятельно.",
-            "<strong>Правило #2:</strong> Приложение должно удовлетворять нижеприведённым <a href='https://ru.wikipedia.org/wiki/Пользовательские_истории' target='_blank'>пользовательским историям</a>. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.",
-            "<strong>Правило #3:</strong> Для создания этого проекта вы должны использовать Sass и React.",
-            "<strong>Пользовательская история:</strong> Я могу видеть таблицу кемперов Free Code Camp, которые получили наибольшее количество очков за последние 30 дней.",
-            "<strong>Пользовательская история:</strong> Я могу видеть сколько очков они получили за последние 30 дней, и сколько они получили их всего.",
-            "<strong>Пользовательская история:</strong> Я могу отсортировать список по количеству очков, которые они получили за последние 30 дней, и по общему количеству полученных очков.",
-            "<strong>Подсказка:</strong> Ссылка на топ 100 кемперов за последние 30 дней в формате JSON: <a href='https://fcctop100.herokuapp.com/api/fccusers/top/recent' target='_blank'>https://fcctop100.herokuapp.com/api/fccusers/top/recent</a>.",
-            "<strong>Подсказка:</strong> Ссылка на топ 100 кемперов за все время в формате JSON: <a href='http://fcctop100.herokuapp.com/api/fccusers/top/alltime' target='_blank'>http://fcctop100.herokuapp.com/api/fccusers/top/alltime</a>.",
-            "Если что-то не получается, не забывайте пользоваться методом <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Читай-Ищи-Спрашивай</a>.",
-            "Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.",
-            "Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7155d8c242eddfaeb5bd13",
-      "title": "Build a Recipe Box",
-      "description": [
-        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/xVXWag/' target='_blank'>https://codepen.io/freeCodeCamp/full/xVXWag/</a>.",
-        "Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
-        "<strong>User Story:</strong> I can create recipes that have names and ingredients.",
-        "<strong>User Story:</strong> I can see an index view where the names of all the recipes are visible.",
-        "<strong>User Story:</strong> I can click into any of those recipes to view it.",
-        "<strong>User Story:</strong> I can edit these recipes.",
-        "<strong>User Story:</strong> I can delete these recipes.",
-        "<strong>User Story:</strong> All new recipes I add are saved in my browser's local storage. If I refresh the page, these recipes will still be there.",
-        "<strong>Hint: </strong> You should prefix your local storage keys on CodePen, i.e. <code>_username_recipes</code>",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
-        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen.",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "releasedOn": "January 1, 2016",
-      "challengeSeed": [
-        "6tZ4c-Bxstg"
-      ],
-      "tests": [],
-      "type": "zipline",
-      "isRequired": true,
-      "challengeType": 3,
-      "translations": {
-        "es": {
-          "title": "Crea una caja de recetas",
-          "description": [
-            "<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/freeCodeCamp/full/xVXWag/' target='_blank'>https://codepen.io/freeCodeCamp/full/xVXWag/</a>.",
-            "<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
-            "<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
-            "<strong>Rule #3:</strong> Debes utilizar ambos Sass y React para construir este proyecto.",
-            "<strong>Historia de usuario:</strong> Puedo crear recetas a las que les puedo poner un nombre y los ingredientes necesarios.",
-            "<strong>Historia de usuario:</strong> Puedo ver un índice que contenga los nombres de todas las recetas.",
-            "<strong>Historia de usuario:</strong> Puedo pulsar cualquiera de las recetas para verla.",
-            "<strong>Historia de usuario:</strong> Puedo editar las recetas.",
-            "<strong>Historia de usuario:</strong> Puedo eliminar las recetas.",
-            "<strong>Historia de usuario:</strong> Las recetas que voy agregando deben guardarse en el almacenamiento local de mi navegador. Las recetas deben seguir allí si refresco la página.",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
-            "Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
-            "Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        },
-        "ru": {
-          "title": "Создайте хранилище рецептов",
-          "description": [
-            "<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a>, функционал которого схож с этим: <a href='https://codepen.io/freeCodeCamp/full/xVXWag/' target='_blank'>https://codepen.io/freeCodeCamp/full/xVXWag/</a>.",
-            "<strong>Правило #1:</strong> Не подсматривайте код приложения-примера. Напишите его самостоятельно.",
-            "<strong>Правило #2:</strong> Приложение должно удовлетворять нижеприведённым <a href='https://ru.wikipedia.org/wiki/Пользовательские_истории' target='_blank'>пользовательским историям</a>. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.",
-            "<strong>Правило #3:</strong> Для создания этого проекта вы должны использовать Sass и React.",
-            "<strong>Пользовательская история:</strong> Я могу создавать рецепты, содержащие название и ингредиенты.",
-            "<strong>Пользовательская история:</strong> Я могу просмотреть корневой вид, на котором видны все рецепты.",
-            "<strong>Пользовательская история:</strong> Я могу нажать на имя каждого из рецептов для просмотра содержимого.",
-            "<strong>Пользовательская история:</strong> Я могу отредактировать эти рецепты.",
-            "<strong>Пользовательская история:</strong> Я могу удалить эти рецепты.",
-            "<strong>Пользовательская история:</strong> Все новые рецепты, которые я добавил, сохранены в локальном хранилище моего браузера. Если я обновлю страницу, эти рецепты будут всё ещё там.",
-            "Если что-то не получается, не забывайте пользоваться методом <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Читай-Ищи-Спрашивай</a>.",
-            "Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.",
-            "Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7154d8c242eddfaeb5bd13",
-      "title": "Build the Game of Life",
-      "description": [
-        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/reGdqx/' target='_blank'>https://codepen.io/freeCodeCamp/full/reGdqx/</a>.",
-        "Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
-        "<strong>User Story:</strong> When I first arrive at the game, it will randomly generate a board and start playing.",
-        "<strong>User Story:</strong> I can start and stop the board.",
-        "<strong>User Story:</strong> I can set up the board.",
-        "<strong>User Story:</strong> I can clear the board.",
-        "<strong>User Story:</strong> When I press start, the game will play out.",
-        "<strong>User Story:</strong> Each time the board changes, I can see how many generations have gone by.",
-        "<strong>Hint:</strong> Here's an explanation of Conway's Game of Life from John Conway himself: <a href='https://www.youtube.com/watch?v=E8kUJL04ELA' target='_blank'>https://www.youtube.com/watch?v=E8kUJL04ELA</a>",
-        "<strong>Hint:</strong> Here's an overview of Conway's Game of Life with rules for your reference: <a href='https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life' target='_blank'>https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life</a>",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
-        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. ",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "releasedOn": "January 1, 2016",
-      "challengeSeed": [
-        "5Ajcjs3OmjA"
-      ],
-      "tests": [],
-      "type": "zipline",
-      "isRequired": true,
-      "challengeType": 3,
-      "translations": {
-        "es": {
-          "title": "Crea un Juego de la vida",
-          "description": [
-            "<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/freeCodeCamp/full/reGdqx/' target='_blank'>https://codepen.io/freeCodeCamp/full/reGdqx/</a>.",
-            "<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
-            "<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
-            "<strong>Rule #3:</strong> Debes utilizar ambos Sass y React para construir este proyecto.",
-            "<strong>Historia de usuario:</strong> La aplicación debe generar aleatoriamente un tablero y comenzar a jugar cuando entro al juego por primera vez.",
-            "<strong>Historia de usuario:</strong> Puedo iniciar y detener el tablero.",
-            "<strong>Historia de usuario:</strong> Puedo preparar el tablero.",
-            "<strong>Historia de usuario:</strong> Puedo limpiar el tablero.",
-            "<strong>Historia de usuario:</strong> El juego inicia cuando presiono un botón de inicio.",
-            "<strong>Historia de usuario:</strong> Puedo ver cuántas generaciones han pasado cada vez que el tablero cambia.",
-            "<strong>Pista:</strong> Puedes encontrar una explicación del Juego de la vida de Conway de parte del mismísimo John Conway aquí: <a href='https://www.youtube.com/watch?v=E8kUJL04ELA' target='_blank'>https://www.youtube.com/watch?v=E8kUJL04ELA</a>",
-            "<strong>Pista:</strong> Puedes referirte al siguiente enlace para obtener información general acerca del Juego de la vida de Conway incluyendo las reglas del juego: <a href='https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life' target='_blank'>https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life</a>",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
-            "Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
-            "Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        },
-        "ru": {
-          "title": "Создайте игру \"Жизнь\"",
-          "description": [
-            "<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a>, функционал которого схож с этим: <a href='https://codepen.io/freeCodeCamp/full/reGdqx/' target='_blank'>https://codepen.io/freeCodeCamp/full/reGdqx/</a>.",
-            "<strong>Правило #1:</strong> Не подсматривайте код приложения-примера. Напишите его самостоятельно.",
-            "<strong>Правило #2:</strong> Приложение должно удовлетворять нижеприведённым <a href='https://ru.wikipedia.org/wiki/Пользовательские_истории' target='_blank'>пользовательским историям</a>. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.",
-            "<strong>Правило #3:</strong> Для создания этого проекта вы должны использовать Sass и React.",
-            "<strong>Пользовательская история:</strong> Когда я впервые запускаю игру, она генерирует доску случайным образом и начинает игру.",
-            "<strong>Пользовательская история:</strong> Я могу запустить и остановить игру.",
-            "<strong>Пользовательская история:</strong> Я могу настроить доску.",
-            "<strong>Пользовательская история:</strong> Я могу очистить доску.",
-            "<strong>Пользовательская история:</strong> Когда я нажимаю начать, игра начинает воспроизведение.",
-            "<strong>Пользовательская история:</strong> Каждый раз, когда доска меняется, я могу видеть сколько поколений прошло.",
-            "<strong>Подсказка:</strong> Вот объяснение игры \"Жизнь\" от её создателя Джона Конвея: <a href='https://www.youtube.com/watch?v=E8kUJL04ELA' target='_blank'>https://www.youtube.com/watch?v=E8kUJL04ELA</a>",
-            "<strong>Подсказка:</strong> Вот обзор правил игры \"Жизнь\" для вашего сведения: <a href='https://ru.wikipedia.org/wiki/Жизнь_(игра)' target='_blank'>https://ru.wikipedia.org/wiki/Жизнь_(игра)</a>",
-            "Если что-то не получается, не забывайте пользоваться методом <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Читай-Ищи-Спрашивай</a>.",
-            "Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.",
-            "Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7153d8c242eddfaeb5bd13",
-      "title": "Build a Roguelike Dungeon Crawler Game",
-      "description": [
-        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/freeCodeCamp/full/PNJRyd/' target='_blank'>https://codepen.io/freeCodeCamp/full/PNJRyd/</a>.",
-        "Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
-        "<strong>User Story:</strong> I have health, a level, and a weapon. I can pick up a better weapon. I can pick up health items.",
-        "<strong>User Story:</strong> All the items and enemies on the map are arranged at random.",
-        "<strong>User Story:</strong> I can move throughout a map, discovering items.",
-        "<strong>User Story:</strong> I can move anywhere within the map's boundaries, but I can't move through an enemy until I've beaten it.",
-        "<strong>User Story:</strong> Much of the map is hidden. When I take a step, all spaces that are within a certain number of spaces from me are revealed.",
-        "<strong>User Story:</strong> When I beat an enemy, the enemy goes away and I get XP, which eventually increases my level.",
-        "<strong>User Story:</strong> When I fight an enemy, we take turns damaging each other until one of us loses. I do damage based off of my level and my weapon. The enemy does damage based off of its level. Damage is somewhat random within a range.",
-        "<strong>User Story:</strong> When I find and beat the boss, I win.",
-        "<strong>User Story:</strong> The game should be challenging, but theoretically winnable.",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
-        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. ",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "releasedOn": "January 1, 2016",
-      "challengeSeed": [
-        "BwyKI9iePUQ"
-      ],
-      "tests": [],
-      "type": "zipline",
-      "isRequired": true,
-      "challengeType": 3,
-      "translations": {
-        "es": {
-          "title": "Crea un juego de dragones al estilo Rogue",
-          "description": [
-            "<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/freeCodeCamp/full/PNJRyd/' target='_blank'>https://codepen.io/freeCodeCamp/full/PNJRyd/</a>.",
-            "<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
-            "<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
-            "<strong>Rule #3:</strong> Debes utilizar ambos Sass y React para construir este proyecto.",
-            "<strong>Historia de usuario:</strong> Tengo energía, nivel de habilidad y un arma. Puedo recoger un arma mejor. Puedo recoger ítems que recuperan mi energía.",
-            "<strong>Historia de usuario:</strong> Todos los ítems y los enemigos en el mapa están colocados aleatoriamente.",
-            "<strong>Historia de usuario:</strong> Puedo moverme a lo largo de un mapa y descubrir ítems.",
-            "<strong>Historia de usuario:</strong> Puedo moverme hacia cualquier parte dentro de los límites del mapa, pero no puedo moverme sobre un enemigo hasta que lo haya vencido.",
-            "<strong>Historia de usuario:</strong> Gran parte del mapa está escondido. Cuando doy un paso, todos los espacios que están a cierto número de espacios de distancia de mi son revelados.",
-            "<strong>Historia de usuario:</strong> Cuando venzo un enemigo, este desaparece y yo gano puntos de experiencia (XP), lo que eventualmente me permite aumentar de nivel.",
-            "<strong>Historia de usuario:</strong> Cuando peleo con un enemigo, tomamos turnos haciéndonos daño hasta que uno de los dos pierde. El daño que hago está basado en mi nivel de experiencia y en el arma que estoy utilizando. El enemigo hace daño basado en su nivel. El daño es aleatorio dentro de cierto márgen.",
-            "<strong>Historia de usuario:</strong> Gano el juego cuando encuentre y venza al jefe.",
-            "<strong>Historia de usuario:</strong> El juego debe representar un reto, pero ganar debe ser teóricamente posible.",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
-            "Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
-            "Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        },
-        "ru": {
-          "title": "Создайте Roguelike-подобную игру Подземелье",
-          "description": [
-            "<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a>, функционал которого схож с этим: <a href='https://codepen.io/freeCodeCamp/full/PNJRyd/' target='_blank'>https://codepen.io/freeCodeCamp/full/PNJRyd/</a>.",
-            "<strong>Правило #1:</strong> Не подсматривайте код приложения-примера. Напишите его самостоятельно.",
-            "<strong>Правило #2:</strong> Приложение должно удовлетворять нижеприведённым <a href='https://ru.wikipedia.org/wiki/Пользовательские_истории' target='_blank'>пользовательским историям</a>. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.",
-            "<strong>Правило #3:</strong> Для создания этого проекта вы должны использовать Sass и React.",
-            "<strong>Пользовательская история:</strong> У меня есть жизни, уровень и оружие. Я могу подобрать оружие получше. Я могу подобрать очки здоровья.",
-            "<strong>Пользовательская история:</strong> Все предметы и враги располагаются на карте случайным образом.",
-            "<strong>Пользовательская история:</strong> Я могу передвигаться по карте, обнаруживая новые предметы.",
-            "<strong>Пользовательская история:</strong> Я могу двигаться куда угодно в рамках карты, но не могу продвинуться дальше врага, пока он не будет побежден.",
-            "<strong>Пользовательская история:</strong> Большая часть карты скрыта. Когда я делаю шаг, все клетки в определенном количестве клеток от меня становятся видимы.",
-            "<strong>Пользовательская история:</strong> Когда я побеждаю врага, враг исчезает, а я получаю очки опыта (XP), что увеличивает мой уровень.",
-            "<strong>Пользовательская история:</strong> Когда я веду бой с врагом, мы поочередно наносим друг-другу повреждения, до тех пор пока кто-нибудь не победит. Я наношу повреждения, которые зависят от моего уровня и моего оружия. Враг наносит повреждения, которые зависят от его уровня. Значение повреждений распределено случайным образом в некотором диапазоне.",
-            "<strong>Пользовательская история:</strong> Когад я нахожу и побеждаю босса, я выигрываю игру.",
-            "<strong>Пользовательская история:</strong> Игра должна быть интересной и достаточно сложной, но теоретически проходимой.",
-            "Если что-то не получается, не забывайте пользоваться методом <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Читай-Ищи-Спрашивай</a>.",
-            "Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.",
-            "Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
-          ]
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/02-data-visualization-certification/react.json b/seed/challenges/02-data-visualization-certification/react.json
deleted file mode 100644
index a008ff2bc217f8..00000000000000
--- a/seed/challenges/02-data-visualization-certification/react.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "React",
-  "order": 14,
-  "isComingSoon": true,
-  "time": "5 hours",
-  "helpRoom": "HelpDataViz",
-  "challenges": [
-    {
-      "id": "bd7158d8c423ede3aeb5bdee",
-      "title": "Learn React Challenges",
-      "description": [],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "waypoint",
-      "challengeType": 3,
-      "translations": {
-        "es": {
-          "title": "Desafios para aprender React"
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/02-data-visualization-certification/sass.json b/seed/challenges/02-data-visualization-certification/sass.json
deleted file mode 100644
index 76daddfdfbc4ca..00000000000000
--- a/seed/challenges/02-data-visualization-certification/sass.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
-  "name": "Sass",
-  "order": 13,
-  "isComingSoon": true,
-  "time": "5 hours",
-  "helpRoom": "HelpDataViz",
-  "challenges": [
-    {
-      "id": "bd7158d8c423ede2aeb5bdee",
-      "title": "Learn Sass Challenges",
-      "description": [],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "waypoint",
-      "challengeType": 3,
-      "translations": {}
-    }
-  ]
-}
diff --git a/seed/challenges/01-front-end-development-certification/basic-bonfires.json b/seed/challenges/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting.json
similarity index 78%
rename from seed/challenges/01-front-end-development-certification/basic-bonfires.json
rename to seed/challenges/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting.json
index 1025375b0a7f1e..c19e9dd0249f54 100644
--- a/seed/challenges/01-front-end-development-certification/basic-bonfires.json
+++ b/seed/challenges/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting.json
@@ -1,6 +1,6 @@
 {
   "name": "Basic Algorithm Scripting",
-  "order": 8,
+  "order": 5,
   "time": "50 hours",
   "helpRoom": "HelpJavaScript",
   "challenges": [
@@ -212,77 +212,6 @@
         }
       }
     },
-    {
-      "id": "aaa48de84e1ecc7c742e1124",
-      "title": "Check for Palindromes",
-      "description": [
-        "Return <code>true</code> if the given string is a palindrome. Otherwise, return <code>false</code>.",
-        "A <dfn>palindrome</dfn> is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.",
-        "<strong>Note</strong><br>You'll need to remove <strong>all non-alphanumeric characters</strong> (punctuation, spaces and symbols) and turn everything into the same case (lower or upper case) in order to check for palindromes.",
-        "We'll pass strings with varying formats, such as <code>\"racecar\"</code>, <code>\"RaceCar\"</code>, and <code>\"race CAR\"</code> among others.",
-        "We'll also pass strings with special symbols, such as <code>\"2A3*3a2\"</code>, <code>\"2A3  3a2\"</code>, and <code>\"2_A3*3#A2\"</code>.",
-        "Remember to use <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
-      ],
-      "challengeSeed": [
-        "function palindrome(str) {",
-        "  // Good luck!",
-        "  return true;",
-        "}",
-        "",
-        "",
-        "",
-        "palindrome(\"eye\");"
-      ],
-      "tests": [
-        "assert(typeof palindrome(\"eye\") === \"boolean\", 'message: <code>palindrome(\"eye\")</code> should return a boolean.');",
-        "assert(palindrome(\"eye\") === true, 'message: <code>palindrome(\"eye\")</code> should return true.');",
-        "assert(palindrome(\"_eye\") === true, 'message: <code>palindrome(\"_eye\")</code> should return true.');",
-        "assert(palindrome(\"race car\") === true, 'message: <code>palindrome(\"race car\")</code> should return true.');",
-        "assert(palindrome(\"not a palindrome\") === false, 'message: <code>palindrome(\"not a palindrome\")</code> should return false.');",
-        "assert(palindrome(\"A man, a plan, a canal. Panama\") === true, 'message: <code>palindrome(\"A man, a plan, a canal. Panama\")</code> should return true.');",
-        "assert(palindrome(\"never odd or even\") === true, 'message: <code>palindrome(\"never odd or even\")</code> should return true.');",
-        "assert(palindrome(\"nope\") === false, 'message: <code>palindrome(\"nope\")</code> should return false.');",
-        "assert(palindrome(\"almostomla\") === false, 'message: <code>palindrome(\"almostomla\")</code> should return false.');",
-        "assert(palindrome(\"My age is 0, 0 si ega ym.\") === true, 'message: <code>palindrome(\"My age is 0, 0 si ega ym.\")</code> should return true.');",
-        "assert(palindrome(\"1 eye for of 1 eye.\") === false, 'message: <code>palindrome(\"1 eye for of 1 eye.\")</code> should return false.');",
-        "assert(palindrome(\"0_0 (: /-\\ :) 0-0\") === true, 'message: <code>palindrome(\"0_0 (: /-\\ :) 0-0\")</code> should return true.');",
-        "assert(palindrome(\"five|\\_/|four\") === false, 'message: <code>palindrome(\"five|\\_/|four\")</code> should return false.');"
-      ],
-      "type": "bonfire",
-      "isRequired": true,
-      "solutions": [
-        "function palindrome(str) {\n  var string = str.toLowerCase().split(/[^A-Za-z0-9]/gi).join('');\n  var aux = string.split('');\n  if (aux.join('') === aux.reverse().join('')){\n    return true;\n  }\n\n  return false;\n}"
-      ],
-      "MDNlinks": [
-        "String.prototype.replace()",
-        "String.prototype.toLowerCase()"
-      ],
-      "challengeType": 5,
-      "translations": {
-        "es": {
-          "title": "Verifica si es palíndromo",
-          "description": [
-            "Crea una función que devuelva <code>true</code> si una cadena de texto dada es un palíndromo, y que devuelva <code>false</code> en caso contrario",
-            "Un palíndromo es una palabra u oración que se escribe de la misma forma en ambos sentidos, sin tomar en cuenta signos de puntuación, espacios y sin distinguir entre mayúsculas y minúsculas.",
-            "Tendrás que quitar los caracteres no alfanuméricos (signos de puntuación, espacioes y símbolos) y transformar las letras a minúsculas para poder verificar si el texto es palíndromo.",
-            "Te proveeremos textos en varios formatos, como \"racecar\", \"RaceCar\", and \"race CAR\" entre otros.",
-            "También vamos a pasar cadenas con símbolos especiales, tales como <code>\"2A3*3a2\"</code>, <code>\"2A3 3a2\"</code>, y <code>\"2_A3*3#A2\"</code>.",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
-          ]
-        },
-        "pt-br": {
-          "title": "Procure por Palíndromos",
-          "description": [
-            "Retorne <code>true</code> se o texto fornecida é um palíndromo. Caso contrário, retorne <code>false</code>.",
-            "Um <dfn>palíndromo</dfn> é uma palavra ou sentença que é soletrada da mesma maneira tanto para a frente quanto para trás, ignorando pontuação, maiúsculas e minúsculas, e espaçamento.",
-            "<strong>Nota</strong><br>Você precisará remover <strong>todos caracteres não alfanuméricos</strong> (pontuação, espaços e símbolos) e transformar todas as letras em maiúsculas ou minúsculas para procurar por palíndromos.",
-            "Nós vamos passar textos de vários formatos, tais como <code>\"racecar\"</code>, <code>\"RaceCar\"</code> e <code>\"race CAR\"</code> entre outras.",
-            "Nós também vamos passar textos com símbolos especiais, tais como <code>\"2A3*3a2\"</code>, <code>\"2A3  3a2\"</code> e <code>\"2_A3*3#A2\"</code>.",
-            "Lembre-se de usar <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se você ficar travado. Escreva seu próprio código."
-          ]
-        }
-      }
-    },
     {
       "id": "a26cbbe9ad8655a977e1ceb5",
       "title": "Find the Longest Word in a String",
@@ -335,55 +264,6 @@
         }
       }
     },
-    {
-      "id": "ab6137d4e35944e21037b769",
-      "title": "Title Case a Sentence",
-      "description": [
-        "Return the provided string with the first letter of each word capitalized. Make sure the rest of the word is in lower case.",
-        "For the purpose of this exercise, you should also capitalize connecting words like \"the\" and \"of\".",
-        "Remember to use <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
-      ],
-      "challengeSeed": [
-        "function titleCase(str) {",
-        "  return str;",
-        "}",
-        "",
-        "titleCase(\"I'm a little tea pot\");"
-      ],
-      "tests": [
-        "assert(typeof titleCase(\"I'm a little tea pot\") === \"string\", 'message: <code>titleCase(\"I&#39;m a little tea pot\")</code> should return a string.');",
-        "assert(titleCase(\"I'm a little tea pot\") === \"I'm A Little Tea Pot\", 'message: <code>titleCase(\"I&#39;m a little tea pot\")</code> should return \"I&#39;m A Little Tea Pot\".');",
-        "assert(titleCase(\"sHoRt AnD sToUt\") === \"Short And Stout\", 'message: <code>titleCase(\"sHoRt AnD sToUt\")</code> should return \"Short And Stout\".');",
-        "assert(titleCase(\"HERE IS MY HANDLE HERE IS MY SPOUT\") === \"Here Is My Handle Here Is My Spout\", 'message: <code>titleCase(\"HERE IS MY HANDLE HERE IS MY SPOUT\")</code> should return \"Here Is My Handle Here Is My Spout\".');"
-      ],
-      "type": "bonfire",
-      "isRequired": true,
-      "solutions": [
-        "function titleCase(str) {\n  return str.split(' ').map(function(word) {\n    return word.charAt(0).toUpperCase() + word.substring(1).toLowerCase();\n  }).join(' ');\n}\n\ntitleCase(\"I'm a little tea pot\");\n"
-      ],
-      "MDNlinks": [
-        "String.prototype.split()"
-      ],
-      "challengeType": 5,
-      "translations": {
-        "es": {
-          "title": "Aplica formato de título",
-          "description": [
-            "Crea una función que devuelva la cadena de texto que recibe con la primera letra de cada palabra en mayúscula. Asegúrate de que el resto de las letras sean minúsculas",
-            "Para este ejercicio, también debes poner en mayúscula conectores como \"the\" y \"of\".",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
-          ]
-        },
-        "pt-br": {
-          "title": "Transforme o Texto em um Título",
-          "description": [
-            "Retorne o texto fornecido com a primeira letra de cada palavra em maiúsculo. Garanta que o resto da palavra esteja em formato minúsculo.",
-            "Para o propósito deste exercício, você deve transformar também palavras conectivas como \"the\" e \"of\".",
-            "Lembre-se de usar <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se você ficar travado. Escreva seu próprio código."
-          ]
-        }
-      }
-    },
     {
       "id": "a789b3483989747d63b0e427",
       "title": "Return Largest Numbers in Arrays",
@@ -403,8 +283,7 @@
       "tests": [
         "assert(largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]).constructor === Array, 'message: <code>largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]])</code> should return an array.');",
         "assert.deepEqual(largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]]), [27,5,39,1001], 'message: <code>largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]])</code> should return <code>[27,5,39,1001]</code>.');",
-        "assert.deepEqual(largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]]), [9,35,97,1000000], 'message: <code>largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]])</code> should return <code>[9, 35, 97, 1000000]</code>.');",
-        "assert.deepEqual(largestOfFour([[-2, -7, -9, -4], [-13, -7, -100, -10], [-39, -37, -95, -32], [-1, -1001, -857, -1000000]]), [-2, -7, -32, -1], 'message: <code>largestOfFour([[-2, -7, -9, -4], [-13, -7, -100, -10], [-39, -37, -95, -32], [-1, -1001, -857, -1000000]])</code> should return <code>[-2, -7, -32, -1]</code>.');"
+        "assert.deepEqual(largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]]), [9,35,97,1000000], 'message: <code>largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]])</code> should return <code>[9, 35, 97, 1000000]</code>.');"
       ],
       "type": "bonfire",
       "isRequired": true,
@@ -597,51 +476,150 @@
       }
     },
     {
-      "id": "a9bd25c716030ec90084d8a1",
-      "title": "Chunky Monkey",
+      "id": "a6e40f1041b06c996f7b2406",
+      "title": "Finders Keepers",
       "description": [
-        "Write a function that splits an array (first argument) into groups the length of <code>size</code> (second argument) and returns them as a two-dimensional array.",
+        "Create a function that looks through an array (first argument) and returns the first element in the array that passes a truth test (second argument). If no element passes the test, return undefined.",
+        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
+      ],
+      "challengeSeed": [
+        "function findElement(arr, func) {",
+        "  var num = 0;",
+        "  return num;",
+        "}",
+        "",
+        "findElement([1, 2, 3, 4], function(num){ return num % 2 === 0; });"
+      ],
+      "solutions": [
+        "function findElement(arr, func) {\n  var num;\n  arr.some(function(e) {\n    if (func(e)) {\n      num = e;\n      return true;\n    }\n  });\n  return num;\n}"
+      ],
+      "tests": [
+        "assert.strictEqual(findElement([1, 3, 5, 8, 9, 10], function(num) { return num % 2 === 0; }), 8, 'message: <code>findElement([1, 3, 5, 8, 9, 10], function(num) { return num % 2 === 0; })</code> should return 8.');",
+        "assert.strictEqual(findElement([1, 3, 5, 9], function(num) { return num % 2 === 0; }), undefined, 'message: <code>findElement([1, 3, 5, 9], function(num) { return num % 2 === 0; })</code> should return undefined.');"
+      ],
+      "type": "bonfire",
+      "MDNlinks": [
+        "Array.prototype.filter()"
+      ],
+      "isRequired": true,
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Buscando la verdad",
+          "description": [
+            "Crea una función que busque dentro de un vector (primer argumento) y que devuelva el primer elemento que pase una prueba de verdad (segundo argumento).",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
+          ]
+        },
+        "fr": {
+          "title": "Détecteur de mensonges",
+          "description": [
+            "Crée une fonction qui parcourt un tableau (premier argument) et renvoie le premier élément du tableau qui passe le test (second argument).",
+            "N'oublie pas d'utiliser <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
+          ]
+        }
+      }
+    },
+    {
+      "id": "a77dbc43c33f39daa4429b4f",
+      "title": "Boo who",
+      "description": [
+        "Check if a value is classified as a boolean primitive. Return true or false.",
+        "Boolean primitives are true and false.",
+        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
+      ],
+      "challengeSeed": [
+        "function booWho(bool) {",
+        "  // What is the new fad diet for ghost developers? The Boolean.",
+        "  return bool;",
+        "}",
+        "",
+        "booWho(null);"
+      ],
+      "solutions": [
+        "function booWho(bool) {\n  // What is the new fad diet for ghost developers? The Boolean.\n  return typeof bool === \"boolean\";\n}\n\nbooWho(null);"
+      ],
+      "tests": [
+        "assert.strictEqual(booWho(true), true, 'message: <code>booWho(true)</code> should return true.');",
+        "assert.strictEqual(booWho(false), true, 'message: <code>booWho(false)</code> should return true.');",
+        "assert.strictEqual(booWho([1, 2, 3]), false, 'message: <code>booWho([1, 2, 3])</code> should return false.');",
+        "assert.strictEqual(booWho([].slice), false, 'message: <code>booWho([].slice)</code> should return false.');",
+        "assert.strictEqual(booWho({ \"a\": 1 }), false, 'message: <code>booWho({ \"a\": 1 })</code> should return false.');",
+        "assert.strictEqual(booWho(1), false, 'message: <code>booWho(1)</code> should return false.');",
+        "assert.strictEqual(booWho(NaN), false, 'message: <code>booWho(NaN)</code> should return false.');",
+        "assert.strictEqual(booWho(\"a\"), false, 'message: <code>booWho(\"a\")</code> should return false.');",
+        "assert.strictEqual(booWho(\"true\"), false, 'message: <code>booWho(\"true\")</code> should return false.');",
+        "assert.strictEqual(booWho(\"false\"), false, 'message: <code>booWho(\"false\")</code> should return false.');"
+      ],
+      "type": "bonfire",
+      "MDNlinks": [
+        "Boolean Objects"
+      ],
+      "isRequired": true,
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "¡Bu!",
+          "description": [
+            "Crea una función que verifique si el valor que se le pasa es de tipo booleano. Haz que la función devuelva true o false según corresponda.",
+            "Los primitivos booleanos primitivos son: true y false",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
+          ]
+        },
+        "fr": {
+          "title": "Boo !",
+          "description": [
+            "Crée une fonction qui vérifie qu'une valeur est de type booléen. Renvoie true ou false.",
+            "Les primitives booléennes sont true ou false.",
+            "N'oublie pas d'utiliser <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
+          ]
+        }
+      }
+    },
+    {
+      "id": "ab6137d4e35944e21037b769",
+      "title": "Title Case a Sentence",
+      "description": [
+        "Return the provided string with the first letter of each word capitalized. Make sure the rest of the word is in lower case.",
+        "For the purpose of this exercise, you should also capitalize connecting words like \"the\" and \"of\".",
         "Remember to use <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
       ],
       "challengeSeed": [
-        "function chunkArrayInGroups(arr, size) {",
-        "  // Break it up.",
-        "  return arr;",
+        "function titleCase(str) {",
+        "  return str;",
         "}",
         "",
-        "chunkArrayInGroups([\"a\", \"b\", \"c\", \"d\"], 2);"
+        "titleCase(\"I'm a little tea pot\");"
       ],
       "tests": [
-        "assert.deepEqual(chunkArrayInGroups([\"a\", \"b\", \"c\", \"d\"], 2), [[\"a\", \"b\"], [\"c\", \"d\"]], 'message: <code>chunkArrayInGroups([\"a\", \"b\", \"c\", \"d\"], 2)</code> should return <code>[[\"a\", \"b\"], [\"c\", \"d\"]]</code>.');",
-        "assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3), [[0, 1, 2], [3, 4, 5]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3)</code> should return <code>[[0, 1, 2], [3, 4, 5]]</code>.');",
-        "assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2), [[0, 1], [2, 3], [4, 5]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2)</code> should return <code>[[0, 1], [2, 3], [4, 5]]</code>.');",
-        "assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4), [[0, 1, 2, 3], [4, 5]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4)</code> should return <code>[[0, 1, 2, 3], [4, 5]]</code>.');",
-        "assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3), [[0, 1, 2], [3, 4, 5], [6]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3)</code> should return <code>[[0, 1, 2], [3, 4, 5], [6]]</code>.');",
-        "assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4), [[0, 1, 2, 3], [4, 5, 6, 7], [8]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4)</code> should return <code>[[0, 1, 2, 3], [4, 5, 6, 7], [8]]</code>.');",
-        "assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2), [[0, 1], [2, 3], [4, 5], [6, 7], [8]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2)</code> should return <code>[[0, 1], [2, 3], [4, 5], [6, 7], [8]]</code>.');"
+        "assert(typeof titleCase(\"I'm a little tea pot\") === \"string\", 'message: <code>titleCase(\"I&#39;m a little tea pot\")</code> should return a string.');",
+        "assert(titleCase(\"I'm a little tea pot\") === \"I'm A Little Tea Pot\", 'message: <code>titleCase(\"I&#39;m a little tea pot\")</code> should return \"I&#39;m A Little Tea Pot\".');",
+        "assert(titleCase(\"sHoRt AnD sToUt\") === \"Short And Stout\", 'message: <code>titleCase(\"sHoRt AnD sToUt\")</code> should return \"Short And Stout\".');",
+        "assert(titleCase(\"HERE IS MY HANDLE HERE IS MY SPOUT\") === \"Here Is My Handle Here Is My Spout\", 'message: <code>titleCase(\"HERE IS MY HANDLE HERE IS MY SPOUT\")</code> should return \"Here Is My Handle Here Is My Spout\".');"
       ],
       "type": "bonfire",
       "isRequired": true,
       "solutions": [
-        "function chunkArrayInGroups(arr, size) {\n  var out = [];\n  for (var i = 0; i < arr.length; i+=size) {\n    out.push(arr.slice(i,i+size));\n  }\n  return out;\n}\n\nchunkArrayInGroups(['a', 'b', 'c', 'd'], 2);\n"
+        "function titleCase(str) {\n  return str.split(' ').map(function(word) {\n    return word.charAt(0).toUpperCase() + word.substring(1).toLowerCase();\n  }).join(' ');\n}\n\ntitleCase(\"I'm a little tea pot\");\n"
       ],
       "MDNlinks": [
-        "Array.prototype.push()",
-        "Array.prototype.slice()"
+        "String.prototype.split()"
       ],
       "challengeType": 5,
       "translations": {
         "es": {
-          "title": "En mil Pedazos",
+          "title": "Aplica formato de título",
           "description": [
-            "Escribe una función que parta un arreglo (primer argumento) en fragmentos de una longitud dada (segundo argumento) y los devuelva en forma de un arreglo bidimensional.",
+            "Crea una función que devuelva la cadena de texto que recibe con la primera letra de cada palabra en mayúscula. Asegúrate de que el resto de las letras sean minúsculas",
+            "Para este ejercicio, también debes poner en mayúscula conectores como \"the\" y \"of\".",
             "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
           ]
         },
         "pt-br": {
-          "title": "Em Pedaços",
+          "title": "Transforme o Texto em um Título",
           "description": [
-            "Escreva uma funcção que divide uma matriz (primeiro argumento) em grupos de tamanho <code>size</code> (segundo argumento) e os retorna em uma matriz bidimensional.",
+            "Retorne o texto fornecido com a primeira letra de cada palavra em maiúsculo. Garanta que o resto da palavra esteja em formato minúsculo.",
+            "Para o propósito deste exercício, você deve transformar também palavras conectivas como \"the\" e \"of\".",
             "Lembre-se de usar <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se você ficar travado. Escreva seu próprio código."
           ]
         }
@@ -701,66 +679,6 @@
         }
       }
     },
-    {
-      "id": "af2170cad53daa0770fabdea",
-      "title": "Mutations",
-      "description": [
-        "Return true if the string in the first element of the array contains all of the letters of the string in the second element of the array.",
-        "For example, <code>[\"hello\", \"Hello\"]</code>, should return true because all of the letters in the second string are present in the first, ignoring case.",
-        "The arguments <code>[\"hello\", \"hey\"]</code> should return false because the string \"hello\" does not contain a \"y\".",
-        "Lastly, <code>[\"Alien\", \"line\"]</code>, should return true because all of the letters in \"line\" are present in \"Alien\".",
-        "Remember to use <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
-      ],
-      "challengeSeed": [
-        "function mutation(arr) {",
-        "  return arr;",
-        "}",
-        "",
-        "mutation([\"hello\", \"hey\"]);"
-      ],
-      "tests": [
-        "assert(mutation([\"hello\", \"hey\"]) === false, 'message: <code>mutation([\"hello\", \"hey\"])</code> should return false.');",
-        "assert(mutation([\"hello\", \"Hello\"]) === true, 'message: <code>mutation([\"hello\", \"Hello\"])</code> should return true.');",
-        "assert(mutation([\"zyxwvutsrqponmlkjihgfedcba\", \"qrstu\"]) === true, 'message: <code>mutation([\"zyxwvutsrqponmlkjihgfedcba\", \"qrstu\"])</code> should return true.');",
-        "assert(mutation([\"Mary\", \"Army\"]) === true, 'message: <code>mutation([\"Mary\", \"Army\"])</code> should return true.');",
-        "assert(mutation([\"Mary\", \"Aarmy\"]) === true, 'message: <code>mutation([\"Mary\", \"Aarmy\"])</code> should return true.');",
-        "assert(mutation([\"Alien\", \"line\"]) === true, 'message: <code>mutation([\"Alien\", \"line\"])</code> should return true.');",
-        "assert(mutation([\"floor\", \"for\"]) === true, 'message: <code>mutation([\"floor\", \"for\"])</code> should return true.');",
-        "assert(mutation([\"hello\", \"neo\"]) === false, 'message: <code>mutation([\"hello\", \"neo\"])</code> should return false.');",
-        "assert(mutation([\"voodoo\", \"no\"]) === false, 'message: <code>mutation([\"voodoo\", \"no\"])</code> should return false.');"
-      ],
-      "type": "bonfire",
-      "isRequired": true,
-      "solutions": [
-        "function mutation(arr) {\n  var hash = Object.create(null);\n  arr[0].toLowerCase().split('').forEach(function(c) {\n    hash[c] = true;\n  });\n  return !arr[1].toLowerCase().split('').filter(function(c) {\n    return !hash[c];\n  }).length;\n}\n\nmutation(['hello', 'hey']);\n"
-      ],
-      "MDNlinks": [
-        "String.prototype.indexOf()"
-      ],
-      "challengeType": 5,
-      "translations": {
-        "es": {
-          "title": "Mutaciones",
-          "description": [
-            "Crea una función que devuelva <code>true</code> si la cadena de texto del primer elemento de un arreglo contiene todas las letras de la cadena de texto del segundo elemento del arreglo.",
-            "Por ejemplo, <code>[\"hello\", \"Hello\"]</code>, debe devolver <code>true</code> porque todas las letras en la segunda cadena de texto están presentes en la primera, sin distinguir entre mayúsculas y minúsculas.",
-            "En el caso de <code>[\"hello\", \"hey\"]</code> la función debe devolver false porque la cadena de texto \"hello\" no contiene una \"y\".",
-            "Finalmente, <code>[\"Alien\", \"line\"]</code>, la función debe devolver <code>true</code> porque todas las letras en \"line\" están presentes en \"Alien\".",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
-          ]
-        },
-        "pt-br": {
-          "title": "Mutações",
-          "description": [
-            "Retorne verdadeiro se o texto no primeiro elemento da matriz contém todas as letras do texto no segundo elemento da matriz.",
-            "Por exemplo, <code>[\"hello\", \"Hello\"]</code>, deve retornar verdadeiro pois todas as letras no segundo text estão presentes no primeiro texto.",
-            "Os argumentos <code>[\"hello\", \"hey\"]</code> devem retornar falso por o texto \"hello\" não contém a letra \"y\".",
-            "Por último, <code>[\"Alien\", \"line\"]</code>, deve retornar verdadeiro pois todas as letras em \"line\" estão presentes em \"Alien\".",
-            "Lembre-se de usar <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se você ficar travado. Escreva seu próprio código."
-          ]
-        }
-      }
-    },
     {
       "id": "adf08ec01beb4f99fc7a68f2",
       "title": "Falsy Bouncer",
@@ -813,174 +731,171 @@
       }
     },
     {
-      "id": "a39963a4c10bc8b4d4f06d7e",
-      "title": "Seek and Destroy",
+      "id": "a24c1a4622e3c05097f71d67",
+      "title": "Where do I Belong",
       "description": [
-        "You will be provided with an initial array (the first argument in the destroyer function), followed by one or more arguments. Remove all elements from the initial array that are of the same value as these arguments.",
-        "<strong>Note</strong><br> You have to use the <code>arguments</code> object.",
+        "Return the lowest index at which a value (second argument) should be inserted into an array (first argument) once it has been sorted. The returned value should be a number.",
+        "For example, <code>getIndexToIns([1,2,3,4], 1.5)</code> should return <code>1</code> because it is greater than <code>1</code> (index 0), but less than <code>2</code> (index 1).",
+        "Likewise, <code>getIndexToIns([20,3,5], 19)</code> should return <code>2</code> because once the array has been sorted it will look like <code>[3,5,20]</code> and <code>19</code> is less than <code>20</code> (index 2) and greater than <code>5</code> (index 1).",
         "Remember to use <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
       ],
       "challengeSeed": [
-        "function destroyer(arr) {",
-        "  // Remove all the values",
-        "  return arr;",
+        "function getIndexToIns(arr, num) {",
+        "  // Find my place in this sorted array.",
+        "  return num;",
         "}",
         "",
-        "destroyer([1, 2, 3, 1, 2, 3], 2, 3);"
+        "getIndexToIns([40, 60], 50);"
       ],
       "tests": [
-        "assert.deepEqual(destroyer([1, 2, 3, 1, 2, 3], 2, 3), [1, 1], 'message: <code>destroyer([1, 2, 3, 1, 2, 3], 2, 3)</code> should return <code>[1, 1]</code>.');",
-        "assert.deepEqual(destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3), [1, 5, 1], 'message: <code>destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3)</code> should return <code>[1, 5, 1]</code>.');",
-        "assert.deepEqual(destroyer([3, 5, 1, 2, 2], 2, 3, 5), [1], 'message: <code>destroyer([3, 5, 1, 2, 2], 2, 3, 5)</code> should return <code>[1]</code>.');",
-        "assert.deepEqual(destroyer([2, 3, 2, 3], 2, 3), [], 'message: <code>destroyer([2, 3, 2, 3], 2, 3)</code> should return <code>[]</code>.');",
-        "assert.deepEqual(destroyer([\"tree\", \"hamburger\", 53], \"tree\", 53), [\"hamburger\"], 'message: <code>destroyer([\"tree\", \"hamburger\", 53], \"tree\", 53)</code> should return <code>[\"hamburger\"]</code>.');",
-        "assert.deepEqual(destroyer([\"possum\", \"trollo\", 12, \"safari\", \"hotdog\", 92, 65, \"grandma\", \"bugati\", \"trojan\", \"yacht\"], \"yacht\", \"possum\", \"trollo\", \"safari\", \"hotdog\", \"grandma\", \"bugati\", \"trojan\"), [12,92,65], 'message: <code>destroyer([\"possum\", \"trollo\", 12, \"safari\", \"hotdog\", 92, 65, \"grandma\", \"bugati\", \"trojan\", \"yacht\"], \"yacht\", \"possum\", \"trollo\", \"safari\", \"hotdog\", \"grandma\", \"bugati\", \"trojan\")</code> should return <code>[12,92,65]</code>.');"
+        "assert(getIndexToIns([10, 20, 30, 40, 50], 35) === 3, 'message: <code>getIndexToIns([10, 20, 30, 40, 50], 35)</code> should return <code>3</code>.');",
+        "assert(getIndexToIns([10, 20, 30, 40, 50], 30) === 2, 'message: <code>getIndexToIns([10, 20, 30, 40, 50], 30)</code> should return <code>2</code>.');",
+        "assert(getIndexToIns([40, 60], 50) === 1, 'message: <code>getIndexToIns([40, 60], 50)</code> should return <code>1</code>.');",
+        "assert(getIndexToIns([3, 10, 5], 3) === 0, 'message: <code>getIndexToIns([3, 10, 5], 3)</code> should return <code>0</code>.');",
+        "assert(getIndexToIns([5, 3, 20, 3], 5) === 2, 'message: <code>getIndexToIns([5, 3, 20, 3], 5)</code> should return <code>2</code>.');",
+        "assert(getIndexToIns([2, 20, 10], 19) === 2, 'message: <code>getIndexToIns([2, 20, 10], 19)</code> should return <code>2</code>.');",
+        "assert(getIndexToIns([2, 5, 10], 15) === 3, 'message: <code>getIndexToIns([2, 5, 10], 15)</code> should return <code>3</code>.');"
       ],
       "type": "bonfire",
       "isRequired": true,
       "solutions": [
-        "function destroyer(arr) {\n  var hash = Object.create(null);\n  [].slice.call(arguments, 1).forEach(function(e) {\n    hash[e] = true;\n  });\n  // Remove all the values\n  return arr.filter(function(e) { return !(e in hash);});\n}\n\ndestroyer([1, 2, 3, 1, 2, 3], 2, 3);\n"
+        "function getIndexToIns(arr, num) {\n  arr = arr.sort(function(a, b){return a-b;});\n  for (var i = 0; i < arr.length; i++) {\n    if (arr[i] >= num)\n      {\n        return i;\n      }\n  }\n  return arr.length;\n}"
       ],
       "MDNlinks": [
-        "Arguments object",
-        "Array.prototype.filter()"
+        "Array.prototype.sort()"
       ],
       "challengeType": 5,
       "translations": {
         "es": {
-          "title": "Buscar y Destruir",
+          "title": "¿Cuál es mi Asiento?",
           "description": [
-            "Se te proveerá un arreglo inicial (el primer argumento en la función <code>destroyer</code>), seguido por uno o más argumentos. Elimina todos los elementos del arreglo inicial que tengan el mismo valor que el resto de argumentos.",
+            "Devuelve el menor índice en el que un valor (segundo argumento) debe ser insertado en un arreglo (primer argumento) una vez ha sido ordenado.",
+            "Por ejemplo, where([1,2,3,4], 1.5) debe devolver 1 porque el segundo argumento de la función (1.5) es mayor que 1 (con índice 0 en el arreglo), pero menor que 2 (con índice 1).",
+            "Mientras que <code>where([20,3,5], 19)</code> debe devolver <code>2</code> porque una vez ordenado el arreglo se verá com <code>[3,5,20]</code> y <code>19</code> es menor que <code>20</code> (índice 2) y mayor que <code>5</code> (índice 1).",
             "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
           ]
         },
         "pt-br": {
-          "title": "Buscar e Destruir",
+          "title": "Qual o Meu Lugar?",
           "description": [
-            "Será fornecido a você uma matriz inicial (o primeiro argumento da função destroyer), seguido por um ou mais argumentos. Remova todos os elementos da matriz inicial que possuem o mesmo valor desses argumentos.",
-            "<strong>Nota</strong><br> Você precisa usar o objeto <code>arguments</code>.",
+            "Retorne o menor índice que um valor (segundo argumento) deve ser inserido em uma matriz (primeiro argumento) uma vez que esta foi ordenada. O valor retornado deve ser um número.",
+            "Por exemplo, <code>getIndexToIns([1,2,3,4], 1.5)</code> deve retornar <code>1</code> porque é maior do que <code>1</code> (índice 0), mas é menor que <code>2</code> (índice 1).",
+            "Da mesma forma, <code>getIndexToIns([20,3,5], 19)</code> deve retornar <code>2</code> porque uma vez que a matriz foi ordenada ficará da seguinte forma <code>[3,5,20]</code> e <code>19</code> é menor que <code>20</code> (índice 2) e maior que <code>5</code> (índice 1).",
             "Lembre-se de usar <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se você ficar travado. Escreva seu próprio código."
           ]
         }
       }
     },
     {
-      "id": "a24c1a4622e3c05097f71d67",
-      "title": "Where do I Belong",
+      "id": "af2170cad53daa0770fabdea",
+      "title": "Mutations",
       "description": [
-        "Return the lowest index at which a value (second argument) should be inserted into an array (first argument) once it has been sorted. The returned value should be a number.",
-        "For example, <code>getIndexToIns([1,2,3,4], 1.5)</code> should return <code>1</code> because it is greater than <code>1</code> (index 0), but less than <code>2</code> (index 1).",
-        "Likewise, <code>getIndexToIns([20,3,5], 19)</code> should return <code>2</code> because once the array has been sorted it will look like <code>[3,5,20]</code> and <code>19</code> is less than <code>20</code> (index 2) and greater than <code>5</code> (index 1).",
+        "Return true if the string in the first element of the array contains all of the letters of the string in the second element of the array.",
+        "For example, <code>[\"hello\", \"Hello\"]</code>, should return true because all of the letters in the second string are present in the first, ignoring case.",
+        "The arguments <code>[\"hello\", \"hey\"]</code> should return false because the string \"hello\" does not contain a \"y\".",
+        "Lastly, <code>[\"Alien\", \"line\"]</code>, should return true because all of the letters in \"line\" are present in \"Alien\".",
         "Remember to use <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
       ],
       "challengeSeed": [
-        "function getIndexToIns(arr, num) {",
-        "  // Find my place in this sorted array.",
-        "  return num;",
+        "function mutation(arr) {",
+        "  return arr;",
         "}",
         "",
-        "getIndexToIns([40, 60], 50);"
+        "mutation([\"hello\", \"hey\"]);"
       ],
       "tests": [
-        "assert(getIndexToIns([10, 20, 30, 40, 50], 35) === 3, 'message: <code>getIndexToIns([10, 20, 30, 40, 50], 35)</code> should return <code>3</code>.');",
-        "assert(getIndexToIns([10, 20, 30, 40, 50], 30) === 2, 'message: <code>getIndexToIns([10, 20, 30, 40, 50], 30)</code> should return <code>2</code>.');",
-        "assert(getIndexToIns([40, 60], 50) === 1, 'message: <code>getIndexToIns([40, 60], 50)</code> should return <code>1</code>.');",
-        "assert(getIndexToIns([3, 10, 5], 3) === 0, 'message: <code>getIndexToIns([3, 10, 5], 3)</code> should return <code>0</code>.');",
-        "assert(getIndexToIns([5, 3, 20, 3], 5) === 2, 'message: <code>getIndexToIns([5, 3, 20, 3], 5)</code> should return <code>2</code>.');",
-        "assert(getIndexToIns([2, 20, 10], 19) === 2, 'message: <code>getIndexToIns([2, 20, 10], 19)</code> should return <code>2</code>.');",
-        "assert(getIndexToIns([2, 5, 10], 15) === 3, 'message: <code>getIndexToIns([2, 5, 10], 15)</code> should return <code>3</code>.');"
+        "assert(mutation([\"hello\", \"hey\"]) === false, 'message: <code>mutation([\"hello\", \"hey\"])</code> should return false.');",
+        "assert(mutation([\"hello\", \"Hello\"]) === true, 'message: <code>mutation([\"hello\", \"Hello\"])</code> should return true.');",
+        "assert(mutation([\"zyxwvutsrqponmlkjihgfedcba\", \"qrstu\"]) === true, 'message: <code>mutation([\"zyxwvutsrqponmlkjihgfedcba\", \"qrstu\"])</code> should return true.');",
+        "assert(mutation([\"Mary\", \"Army\"]) === true, 'message: <code>mutation([\"Mary\", \"Army\"])</code> should return true.');",
+        "assert(mutation([\"Mary\", \"Aarmy\"]) === true, 'message: <code>mutation([\"Mary\", \"Aarmy\"])</code> should return true.');",
+        "assert(mutation([\"Alien\", \"line\"]) === true, 'message: <code>mutation([\"Alien\", \"line\"])</code> should return true.');",
+        "assert(mutation([\"floor\", \"for\"]) === true, 'message: <code>mutation([\"floor\", \"for\"])</code> should return true.');",
+        "assert(mutation([\"hello\", \"neo\"]) === false, 'message: <code>mutation([\"hello\", \"neo\"])</code> should return false.');",
+        "assert(mutation([\"voodoo\", \"no\"]) === false, 'message: <code>mutation([\"voodoo\", \"no\"])</code> should return false.');"
       ],
       "type": "bonfire",
       "isRequired": true,
       "solutions": [
-        "function getIndexToIns(arr, num) {\n  arr = arr.sort(function(a, b){return a-b;});\n  for (var i = 0; i < arr.length; i++) {\n    if (arr[i] >= num)\n      {\n        return i;\n      }\n  }\n  return arr.length;\n}"
+        "function mutation(arr) {\n  var hash = Object.create(null);\n  arr[0].toLowerCase().split('').forEach(function(c) {\n    hash[c] = true;\n  });\n  return !arr[1].toLowerCase().split('').filter(function(c) {\n    return !hash[c];\n  }).length;\n}\n\nmutation(['hello', 'hey']);\n"
       ],
       "MDNlinks": [
-        "Array.prototype.sort()"
+        "String.prototype.indexOf()"
       ],
       "challengeType": 5,
       "translations": {
         "es": {
-          "title": "¿Cuál es mi Asiento?",
+          "title": "Mutaciones",
           "description": [
-            "Devuelve el menor índice en el que un valor (segundo argumento) debe ser insertado en un arreglo (primer argumento) una vez ha sido ordenado.",
-            "Por ejemplo, where([1,2,3,4], 1.5) debe devolver 1 porque el segundo argumento de la función (1.5) es mayor que 1 (con índice 0 en el arreglo), pero menor que 2 (con índice 1).",
-            "Mientras que <code>where([20,3,5], 19)</code> debe devolver <code>2</code> porque una vez ordenado el arreglo se verá com <code>[3,5,20]</code> y <code>19</code> es menor que <code>20</code> (índice 2) y mayor que <code>5</code> (índice 1).",
+            "Crea una función que devuelva <code>true</code> si la cadena de texto del primer elemento de un arreglo contiene todas las letras de la cadena de texto del segundo elemento del arreglo.",
+            "Por ejemplo, <code>[\"hello\", \"Hello\"]</code>, debe devolver <code>true</code> porque todas las letras en la segunda cadena de texto están presentes en la primera, sin distinguir entre mayúsculas y minúsculas.",
+            "En el caso de <code>[\"hello\", \"hey\"]</code> la función debe devolver false porque la cadena de texto \"hello\" no contiene una \"y\".",
+            "Finalmente, <code>[\"Alien\", \"line\"]</code>, la función debe devolver <code>true</code> porque todas las letras en \"line\" están presentes en \"Alien\".",
             "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
           ]
         },
         "pt-br": {
-          "title": "Qual o Meu Lugar?",
+          "title": "Mutações",
           "description": [
-            "Retorne o menor índice que um valor (segundo argumento) deve ser inserido em uma matriz (primeiro argumento) uma vez que esta foi ordenada. O valor retornado deve ser um número.",
-            "Por exemplo, <code>getIndexToIns([1,2,3,4], 1.5)</code> deve retornar <code>1</code> porque é maior do que <code>1</code> (índice 0), mas é menor que <code>2</code> (índice 1).",
-            "Da mesma forma, <code>getIndexToIns([20,3,5], 19)</code> deve retornar <code>2</code> porque uma vez que a matriz foi ordenada ficará da seguinte forma <code>[3,5,20]</code> e <code>19</code> é menor que <code>20</code> (índice 2) e maior que <code>5</code> (índice 1).",
+            "Retorne verdadeiro se o texto no primeiro elemento da matriz contém todas as letras do texto no segundo elemento da matriz.",
+            "Por exemplo, <code>[\"hello\", \"Hello\"]</code>, deve retornar verdadeiro pois todas as letras no segundo text estão presentes no primeiro texto.",
+            "Os argumentos <code>[\"hello\", \"hey\"]</code> devem retornar falso por o texto \"hello\" não contém a letra \"y\".",
+            "Por último, <code>[\"Alien\", \"line\"]</code>, deve retornar verdadeiro pois todas as letras em \"line\" estão presentes em \"Alien\".",
             "Lembre-se de usar <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se você ficar travado. Escreva seu próprio código."
           ]
         }
       }
     },
     {
-      "id": "56533eb9ac21ba0edf2244e2",
-      "title": "Caesars Cipher",
+      "id": "a9bd25c716030ec90084d8a1",
+      "title": "Chunky Monkey",
       "description": [
-        "One of the simplest and most widely known <dfn>ciphers</dfn> is a <code>Caesar cipher</code>, also known as a <code>shift cipher</code>. In a <code>shift cipher</code> the meanings of the letters are shifted by some set amount.",
-        "A common modern use is the <a href=\"https://en.wikipedia.org/wiki/ROT13\" target='_blank'>ROT13</a> cipher, where the values of the letters are shifted by 13 places. Thus 'A' &harr; 'N', 'B' &harr;  'O' and so on.",
-        "Write a function which takes a <a href=\"https://en.wikipedia.org/wiki/ROT13\" target='_blank'>ROT13</a> encoded string as input and returns a decoded string.",
-        "All letters will be uppercase. Do not transform any non-alphabetic character (i.e. spaces, punctuation), but do pass them on.",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
+        "Write a function that splits an array (first argument) into groups the length of <code>size</code> (second argument) and returns them as a two-dimensional array.",
+        "Remember to use <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
       ],
       "challengeSeed": [
-        "function rot13(str) { // LBH QVQ VG!",
-        "  ",
-        "  return str;",
+        "function chunkArrayInGroups(arr, size) {",
+        "  // Break it up.",
+        "  return arr;",
         "}",
         "",
-        "// Change the inputs below to test",
-        "rot13(\"SERR PBQR PNZC\");"
-      ],
-      "tail": [
-        ""
-      ],
-      "solutions": [
-        "var lookup = {\n  'A': 'N','B': 'O','C': 'P','D': 'Q',\n  'E': 'R','F': 'S','G': 'T','H': 'U',\n  'I': 'V','J': 'W','K': 'X','L': 'Y',\n  'M': 'Z','N': 'A','O': 'B','P': 'C',\n  'Q': 'D','R': 'E','S': 'F','T': 'G',\n  'U': 'H','V': 'I','W': 'J','X': 'K',\n  'Y': 'L','Z': 'M' \n};\n\nfunction rot13(encodedStr) {\n  var codeArr = encodedStr.split(\"\");  // String to Array\n  var decodedArr = []; // Your Result goes here\n  // Only change code below this line\n  \n  decodedArr = codeArr.map(function(letter) {\n    if(lookup.hasOwnProperty(letter)) {\n      letter = lookup[letter];\n    }\n    return letter;\n  });\n\n  // Only change code above this line\n  return decodedArr.join(\"\"); // Array to String\n}"
+        "chunkArrayInGroups([\"a\", \"b\", \"c\", \"d\"], 2);"
       ],
       "tests": [
-        "assert(rot13(\"SERR PBQR PNZC\") === \"FREE CODE CAMP\", 'message: <code>rot13(\"SERR PBQR PNZC\")</code> should decode to <code>FREE CODE CAMP</code>');",
-        "assert(rot13(\"SERR CVMMN!\") === \"FREE PIZZA!\", 'message: <code>rot13(\"SERR CVMMN!\")</code> should decode to <code>FREE PIZZA!</code>');",
-        "assert(rot13(\"SERR YBIR?\") === \"FREE LOVE?\", 'message: <code>rot13(\"SERR YBIR?\")</code> should decode to <code>FREE LOVE?</code>');",
-        "assert(rot13(\"GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.\") === \"THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.\", 'message: <code>rot13(\"GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.\")</code> should decode to <code>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.</code>');"
+        "assert.deepEqual(chunkArrayInGroups([\"a\", \"b\", \"c\", \"d\"], 2), [[\"a\", \"b\"], [\"c\", \"d\"]], 'message: <code>chunkArrayInGroups([\"a\", \"b\", \"c\", \"d\"], 2)</code> should return <code>[[\"a\", \"b\"], [\"c\", \"d\"]]</code>.');",
+        "assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3), [[0, 1, 2], [3, 4, 5]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3)</code> should return <code>[[0, 1, 2], [3, 4, 5]]</code>.');",
+        "assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2), [[0, 1], [2, 3], [4, 5]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2)</code> should return <code>[[0, 1], [2, 3], [4, 5]]</code>.');",
+        "assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4), [[0, 1, 2, 3], [4, 5]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4)</code> should return <code>[[0, 1, 2, 3], [4, 5]]</code>.');",
+        "assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3), [[0, 1, 2], [3, 4, 5], [6]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3)</code> should return <code>[[0, 1, 2], [3, 4, 5], [6]]</code>.');",
+        "assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4), [[0, 1, 2, 3], [4, 5, 6, 7], [8]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4)</code> should return <code>[[0, 1, 2, 3], [4, 5, 6, 7], [8]]</code>.');",
+        "assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2), [[0, 1], [2, 3], [4, 5], [6, 7], [8]], 'message: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2)</code> should return <code>[[0, 1], [2, 3], [4, 5], [6, 7], [8]]</code>.');"
       ],
       "type": "bonfire",
+      "isRequired": true,
+      "solutions": [
+        "function chunkArrayInGroups(arr, size) {\n  var out = [];\n  for (var i = 0; i < arr.length; i+=size) {\n    out.push(arr.slice(i,i+size));\n  }\n  return out;\n}\n\nchunkArrayInGroups(['a', 'b', 'c', 'd'], 2);\n"
+      ],
       "MDNlinks": [
-        "String.prototype.charCodeAt()",
-        "String.fromCharCode()"
+        "Array.prototype.push()",
+        "Array.prototype.slice()"
       ],
       "challengeType": 5,
-      "isRequired": true,
-      "releasedOn": "January 1, 2016",
       "translations": {
         "es": {
-          "title": "Cifrado César",
+          "title": "En mil Pedazos",
           "description": [
-            "Uno de los <dfn>cifrados</dfn> más simples y ampliamente conocidos es el <code>cifrado César</code>, también llamado <code>cifrado por desplazamiento</code>. En un <code>cifrado por desplazamiento</code> los significados de las letras se desplazan por una cierta cantidad.",
-            "Un uso moderno común es el cifrado <a href=\"https://es.wikipedia.org/wiki/ROT13\" target='_blank'>ROT13</a> , donde los valores de las letras se desplazan 13 espacios. De esta forma 'A' &harr; 'N', 'B' &harr;  'O' y así.",
-            "Crea una función que tome una cadena de texto cifrada en <a href=\"https://es.wikipedia.org/wiki/ROT13\" target='_blank'>ROT13</a> como argumento y que devuelva la cadena de texto decodificada.",
-            "Todas las letras que se te pasen van a estar en mayúsculas. No transformes ningún caracter no-alfabético (por ejemplo: espacios, puntuación). Simplemente pásalos intactos.",
+            "Escribe una función que parta un arreglo (primer argumento) en fragmentos de una longitud dada (segundo argumento) y los devuelva en forma de un arreglo bidimensional.",
             "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
           ]
         },
         "pt-br": {
-          "title": "Cifra de César",
+          "title": "Em Pedaços",
           "description": [
-            "Uma das mais simples e mais conhecidas <dfn>cifras</dfn> é a <code>cifra de César</code>, também conhecida como <code>cifra de troca</code>. Em uma <code>cifra de troca</code> os significados das letras são deslocados por um determinado valor.",
-            "Um uso moderno comum é a cifra <a href=\"https://en.wikipedia.org/wiki/ROT13\" target='_blank'>ROT13</a>, aonde os valores das letras são deslocados por 13 lugares. Logo 'A' &harr; 'N', 'B' &harr;  'O' e assim por diante.",
-            "Escreva uma função que recebe um texto criptografado com <a href=\"https://en.wikipedia.org/wiki/ROT13\" target='_blank'>ROT13</a> como entrada e retorna o texto desencriptado.",
-            "Todas as letras serão maiúsculas. Não transforme nenhum caracter não alfanuméricos (como espaços, pontuação), mas passe-os adiante.",
+            "Escreva uma funcção que divide uma matriz (primeiro argumento) em grupos de tamanho <code>size</code> (segundo argumento) e os retorna em uma matriz bidimensional.",
             "Lembre-se de usar <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se você ficar travado. Escreva seu próprio código."
           ]
         }
       }
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/seed/challenges/02-javascript-algorithms-and-data-structures/basic-data-structures.json b/seed/challenges/02-javascript-algorithms-and-data-structures/basic-data-structures.json
new file mode 100644
index 00000000000000..f4b8e328d4024a
--- /dev/null
+++ b/seed/challenges/02-javascript-algorithms-and-data-structures/basic-data-structures.json
@@ -0,0 +1,737 @@
+{
+  "name": "Debugging",
+  "order": 4,
+  "time": "1 hour",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "587d78b2367417b2b2512b0d",
+      "title": "Introduction to the Debugging Challenges",
+      "description": [
+        [
+          "http://imgs.xkcd.com/comics/debugging.png",
+          "XKCD web comic walking through the convoluted process of debugging. The programmer moves from a browser problem, to a keyboard driver issue, receives a cryptic system utility error message, and ends by finding the sword of Martin the Warrior.",
+          "Debugging is a valuable and (unfortunately) necessary tool for programmers. It follows the testing phase of checking if your code works as intended, and discovering it does not. Debugging is the process of finding exactly what isn't working and fixing it.",
+          ""
+        ],
+        [
+          "",
+          "",
+          "After spending time creating a brilliant block of code, it is tough realizing it may have errors. These issues generally come in three forms: 1) syntax errors that prevent a program from running, 2) runtime errors when code fails to execute or has unexpected behavior, and 3) semantic (or logical) errors when code doesn't do what it's meant to.<br><br>Modern code editors (and experience) can help identify syntax errors. Semantic and runtime errors are harder to find. They may cause your program to crash, make it run forever, or give incorrect output. Think of debugging as trying to understand why your code is behaving the way it is.<br><br>Example of a syntax error - often detected by the code editor:<br><br><blockquote>funtion willNotWork( {<br>&nbsp;&nbsp;console.log(\"Yuck\");<br>}<br>// \"function\" keyword is misspelled and there's a missing parenthesis</blockquote><br><br>Here's an example of a runtime error - often detected while the program executes:<br><br><blockquote>function loopy() {<br>&nbsp;&nbsp;while(true) {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Hello, world!\");<br>&nbsp;&nbsp;}<br>}<br>// Calling loopy starts an infinite loop, which may crash your browser</blockquote><br><br>Example of a semantic error - often detected after testing code output:<br><br><blockquote>function calcAreaOfRect(w, h) {<br>&nbsp;&nbsp;return w + h; // This should be w * h<br>}<br>let myRectArea = calcAreaOfRect(2, 3);<br>// Correct syntax and the program executes, but this gives the wrong answer</blockquote>",
+          ""
+        ],
+        [
+          "",
+          "",
+          "Debugging is frustrating, but it helps to develop (and follow) a step-by-step approach to review your code. This means checking the intermediate values and types of variables to see if they are what they should be. You can start with a simple process of elimination.<br><br>For example, if function A works and returns what it's supposed to, then function B may have the issue. Or start checking values in a block of code from the middle to try to cut the search space in half. A problem in one spot indicates a bug in the first half of the code. If not, it's likely in the second.<br><br>This section will cover a couple helpful tools to find bugs, and some of the common forms they take. Fortunately, debugging is a learnable skill that just requires a little patience and practice to master.",
+          ""
+        ]
+      ],
+      "releasedOn": "",
+      "challengeSeed": [],
+      "tests": [],
+      "type": "Waypoint",
+      "challengeType": 7,
+      "isRequired": false,
+      "titleEs": "",
+      "descriptionEs": [
+        []
+      ],
+      "titleFr": "",
+      "descriptionFr": [
+        []
+      ],
+      "titleDe": "",
+      "descriptionDe": [
+        []
+      ]
+    },
+    {
+      "id": "587d78b2367417b2b2512b0e",
+      "title": "Add items to an array with push() and unshift()",
+      "description": [
+        "An array's length, like the data types it can contain, is not fixed. Arrays can be defined with a length of any number of elements, and elements can be added or removed over time. In this challenge, we will look at two methods with which we can programmatically modify an array: Array.push() and Array.unshift(). ",
+        "Both methods take one or more elements as parameters and add those elements to the array the method is being called on; the push() method adds elements to the end of an array, and unshift() adds elements to the beginning. Consider the following:",
+        "<code>let twentyThree = 'XXIII';</code>",
+        "<code>let romanNumerals = ['XXI', 'XXII'];</code>",
+        "<code>romanNumerals.unshift('XIX', 'XX'); </code>",
+        "<code>// now equals ['XIX', 'XX', 'XXI', 'XXII']</code>",
+        "<code>romanNumerals.push(twentyThree); </code>",
+        "<code>// now equals ['XIX', 'XX', 'XXI', 'XXII', 'XXIII']</code>",
+        "Notice that we can also pass variables, which allows us even greater flexibility in dynamically modifying our array's data.",
+        "Instructions:",
+        "We have defined a function, mixedNumbers, which we are passing an array as an argument. Modify the function by using push() and shift() to add 'I', 2, 'three', to the beginning of the array and 7, 'VIII', '9' to the end so that the returned array contains representations of the numbers 1-9 in order."
+      ],
+      "challengeSeed": [
+        "function mixedNumbers(arr) {",
+        "    // change code below this line",
+        "    // change code above this line",
+        "    return arr;",
+        "}",
+        "// do not change code below this line",
+        "mixedNumbers(['IV', 5, 'six'])"
+      ],
+      "tests": [
+        "assert.deepEqual(mixedNumbers(['IV', 5, 'six']), ['I', 2, 'three', 'IV', 5, 'six', 7, 'VIII', '9'], \"<code>mixedNumbers(['IV', 5, 'six'])</code> should now return <code>['I', 2, 'three', 'IV', 5, 'six', 7, 'VIII', '9']</code>\");",
+        "assert.notStrictEqual(mixedNumbers.toString().search(/\\.push\\(/), -1, 'The <code>mixedNumbers</code> function should utilize the <code>push()</code> method.);' ",
+        "assert.notStrictEqual(mixedNumbers.toString().search(/\\.unshift\\(/), -1, \"The <code>mixedNumbers</code> function should utilize the <code>unshift()</code> method.\");"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d78b2367417b2b2512b0f",
+      "title": "Remove items from an array with pop() and shift()",
+      "description": [
+        "Both push() and unshift() have corresponding methods that are nearly functional opposites: pop() and shift(). As you may have guessed by now, instead of adding, pop() removes an element from the end of an array, while shift() removes an element from the beginning. The key difference between pop() and shift() and their cousins push() and unshift(), is that neither method takes parameters, and each only allows an array to be modified by a single element at a time.",
+        "Let's take a look:",
+        "<code>let greetings = ['whats up?', 'hello', 'see ya!'];</code>",
+        "<code>greetings.pop() </code>",
+        "<code>// now equals ['whats up?', 'hello']</code>",
+        "<code>greetings.shift() </code>",
+        "<code>// now equals ['hello']</code>",
+        "We can also return the value of the removed element with either method like this:",
+        "<code>let popped = greetings.pop(); </code>",
+        "<code>// returns 'hello'</code>",
+        "<code>// greetings now equals []</code>",
+        "Instructions",
+        "We have defined a function, popShift, which takes an array as an argument and returns a new array. Modify the function, using pop() and shift(), to remove the first and last elements of the argument array, and assign the removed elements to their corresponding variables, so that the returned array contains their values."
+      ],
+      "challengeSeed": [
+        "function popShift(arr) {",
+        "    let popped = // change code here",
+        "    let shifted = // change code here",
+        "    return [shifted, popped];",
+        "}",
+        "// do not change code below this line",
+        "popShift(['challenge', 'is', 'not', 'complete']);"
+      ],
+      "tests": [
+        "assert.deepEqual(popShift(['challenge', 'is', 'not', 'complete']), ['challenge', 'complete'], \"<code>popShift(['challenge', 'is', 'not', 'complete'])</code> should return <code>['challenge', 'complete']</code>.\");",
+        "assert.notStrictEqual(popShift.toString().search(/\\.pop\\(/), -1, \"The <code>popShift</code> function should utilize the <code>pop()</code> method.\");",
+        "assert.notStrictEqual(popShift.toString().search(/\\.shift\\(/), -1, \"The <code>popShift</code> function should utilize the <code>shift()</code> method.\");"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d78b2367417b2b2512b10",
+      "title": "Remove items using splice()",
+      "description": [
+        "Ok, so we've learned how to remove elements from the beginning and end of arrays using pop() and shift(), but what if we want to remove an element from somewhere in the middle? Or remove more than one element at once? Well, that's where splice() comes in. splice() allows us to do just that: remove any numnber of consecutive",
+        "elements from anywhere on an array.",
+        "splice() can take up to 3 parameters, but for now, we'll focus on just the first 2. The first two parameters of splice() are integers which represent indexes, or postions, of the array that splice() is being called upon. And remember, arrays are zero-indexed, so to indicate the first element of an array, we would use 0. splice()'s first parameter represents the index on the array from which to begin removing elements, while the second parameter indicates the number of elements to delete. For example:",
+        "<code>let array = ['today', 'was', 'not', 'so', 'great'];</code>",
+        "<code>array.splice(2, 2); </code>",
+        "<code>// indicates that splice() should remove 2 elements beginning with the 3rd element</code>",
+        "<code>// array now equals ['today', 'was', 'great']</code>",
+        "splice() not only modifies the array it is being called on, but it also returns a new array containing the value of the removed elements. For example:",
+        "<code>let array = ['today', 'was', 'not', 'so', 'great'];</code>",
+        "<code>let newArray = array.splice(3, 2); </code>",
+        "<code>// newArray equals ['so', 'great']</code>",
+        "Instructions",
+        "We've defined a function, sumOfTen, which takes an array as an argument and returns the sum of that array's elements. Modify the function, using splice(), so that it returns a value of 10."
+      ],
+      "challengeSeed": [
+        "function sumOfTen(arr) {",
+        "    // change code below this line",
+        "    // change code above this line",
+        "    return arr.reduce((a, b) => a + b);",
+        "}",
+        "// do not change code below this line",
+        "sumOfTen([2, 5, 1, 5, 2, 1]);"
+      ],
+      "tests": [
+        "assert.strictEqual(sumOfTen([2, 5, 1, 5, 2, 1]), 10, \"<code>sumOfTen</code> should return 10.\");",
+        "assert.notStrictEqual(sumOfTen.toString().search(/\\.splice\\(/), -1, \"The <code>sumOfTen</code> function should utilize the <code>splice()</code> method.\")"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d78b3367417b2b2512b11",
+      "title": "Add items using splice()",
+      "description": [
+        "Remember in the last challenge we mentioned that splice() can take up to three parameters? Well, we can go one step further with splice() — in addition to removing elements, we can use that third parameter, which represents one or more elements, to add them as well. This can be incredibly useful for quickly switching out an element, or a set of elements, for another. For instance, let's say you're storing a color scheme for a set of DOM elements in an array, and want to dynamically change a color based on some action:",
+        "<code>function colorChange(arr, index, newColor) {</code>",
+        "<code>  arr.splice(index, 1, newColor);</code>",
+        "<code>  return arr;</code>",
+        "<code>} </code>",
+        "<code>let colorScheme = ['#878787', '#a08794', '#bb7e8c', '#c9b6be', '#d1becf'];</code>",
+        "<code>colorScheme = colorChange(colorScheme, 2, \"#332327\");</code>",
+        "<code>// we have removed '#bb7e8c' and added '#332327' in its place</code>",
+        "<code>// colorScheme now equals ['#878787', '#a08794', '#332327', '#c9b6be', '#d1becf']</code>",
+        "This function takes an array of hex values, an index at which to remove an element, and the new color to replace the removed element with. The return value is an array containing a newly modified color scheme! While this example is a bit oversimplified, we can see the value that utilizing splice() to its maximum potential can have.",
+        "Instructions",
+        "We have defined a function, htmlColorNames, which takes an array of html colors as an argument. Modify the function using splice() to remove the first two elements of the array and add 'DarkSalmon' and 'BlanchedAlmond' in their respective places."
+      ],
+      "challengeSeed": [
+        "function htmlColorNames(arr) {",
+        "    // change code below this line",
+        "    ",
+        "    // change code above this line",
+        "    return arr;",
+        "} ",
+        "// do not change code below this line",
+        "htmlColorNames(['DarkGoldenRod', 'WhiteSmoke', 'LavenderBlush', 'PaleTurqoise', 'FireBrick']);"
+      ],
+      "tests": [
+        "assert.deepEqual(htmlColorNames(['DarkGoldenRod', 'WhiteSmoke', 'LavenderBlush', 'PaleTurqoise', 'FireBrick']), ['DarkSalmon', 'BlanchedAlmond', 'LavenderBlush', 'PaleTurqoise', 'FireBrick'], \"<code>htmlColorNames</code> should return ['DarkSalmon', 'BlanchedAlmond', 'LavenderBlush', 'PaleTurqoise', 'FireBrick']\");",
+        "assert.notStrictEqual(htmlColorNames.toString().search(/\\.splice\\(/), -1, \"The <code>htmlColorNames</code> function should utilize the <code>splice()</code> method.\")"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b7a367417b2b2512b12",
+      "title": "Copy an array with slice()",
+      "description": [
+        "The next method we will cover is slice(). slice(), rather than modifying an array, copies, or extracts, a given mumber of elements to a new array, leaving the array it is called upon untouched. slice() takes only 2 parameters — the first is the index at which to begin extraction, and the second is the index at which to stop extraction (extraction will occur up to, but not including the element at this index). Consider this:",
+        "<code>let weatherConditions = ['rain', 'snow', 'sleet', 'hail', 'clear'];</code>",
+        "<code>let todaysWeather = weatherConditions.slice(1, 3);</code>",
+        "<code>// todaysWeather equals ['snow', 'sleet'];</code>",
+        "<code>// weatherConditions still equals ['rain', 'snow', 'sleet', 'hail', 'clear']</code>",
+        "In effect, we have created a new array by extracting elements from an existing array.",
+        "Instructions",
+        "Instructions: We have defined a function, forecast, that takes an array as an argument. Modify the function using slice() to extract information from the argument array and return a new array that contains the elements 'warm' and 'sunny'."
+      ],
+      "challengeSeed": [
+        "function forecast(arr) {",
+        "    // change code below this line",
+        "  ",
+        "    return arr;",
+        "}",
+        "// do not change code below this line",
+        "forecast(['cold', 'rainy', 'warm', 'sunny', 'cool', 'thunderstorms']);"
+      ],
+      "tests": [
+        "assert.deepEqual(forecast(['cold', 'rainy', 'warm', 'sunny', 'cool', 'thunderstorms']), ['warm', 'sunny'], \"<code>forecast</code> should return <code>['warm', 'sunny'].\");",
+        "assert.notStrictEqual(forecast.toString().search(/\\.slice\\(/), -1, \"The <code>forecast</code> function should utilize the <code>slice()</code> method.\");"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b7b367417b2b2512b13",
+      "title": "Copy an array with spread syntax",
+      "description": [
+        "While slice() allows us to be selective about what elements of an array to copy, ammong several other useful tasks, ES6's new spread syntax allows us to easily copy all of an array's elements, in order, with a simple and highly readable syntax. The spread syntax simply looks like this: ...",
+        "In practice, we can use the spread syntax to copy an array like so:",
+        "<code>let thisArray = [true, true, undefined, false, null];</code>",
+        "<code>let thatArray = [...thisArray];</code>",
+        "<code>// thatArray equals [true, true, undefined, false, null]</code>",
+        "<code>// thisArray remains unchanged, and is identical to thatArray</code>",
+        "Instructions",
+        "We have defined a function, copyMachine which takes arr (an array) and num (a number) as arguments. The function is supposed to return a new array made up of num copies of arr. We have done most of the work for you, but it doesn't work quite right yet. Modidy the function using the spead syntax so that it works correctly (hint: another method we have already covered might come in handy here!)."
+      ],
+      "challengeSeed": [
+        "function copyMachine(arr, num) {",
+        "    let newArr = [];",
+        "    while (num >= 1) {",
+        "  // change code below this line",
+        "  // change code above this line",
+        "  num--;",
+        "    }",
+        "    return newArr;",
+        "}",
+        "copyMachine([true, false, true], 2);"
+      ],
+      "tests": [
+        "assert.deepEqual(copyMachine([true, false, true], 2), [[true, false, true], [true, false, true]], \"<code>copyMachine([true, false, true], 2)</code> should return <code>[[true, false, true], [true, false, true]]</code>.\")",
+        "assert.deepEqual(copyMachine([1, 2, 3], 5), [[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]], \"<code>copyMachine([1, 2, 3], 5)</code> should return <code>[[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]]</code>.\");",
+        "assert.deepEqual(copyMachine([true, true, null], 1), [[true, true, null]], \"<code>copyMachine([true, true, null], 1)</code> should return <code>[[true, true, null]]</code>.\");",
+        "assert.deepEqual(copyMachine(['it works'], 3), [['it works'], ['it works'], ['it works']], \"<code>copyMachine(['it works'], 3)</code> should return <code>[['it works'], ['it works'], ['it works']]</code>.\");",
+        "assert.notStrictEqual(copyMachine.toString().search(/\\.\\.\\./), -1, \"The <code>copyMachine</code> function should utilize the <code>...</code> syntax.\");"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b7b367417b2b2512b14",
+      "title": "Check for the presence of an element with indexOf()",
+      "description": [
+        "Since arrays can be changed, or mutated, at any time, there's no guarantee about where a particular piece of data will be on a given array, or if that element even still exists. Luckily, JavaScript provides us with another built-in method, indexOf(), that allows us to quickly and easily check for the presence of an element on an array. indexOf() takes an element as a parameter, and when called, it returns the position, or index, of that element, or -1 if the element does not exist on the array.",
+        "For example:",
+        "<code>let fruits = ['apples', 'pears', 'oranges', 'peaches', 'pears'];</code>",
+        "<code>fruits.indexOf('dates') // returns -1</code>",
+        "<code>fruits.indexOf('oranges') // returns 2</code>",
+        "<code>fruits.indexOf('pears') // returns 1, the first index at which the element exists</code>",
+        "Instructions",
+        "indexOf() can be incredibly useful for quickly checking for the presence of an element on an array. We have defined a function, quickCheck, that takes an array and an element as arguments. Modify the function using indexOf() so that it returns true if the passed element exists on the array, and false if it does not."
+      ],
+      "challengeSeed": [
+        "function quickCheck(arr, elem) {",
+        "    if (arr.indexOf(elem) !== -1) {",
+        "  return true",
+        "    } else {",
+        "  return false;",
+        "    }",
+        "}"
+      ],
+      "tests": [
+        "assert.strictEqual(quickCheck(['squash', 'onions', 'shallots'], 'mushrooms'), false, \"<code>quickCheck(['squash', 'onions', 'shallots'], 'mushrooms')</code> should return <code>false</code>.\");",
+        "assert.strictEqual(quickCheck(['squash', 'onions', 'shallots'], 'onions'), true, \"<code>quickCheck(['squash', 'onions', 'shallots'], 'onions')</code> should return <code>true</code>.\");",
+        "assert.strictEqual(quickCheck([3, 5, 9, 125, 45, 2], 125), true, \"<code>quickCheck([3, 5, 9, 125, 45, 2], 125)</code> should return <code>true</code>.\");",
+        "assert.strictEqual(quickCheck([true, false, false], undefined), false, \"<code>quickCheck([true, false, false], undefined)</code> should return <code>false</code>.\");",
+        "assert.notStrictEqual(quickCheck.toString().search(/\\.indexOf\\(/), -1, \"The <code>quickCheck</code> function should utilize the <code>indexOf() method.</code>\");"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b7b367417b2b2512b15",
+      "title": "Iterate through all the items in an array",
+      "description": [
+        "Sometimes when working with arrays, it is very handy to be able to iterate through each item to find one or more elements that we might need, or to manipulate an array based on which data items meet a certain set of requirements. JavaScript offers several built in methods that each iterate over arrays in slightly different ways to achieve different results (such as every(), forEach(), map(), etc.), however the technique which is most flexible and offers us the greatest amount of control is a simple for loop.",
+        "For example:",
+        "<code>function greaterThanTen(arr) {</code>",
+        "<code>  let newArr = [];</code>",
+        "<code>  for (let i = 0; i < arr.length; i++) {</code>",
+        "<code>    if (arr[i] > 10) {</code>",
+        "<code>      newArr.push(arr[i]);</code>",
+        "<code>    }</code>",
+        "<code>  }</code>",
+        "<code>  return newArr</code>",
+        "<code>}</code>",
+        "<code>greaterThanTen([2, 12, 8, 14, 80, 0, 1]);</code>",
+        "<code>// returns [12, 14, 80]</code>",
+        "Using a for loop, this function iterates through and accesses each element of the array, and subjects it to a simple test that we have created. In this way, we have easily and programmatically determined which data items are greater than 10, and returned a new array containing those items.",
+        "Instructions",
+        "We have defined a function, filteredArray, which takes arr, a nested array, and elem as arguments, and returns a new array. elem represents an element that may or may not be present on one or more of the arrays nested within arr. Modify the function, using a for loop, to return a filtered version of the passed array such that any array nested within arr containing elem has been removed."
+      ],
+      "challengeSeed": [
+        "function filteredArray(arr, num) {",
+        "    newArr = [];",
+        "    // change code below this line",
+        "    // change code above this line",
+        "    return newArr;",
+        "}",
+        "filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3);"
+      ],
+      "tests": [
+        "assert.deepEqual(filteredArray([ [10, 8, 3], [14, 6, 23], [3, 18, 6] ], 18), [[10, 8, 3], [14, 6, 23]], \"<code>filteredArray([[10, 8, 3], [14, 6, 23], [3, 18, 6]], 18)</code> should return <code>[[10, 8, 3], [14, 6, 23]]</code>\");",
+        "assert.deepEqual(filteredArray([ ['trumpets', 2], ['flutes', 4], ['saxaphones', 2] ], 2), [['flutes', 4]], \"<code>filteredArray([['trumpets', 2], ['flutes', 4], ['saxaphones'], 2], 2)</code> should return <code>[['flutes', 4]]</code>\");",
+        "assert.deepEqual(filteredArray([['amy', 'beth', 'sam'], ['dave', 'sean', 'peter']], 'peter'), [['amy', 'beth', 'sam']], \"<code>filteredArray([['amy', 'beth', 'sam'], ['dave', 'sean', 'peter']], 'peter')</code> should return [['amy', 'beth', 'sam']].\");",
+        "assert.deepEqual(filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3), [], \"<code>filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3)</code> should return <code>[]</code>.\");",
+        "assert.notStrictEqual(filteredArray.toString().search(/for/), -1, \"The <code>filteredArray</code> function should utilize a <code>for</code> loop.\");"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b7b367417b2b2512b16",
+      "title": "Create complex nested arrays",
+      "description": [
+        "One of the most powerful features when thinking of arrays as data structures, is that arrays can contain, or even be completely made up of other arrays. We have seen arrays that contain arrays in previous challenges, but fairly simple ones. However, arrays can contain an infinite depth of arrays that can contain other arrays, each with their own arbitrary levels of depth, and so on. In this way, an array can very quickly become very complex data structure, Consider the following example:",
+        "<code>let nestedArray = [ // top, or first level - the outer most array</code>",
+        "<code>  ['deep'], // an array within an array, 2 levels of depth</code>",
+        "<code>  [ </code>",
+        "<code>    ['deeper'], ['deeper'] // 2 arrays nested 3 levels deep</code>",
+        "<code>  ], </code>",
+        "<code>  [ </code>",
+        "<code>    [ </code>",
+        "<code>      ['deepest'], ['deepest'] // 2 arrays nested 4 levels deep </code>",
+        "<code>    ], </code>",
+        "<code>    [ </code>",
+        "<code>      [</code>",
+        "<code>        ['deepest-est?'] // an array nested 5 levels deep</code>",
+        "<code>      ] </code>",
+        "<code>    ]</code>",
+        "<code>  ], </code>",
+        "<code>];</code>",
+        "While this example may seem convoluted, this level of complexity is not unheard of, or even unusual, when dealing with large amounts of data.",
+        "However, we can still very easily access the deepest levels of an array this complex with bracket notation:",
+        "<code>console.log(nestedArray[2][1][0][0][0]);</code>",
+        "<code>// logs 'deepest-est?'</code>",
+        "And now that we know where that piece of data is, we can reset it if we need to:",
+        "<code>nestedArray[2][1][0][0][0] = 'deeper still';</code>",
+        "<code>console.log(nestedArray[2][1][0][0][0]);</code>",
+        "<code>// now logs 'deeper still'</code>",
+        "Instructions",
+        "We have defined a variable, myNestedArray, set equal to an array. Modify myNestedArray, using any combination of strings, numbers, and booleans for data elements, so that it has exactly three levels of depth (remember, the outer-most array is level 1)."
+      ],
+      "challengeSeed": [
+        "let myNestedArray = [",
+        "  ",
+        "  // change code here",
+        "  ",
+        "];"
+      ],
+      "tests": [
+        "assert.strictEqual((function(arr) { let flattened = (function flatten(arr) { const flat = [].concat(...arr); return flat.some (Array.isArray) ? flatten(flat) : flat; })(arr); for (let i = 0; i < flattened.length; i++) { if ( typeof flattened[i] !== 'number' && typeof flattened[i] !== 'string' && typeof flattened[i] !== 'boolean') { return false } } return true })(myNestedArray), true, \"<code>myNestedArray</code> should contain only numbers, booleans, and strings as data elements.\");",
+        "assert((function(arr) { for (let i = 0; i < arr.length; i++) { if (Array.isArray(arr[i])) {for (let j = 0; j < arr[i].length; j++) { if (Array.isArray(arr[i][j])) { return true } } } } })(myNestedArray) === true && (function(arr) { for (let i = 0; i < arr.length; i++) { for (let j = 0; j < arr[i].length; j++) { for (let k = 0; k < arr[i][j].length; k++) { if ( Array.isArray(arr[i][j][k]) ) { return false } } } } })(myNestedArray) === undefined, \"<code>myNestedArray</code> should have exactly 3 levels of depth.\");"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b7b367417b2b2512b17",
+      "title": "Combining arrays with spread syntax",
+      "description": [
+        "Another huge advantage of the spread syntax, is the ability to combine arrays, or to insert all the elements of one array into another, at any index. With more traditional syntaxes, we can concatenate arrays, but this only allows us to combine arrays at the end of one, and at the start of another. Spread syntax makes the following operation extremely simple:",
+        "<code>let thisArray = ['sage', 'rosemary', 'parsely', 'thyme'];</code>",
+        "<code>let thatArray = ['basil', 'cilantro', ...thisArray, 'corriander'];</code>",
+        "<code>// thatArray now equals ['basil', 'cilantro', 'sage', 'rosemary', 'parsely', 'thyme', 'corriander']</code>",
+        "Using spread syntax, we have just achieved an operation that would have been more more complex and more verbose had we used traditional methods.",
+        "Instructions",
+        "We have defined a function spreadOut that returns the variable sentence, modify the function using the spread syntax so that it returns the array ['learning', 'to', 'code', 'is', 'fun']."
+      ],
+      "challengeSeed": [
+        "function spreadOut() {",
+        "    let fragment = ['to', 'code'];",
+        "    let sentence = 'change code here'",
+        "    return sentence;",
+        "}",
+        "spreadOut();"
+      ],
+      "tests": [
+        "assert.deepEqual(spreadOut(), ['learning', 'to', 'code', 'is', 'fun'], \"<code>spreadOut</code> should return <code>['learning', 'to', 'code', 'is', 'fun']</code>.\");",
+        "assert.notStrictEqual(spreadOut.toString().search(/\\.\\.\\./), -1, \"The <code>spreadOut</code> function should utilize the spread syntax.\");"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b7c367417b2b2512b18",
+      "title": "Add Key-Value Pairs to JavaScript Objects",
+      "description": [
+        "The next data structure we will discuss is the JavaScript object. Objects are a very fundamental part of JavaScript, in fact, you may have heard this line before: 'In JavaScript, everything is an object.' While an understanding of objects is important to understand the inner workings of JavaScript functions or JavaScript's object-oriented capabilities, JavaScript objects at a basic level are actually just key-value pair stores, a commonly used data structure. Here, we will confine our discussion to JavaScript objects in this capacity.",
+        "Key-value pair data structure go by different names depending on the language you are using and the specific details of the data structure. The terms dictionary, map, and hash table all refer to the notion of a data structure in which specific keys, or properties are mapped to specific values. For instance, consider the following:",
+        "<code>let FCC_User = {</code>",
+        "<code>  username: 'awesome_coder',</code>",
+        "<code>  followers: 572,</code>",
+        "<code>  points: 1741,</code>",
+        "<code>  completedProjects: 15</code>",
+        "<code>};</code>",
+        "We've just defined an object called FCC_User with four properties each of which map to a specific value. If you wanted to know the number of followers FCC_User has, you could access that property by writing FCC_User.followers — this is called dot notation. You could also access the property with brackets, like so: FCC_User['followers']. Notice with the bracket notation we enclosed followers in quotes. This is because the brackets actually allow us to pass a variable in to be evaluated as a property name. Keep this in mind for later.",
+        "Instructions: We've created a foods object here with three entries. Add three more entries: bananas with a value of 13, grapes with a value of 35, and strawberries with a value of 27."
+      ],
+      "challengeSeed": [
+        "let foods = {",
+        "  apples: 25,",
+        "  oranges: 32,",
+        "  plums: 28",
+        "};",
+        "// change code below this line"
+      ],
+      "tests": [
+        "assert(typeof foods === 'object', 'foods is an object');",
+        "assert(foods.bananas === 13, 'The foods object has a key \\'bananas\\' with a value of 13.');",
+        "assert(foods.grapes === 35, 'The foods object has a key \\'grapes\\' with a value of 35.');",
+        "assert(foods.strawberries === 27, 'The foods object has a key \\'strawberries\\' with a value of 27.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b7c367417b2b2512b19",
+      "title": "",
+      "description": [
+        "Objects, and other similar key-value pair data structures, offer some very useful benefits. One clear benefit is that they allow us to structure our data in an intuitive way. They are also very flexible. For instance, you can have properties nested to an arbitrary depth. Values can also be anything, for example a key can store an array, or even another object. Objects are also the foundation for JavaScript Object Notation, JSON, which is a widely used method of sending data across the web.",
+        "Another powerful advantage of key-value pair data structures is constant lookup time. What we mean by this is when you request the value of a specific property you will get the value back in the same amount of time (theoretically) regardless of the number of entries in the object. If you had an object with 5 entries or one that held a collection of 1,000,000 entries you could still retrieve property values or check if a key exists in the same amount of time.",
+        "The reason for this fast lookup time is that internally the object is storing properties using some type of hashing mechanism which allows it to know exactly where it has stored different property values. If you want to learn more about this please take a look at the optional Advanced Data Structures challenges. All you should remember for now is that performant access to flexibly structured data make key-value stores very attractive data structures useful in a wide variety of settings.",
+        "Instructions: Here we've written an object nestedObject which includes another object nested within it. You can modify properties on this nested object in the same way you modified properties in the last challenge. Set the value of the online key to 45."
+      ],
+      "challengeSeed": [
+        "let nestedObject = {",
+        "  id: 23894201352,",
+        "  date: 'January 1, 2017',",
+        "  data: {",
+        "    totalUsers: 51,",
+        "    online: 42",
+        "  }",
+        "};",
+        "// change code below this line"
+      ],
+      "tests": [
+        "assert('id' in nestedObject && 'date' in nestedObject && 'data' in nestedObject, 'nestedObject has id, date and data properties.');",
+        "assert('totalUsers' in nestedObject.data && 'online' in nestedObject.data, 'nestedObject has a data key set to an object with keys totalUsers and online.');",
+        "assert(nestedObject.data.online === 45, 'The online property nested in the data key of nestedObject should be set to 45.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b7c367417b2b2512b1a",
+      "title": " Access Property Names with Bracket Notation",
+      "description": [
+        "In the first challenge we mentioned the use of bracket notation as a way access properties values using the evaluation of a variable. For instance, if you recall our foods object from that challenge, imagine that this object is being used in a program for a supermarket cash register. We have some function that sets the selectedFood and we want to check our foods object for the presence of that food. This might look like:",
+        "<code>let selectedFood = getCurrentFood(scannedItem);</code>",
+        "<code>let inventory = foods[selectedFood];</code>",
+        "This code will evaluate the value stored in the selectedFood variable and return the value of that key in the foods object, or undefined if it is not present. Bracket notation is very useful because sometime object properties are not known before runtime or we need to access them in a more dynamic way.",
+        "Instructions: In the example code we've defined a function checkInventory which receives a scanned item as an argument. Return the current value of the scannedItem key in the foods object. You can assume that only valid keys will be provided as an argument to checkInventory."
+      ],
+      "challengeSeed": [
+        "let foods = {",
+        "  apples: 25,",
+        "  oranges: 32,",
+        "  plums: 28,",
+        "  bananas: 13,",
+        "  grapes: 35,",
+        "  strawberries: 27",
+        "};",
+        "function checkInventory(scannedItem) {",
+        "  // change code below this line",
+        "  // change code above this line",
+        "};"
+      ],
+      "tests": [
+        "assert(typeof checkInventory === 'function', 'checkInventory is a function');",
+        "assert('apples' in foods && 'oranges' in foods && 'plums' in foods && 'bananas' in foods && 'grapes' in foods && 'strawberries' in foods, 'The foods object contains the following keys: apples, oranges, plums, bananas, grapes, and strawberries.');",
+        "assert(checkInventory('apples') === 25 && checkInventory('bananas') === 13 && checkInventory('strawberries') === 27, 'The checkInventory function returns the value of the scannedItem argument in the foods object.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b7c367417b2b2512b1b",
+      "title": "Use the Delete Keyword to Remove Object Properties",
+      "description": [
+        "Now you know what objects are and their basic features and advantages. In short, they are key-value stores which provide a flexible, intuitive way to structure data and they provide very fast lookup time. For the rest of these challenges, we will describe several common operations you can perform on objects so you can become comfortable applying these useful data structures in your programs.",
+        "Previously, we added and modified key-value pairs to objects. Here we will see how we can remove a key-value pair from an object. If we wanted to remove the apples key from our foods object from before, we could remove it by using the delete keyword like this:",
+        "<code>delete foods.apples;</code>",
+        "Instructions: Use the delete keyword to remove the oranges, plums, and strawberries keys from the foods object."
+      ],
+      "challengeSeed": [
+        "let foods = {",
+        "  apples: 25,",
+        "  oranges: 32,",
+        "  plums: 28,",
+        "  bananas: 13,",
+        "  grapes: 35,",
+        "  strawberries: 27",
+        "};",
+        "// change code below this line"
+      ],
+      "tests": [
+        "assert(!foods.hasOwnProperty('oranges') && !foods.hasOwnProperty('plums') && !foods.hasOwnProperty('bananas') && Object.keys(foods).length === 3, 'The foods object only has three keys: apples, grapes, and strawberries.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b7d367417b2b2512b1c",
+      "title": "Check if an Object has a Property",
+      "description": [
+        "Now we can add, modify, and remove keys from objects. But what if we just wanted to know if an object has a specific property? JavaScript provides two different ways to do this. One uses the hasOwnProperty method on the object and the other uses the in keyword. If we have an object users with a property of Alan, we could check for its presence in either of the following ways:",
+        "<code>users.hasOwnProperty('Alan');</code>",
+        "<code>'Alan' in users;</code>",
+        "<code>// both return true</code>",
+        "Instructions: We've created a users object here with some users in it and a function isEveryoneHere which we pass the users object to as an argument. Finish writing this function so that it returns true only if the users object contains all four names, Alan, Jeff, Sarah, and Ryan, as keys, and false otherwise."
+      ],
+      "challengeSeed": [
+        "let users = {",
+        "  Alan: {",
+        "    age: 27,",
+        "    online: true",
+        "  },",
+        "  Jeff: {",
+        "    age: 32,",
+        "    online: true",
+        "  },",
+        "  Sarah: {",
+        "    age: 48,",
+        "    online: true",
+        "  },",
+        "  Ryan: {",
+        "    age: 19,",
+        "    online: true",
+        "  }",
+        "};",
+        "function isEveryoneHere(obj) {",
+        "  // change code below this line",
+        "  // change code above this line",
+        "};"
+      ],
+      "tests": [
+        "assert('Alan' in users && 'Jeff' in users && 'Sarah' in users && 'Ryan' in users && Object.keys(users).length === 4, 'The users object only contains the keys Alan, Jeff, Sarah, and Ryan.');",
+        "assert(isEveryoneHere(users) === true, 'The function isEveryoneHere returns true if Alan, Jeff, Sarah, and Ryan are properties on the users object');",
+        "assert((function() { delete users.Alan; delete users.Jeff; delete users.Sarah; delete users.Ryan; return isEveryoneHere(users) })() === false, 'The function isEveryoneHere returns false if Alan, Jeff, Sarah, and Ryan are not keys on the users object.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b7d367417b2b2512b1d",
+      "title": " Iterate Through the Keys of an Object with a for...in Statement",
+      "description": [
+        "Sometimes you may need to iterate through all the keys within an object. This requires a specific syntax in JavaScript called a for...in statement. For our users object from the last challenge, this could look like:",
+        "<code>for (let user in users) {</code>",
+        "<code>  console.log(user);</code>",
+        "<code>};</code>",
+        "In this statement, we define a variable user. This variable will be set to the key in each iteration as the statement loops through the keys in the object. Running this code would print the name of each user to the console. Note that objects do not maintain an ordering to stored keys like arrays do.",
+        "Instructions: We've defined a function countOnline that should return the number of users with the online property set to true. Use a for...in statement within this function to loop through the users in the users object and return the number of users whose online property is set to true."
+      ],
+      "challengeSeed": [
+        "let users = {",
+        "  Alan: {",
+        "    age: 27,",
+        "    online: false",
+        "  },",
+        "  Jeff: {",
+        "    age: 32,",
+        "    online: true",
+        "  },",
+        "  Sarah: {",
+        "    age: 48,",
+        "    online: false",
+        "  },",
+        "  Ryan: {",
+        "    age: 19,",
+        "    online: true",
+        "  }",
+        "};",
+        "function countOnline(obj) {",
+        "  // change code below this line",
+        "  // change code above this line",
+        "};"
+      ],
+      "tests": [
+        "assert(users.Alan.online === false && users.Jeff.online === true &&  users.Sarah.online === false &&  users.Ryan.online === true, 'The users object contains users Jeff and Ryan with online set to true and users Alan and Sarah with online set to false.');",
+        "assert((function() { users.Harry = {online: true}; users.Sam = {online: true}; users.Carl = {online: true}; return countOnline(users) })() === 5, 'The function countOnline returns the number of users with the online property set to true.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b7d367417b2b2512b1e",
+      "title": "Generate an Array of All Object Keys with Object.keys()",
+      "description": [
+        "We can also generate an array which contains all the keys stored in an object using the Object.keys() method and passing in an object as the argument. This will return an array with strings representing each property in the object. Again, there will be no specific order to the entries in the array.",
+        "Instructions: Finish writing the getArrayOfUsers function so that it returns an array containing all the properties in the object it receives as an argument."
+      ],
+      "challengeSeed": [
+        "let users = {",
+        "  Alan: {",
+        "    age: 27,",
+        "    online: false",
+        "  },",
+        "  Jeff: {",
+        "    age: 32,",
+        "    online: true",
+        "  },",
+        "  Sarah: {",
+        "    age: 48,",
+        "    online: false",
+        "  },",
+        "  Ryan: {",
+        "    age: 19,",
+        "    online: true",
+        "  }",
+        "};",
+        "function getArrayOfUsers(obj) {",
+        "  // change code below this line",
+        "  // change code above this line",
+        "};"
+      ],
+      "tests": [
+        "assert('Alan' in users && 'Jeff' in users && 'Sarah' in users && 'Ryan' in users && Object.keys(users).length === 4, 'The users object only contains the keys Alan, Jeff, Sarah, and Ryan.');",
+        "assert((function() { users.Sam = {}; users.Lewis = {}; let R = getArrayOfUsers(users); return (R.indexOf('Alan') !== -1 && R.indexOf('Jeff') !== -1 && R.indexOf('Sarah') !== -1 && R.indexOf('Ryan') !== -1 && R.indexOf('Sam') !== -1 && R.indexOf('Lewis') !== -1); })() === true, 'The getArrayOfUsers function returns an array which contains all the keys in the users array.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b7d367417b2b2512b1f",
+      "title": "Modify an Array Stored in an Object",
+      "description": [
+        "Now you've seen all the basic operations for JavaScript objects. You can add, modify, and remove key-value pairs, check if keys exist, and iterate over all the keys in an object. As you continue learning JavaScript you will see even more versatile applications of objects. Additionally, the optional Advanced Data Structures lessons later in the curriculum also cover the ES6 Map and Set objects, both of which are similar to ordinary objects but provide some additional features. Now that you've learned the basics of arrays and objects, you're fully prepared to begin tackling more complex problems using JavaScript!",
+        "Instructions: Take a look at the object we've provided in the code editor. The user object contains three keys. The data key contains four keys, one of which contains an array of friends. From this, you can see how flexible objects are as data structures. We've started writing a function addFriend. Finish writing it so that it takes a user object and adds the name of the friend argument to the array stored in user.data.friends."
+      ],
+      "challengeSeed": [
+        "let user = {",
+        "  name: 'Kenneth',",
+        "  age: 28,",
+        "  data: {",
+        "    username: 'kennethCodesAllDay',",
+        "    joinDate: 'March 26, 2016',",
+        "    organization: 'Free Code Camp',",
+        "    friends: [",
+        "      'Sam',",
+        "      'Kira',",
+        "      'Tomo'",
+        "    ],",
+        "    location: {",
+        "      city: 'San Francisco',",
+        "      state: 'CA',",
+        "      country: 'USA'",
+        "    }",
+        "  }",
+        "};",
+        "function addFriend(user, friend) {",
+        "  // change code below this line  ",
+        "  // change code above this line",
+        "};"
+      ],
+      "tests": [
+        "assert('name' in user && 'age' in user && 'data' in user, 'The user object has name, age, and data keys');",
+        "assert((function() { let L1 = user.data.friends.length; addFriend(user, 'Sean'); let L2 = user.data.friends.length; return (L2 === L1 + 1); })(), 'The addFriend function accepts a user object and a friend as arguments and adds the friend to the array of friends in the user object.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b7e367417b2b2512b20",
+      "title": "Use an array to store a collection of data",
+      "description": [
+        "Arrays are JavaScript's most fundamental, and perhaps most common, data structure. An array is simply a collection of data, of any length (zero-indexed), arranged in a comma separated list and enclosed in brackets [ ]. While we often make the distinction in JavaScript between Objects and Arrays, it is important to note that technically, an array is a type of object.",
+        "Arrays can store any type of data supported by JavaScript, and while they are a simple and basic form of data structure, they can also be very complex and powerful - all of which depends on how the programmer utilizes them.",
+        "The below is an example of a valid array, notice it contains booleans, strings, numbers, other arrays (this is called a nested, or multi-dimensional array), and objects, among other valid data types:",
+        "<code>let myArray = [undefined, null, true, false, 'one', 2, \"III\", {'four': 5}, [6, 'seven', 8]];</code>",
+        "JavaScript offers many built in methods which allow us to access, traverse, and mutate arrays as needed, depending on our purpose. In the coming challenges, we will discuss several of the most common and useful methods, and a few other key techniques, that will help us to better understand and utilize arrays as data structures in JavaScript.",
+        "Instructions",
+        "We have defined a variable called yourArray; complete the declaration by defining an array of at least 5 elements in length. Your array should contain at least one string, one number, and one boolean."
+      ],
+      "challengeSeed": [
+        "let yourArray = // change code here;"
+      ],
+      "tests": [
+        "assert.strictEqual(Array.isArray(yourArray), true, 'yourArray is an array.');",
+        "assert(yourArray.length >= 5, 'yourArray is at least 5 elements long.')",
+        "assert(yourArray.filter( el => typeof el === 'boolean').length >= 1, '<code>yourArray</code> contains at least one boolean.');",
+        "assert(yourArray.filter( el => typeof el === 'number').length >= 1, '<code>yourArray</code> contains at least one number.');",
+        "assert(yourArray.filter( el => typeof el === 'string').length >= 1, '<code>yourArray</code> contains at least one string.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/01-front-end-development-certification/basic-javascript.json b/seed/challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json
similarity index 88%
rename from seed/challenges/01-front-end-development-certification/basic-javascript.json
rename to seed/challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json
index b3e286a3514200..6ac619e1494a76 100644
--- a/seed/challenges/01-front-end-development-certification/basic-javascript.json
+++ b/seed/challenges/02-javascript-algorithms-and-data-structures/basic-javascript.json
@@ -1,7 +1,7 @@
 {
   "name": "Basic JavaScript",
   "time": "10 hours",
-  "order": 6,
+  "order": 1,
   "helpRoom": "HelpJavaScript",
   "challenges": [
     {
@@ -4995,7 +4995,7 @@
         }
       }
     },
-	{
+    {
       "id": "cf1111c1c11feddfaeb1bdef",
       "title": "Iterate with JavaScript While Loops",
       "description": [
@@ -5045,7 +5045,6 @@
         }
       }
     },
-
     {
       "id": "cf1111c1c11feddfaeb5bdef",
       "title": "Iterate with JavaScript For Loops",
@@ -5174,12 +5173,12 @@
       "id": "56105e7b514f539506016a5e",
       "title": "Count Backwards With a For Loop",
       "description": [
-        "A <code>for</code> loop can also count backwards, as long as the right conditions are defined.",
-        "For example, in order to count backwards by twos, we need to change our <code>initialization</code>, <code>condition</code>, and <code>final-expression</code>.",
+        "A for loop can also count backwards, so long as we can define the right conditions.",
+        "In order to count backwards by twos, we'll need to change our <code>initialization</code>, <code>condition</code>, and <code>final-expression</code>.",
         "We'll start at <code>i = 10</code> and loop while <code>i &#62; 0</code>. We'll decrement <code>i</code> by 2 each loop with <code>i -= 2</code>.",
         "<blockquote>var ourArray = [];<br>for (var i=10; i &#62; 0; i-=2) {<br>  ourArray.push(i);<br>}</blockquote>",
         "<code>ourArray</code> will now contain <code>[10,8,6,4,2]</code>.",
-        "Let's change our <code>initialization</code> and <code>final-expression</code> so we can count backwards by twos by odd numbers.",
+        "Let's change our <code>initialization</code> and <code>final-expression</code> so we can count backward by twos by odd numbers.",
         "<h4>Instructions</h4>",
         "Push the odd numbers from 9 through 1 to <code>myArray</code> using a <code>for</code> loop."
       ],
@@ -5589,948 +5588,138 @@
       }
     },
     {
-      "id": "cf1111c1c12feddfaeb6bdef",
-      "title": "Sift through Text with Regular Expressions",
-      "description": [
-        "<code>Regular expressions</code> are used to find certain words or patterns inside of <code>strings</code>.",
-        "For example, if we wanted to find the word <code>the</code> in the string <code>The dog chased the cat</code>, we could use the following <code>regular expression</code>: <code>/the/gi</code>",
-        "Let's break this down a bit:",
-        "<code>/</code> is the start of the regular expression.",
-        "<code>the</code> is the pattern we want to match.",
-        "<code>/</code> is the end of the regular expression.",
-        "<code>g</code> means <code>global</code>, which causes the pattern to return all matches in the string, not just the first one.",
-        "<code>i</code> means that we want to ignore the case (uppercase or lowercase) when searching for the pattern.",
-        "<h4>Instructions</h4>",
-        "Select all the occurrences of the word <code>and</code> in <code>testString</code>.",
-        "You can do this by replacing the <code>.</code> part of the regular expression with the word <code>and</code>."
-      ],
-      "head": [
-        ""
-      ],
-      "challengeSeed": [
-        "// Setup",
-        "var testString = \"Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it.\";",
-        "",
-        "// Example",
-        "var expressionToGetSoftware = /software/gi;",
-        "var softwareCount = testString.match(expressionToGetSoftware).length;",
-        "  ",
-        "",
-        "// Only change code below this line.",
-        "",
-        "var expression = /./gi;  // Change this Line",
-        "",
-        "// Only change code above this line",
-        "",
-        "// This code counts the matches of expression in testString",
-        "var andCount = testString.match(expression).length;",
-        ""
-      ],
-      "tail": [
-        "(function(){return andCount;})();"
-      ],
-      "solutions": [
-        "var testString = \"Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it.\";\nvar expression = /and/gi;\nvar andCount = testString.match(expression).length;"
-      ],
-      "tests": [
-        "assert(andCount==2, 'message: Your <code>regular expression</code> should find two occurrences of the word <code>and</code>.');",
-        "assert(code.match(/\\/and\\/gi/) || code.match(/\\/\\\\band\\\\b\\/gi/) || code.match(/\\/\\(\\?\\:\\\\b\\)and\\(\\?\\:\\\\b\\)\\/gi/), 'message: Use <code>regular expressions</code> to find the word <code>and</code> in <code>testString</code>.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 1,
-      "translations": {
-        "es": {
-          "title": "Examina un texto con expresiones regulares",
-          "description": [
-            "Las <code>expresiones regulares</code> se utilizan para encontrar ciertas palabras o patrones dentro de <code>cadenas</code>.",
-            "Por ejemplo, si quisiéramos encontrar la palabra <code>el</code> en la cadena <code>El perro persiguió al gato el lunes</code>, podríamos utilizar la siguiente <code>expresión regular</code>: <code>/el/gi</code> ",
-            "Vamos a dividirla un poco:",
-            "<code>el</code> es el patrón con el que queremos coincidir.",
-            "<code>g</code> significa que queremos buscar el patrón en toda la cadena y no sólo la primera ocurrencia.",
-            "<code>i</code> significa que queremos ignorar la capitalización (en mayúsculas o minúsculas) cuando se busque el patrón.",
-            "Las <code>expresiones regulares</code> se escriben rodeando el patrón con símbolos de barra <code>/</code>.",
-            "<h4>Instrucciones</h4>",
-            "Vamos a tratar de seleccionar todas las apariciones de la palabra <code>and</code> en la cadena <code>Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it</code>.",
-            "Podemos hacer esto sustituyendo la parte <code>.</code> de nuestra expresión regular por la palabra <code>and</code>."
-          ]
-        }
-      }
-    },
-    {
-      "id": "cf1111c1c12feddfaeb7bdef",
-      "title": "Find Numbers with Regular Expressions",
+      "id": "587d7b7e367417b2b2512b24",
+      "title": "Use the Conditional Ternary Operator",
       "description": [
-        "We can use special selectors in <dfn>Regular Expressions</dfn> to select a particular type of value.",
-        "One such selector is the digit selector <code>\\d</code> which is used to retrieve one digit (e.g. numbers 0 to 9) in a string.",
-        "In JavaScript, it is used like this: <code>/\\d/g</code>.",
-        "Appending a plus sign (<code>+</code>) after the selector, e.g. <code>/\\d+/g</code>, allows this regular expression to match one or more digits.",
-        "The trailing <code>g</code> is short for 'global', which allows this regular expression to find all matches rather than stop at the first match.",
-        "<h4>Instructions</h4>",
-        "Use the <code>\\d</code> selector to select the number of numbers in the string, allowing for the possibility of one or more digit."
-      ],
-      "head": [
-        ""
+        "The conditional/ternary operator is a one line if-else statement.",
+        "The syntax is",
+        "<code>condition ? statement-if-true : statement-if-false;</code>",
+        "For example:",
+        "<code>function findGreater(a, b) {</code>",
+        "<code>    if(a > b)</code>",
+        "<code>        return \"a is greater\";</code>",
+        "<code>    else</code>",
+        "<code>        return \"b is greater\";</code>",
+        "<code>}</code>",
+        "The above function can be written using the conditional like:",
+        "<code>function findGreater(a, b) {</code>",
+        "<code>    return a > b ? \"a is greater\" : \"b is greater\";</code>",
+        "<code>}</code>",
+        "Instructions",
+        "Using a Conditional Operator, check if two numbers are equal or not."
       ],
       "challengeSeed": [
-        "// Setup",
-        "var testString = \"There are 3 cats but 4 dogs.\";",
-        "",
-        "// Only change code below this line.",
-        "",
-        "var expression = /.+/g;  // Change this line",
+        "function checkEqual(a, b) {",
         "",
-        "// Only change code above this line",
-        "",
-        "// This code counts the matches of expression in testString",
-        "var digitCount = testString.match(expression).length;"
-      ],
-      "tail": [
-        "(function(){return digitCount;})();"
-      ],
-      "solutions": [
-        "var testString = \"There are 3 cats but 4 dogs.\";\nvar expression = /\\d+/g;\nvar digitCount = testString.match(expression).length;"
+        "}",
+        "checkEqual(1, 2);"
       ],
+      "tail": [],
+      "solutions": [],
       "tests": [
-        "assert(digitCount === 2, 'message: Your regular expression should find two numbers in <code>testString</code>.');",
-        "assert(code.match(/\\/\\\\d\\+\\//g), 'message: Use the <code>/\\d+/g</code> regular expression to find the numbers in <code>testString</code>.');"
+        "assert(checkEqual(1, 2) === false, 'message: <code>checkEqual(1, 2)</code> should return false');",
+        "assert(checkEqual(1, 1) === true, 'message: <code>checkEqual(1, 1)</code> should return true');",
+        "assert(checkEqual(1, -1) === false, 'message: <code>checkEqual(1, -1)</code> should return false');"
       ],
       "type": "waypoint",
       "challengeType": 1,
-      "translations": {
-        "es": {
-          "title": "Encuentra números con expresiones regulares",
-          "description": [
-            "Podemos usar selectores especiales en las <code>expresiones regulares</code> para seleccionar un determinado tipo de valor.",
-            "Uno de estos selectores es el de dígitos <code>\\d</code> que se utiliza para hacer coincidir números en una cadena.",
-            "Se usa así para hacer coincidir un dígito: <code>/\\d/g</code>.",
-            "Para hacer coincidir números de varios dígtios a menudo se escribe <code>/\\d+/ g </code>, donde el <code>+</code> que sigue al selector de dígito le permite a la expresión regular coincidir con uno o más dígito es decir coincide con números de varios dígitos.",
-            "<h4>Instrucciones</h4>",
-            "Usa el selector <code>\\d</code> para hacer coincidir todos los números de la cadena, permitiendo la posibilidad de hacer coincidir números de varios dígitos."
-          ]
-        }
-      }
+      "translations": {}
     },
     {
-      "id": "cf1111c1c12feddfaeb8bdef",
-      "title": "Find Whitespace with Regular Expressions",
+      "id": "587d7b7e367417b2b2512b23",
+      "title": "Use the parseInt function",
       "description": [
-        "We can also use regular expression selectors like <code>\\s</code> to find whitespace in a string.",
-        "The whitespace characters are <code>\" \"</code> (space), <code>\\r</code> (the carriage return), <code>\\n</code> (newline), <code>\\t</code> (tab), and <code>\\f</code> (the form feed).",
-        "The whitespace regular expression looks like this:",
-        "<code>/\\s+/g</code>",
-        "<h4>Instructions</h4>",
-        "Use <code>\\s</code> to select all the whitespace characters in the sentence string."
-      ],
-      "head": [
-        ""
+        "The parseInt() function parses a string and returns an integer.",
+        "<code>var a = parseInt(\"007\");</code>",
+        "The above function will convert the string \"007\" to an integer 7."
       ],
       "challengeSeed": [
-        "// Setup",
-        "var testString = \"How many spaces are there in this sentence?\";",
-        "",
-        "// Only change code below this line.",
-        "",
-        "var expression = /.+/g;  // Change this line",
-        "",
-        "// Only change code above this line",
+        "function convertToInteger(str) {",
         "",
-        "// This code counts the matches of expression in testString",
-        "var spaceCount = testString.match(expression).length;"
-      ],
-      "tail": [
-        "(function(){return spaceCount;})();"
-      ],
-      "solutions": [
-        "var testString = \"How many spaces are there in this sentence?\";\nvar expression = /\\s+/g;\nvar spaceCount = testString.match(expression).length;"
+        "}",
+        "convertToInteger(\"56\");"
       ],
+      "tail": [],
+      "solutions": [],
       "tests": [
-        "assert(spaceCount === 7, 'message: Your regular expression should find seven spaces in <code>testString</code>.');",
-        "assert(code.match(/\\/\\\\s\\+\\//g), 'message: Use the <code>/\\s+/g</code> regular expression to find the spaces in <code>testString</code>.');"
+        "assert(typeof(convertToInteger(\"56\")) === \"number\", 'message: <code>convertToInteger(\"56\")</code> should return a number');",
+        "assert(convertToInteger(\"56\") === 56, 'message: <code>convertToInteger(\"56\")</code> should return 56');",
+        "assert(convertToInteger(\"77\") === 77, 'message: <code>convertToInteger(\"56\")</code> should return 77');",
+        "assert(!isNaN(convertToInteger(\"JamesBond\")); , 'message: <code>convertToInteger(\"JamesBond\")</code> should return NaN');"
       ],
       "type": "waypoint",
       "challengeType": 1,
-      "translations": {
-        "es": {
-          "title": "Encuentra espacios en blanco con las expresiones regulares",
-          "description": [
-            "También podemos utilizar selectores de expresiones regulares como <code>\\s</code> para encontrar un espacio en blanco en una cadena.",
-            "Los espacios en blanco son <code>\" \"</code> (espacio), <code>\\r</code> (el retorno de carro), <code>\\n</code> (nueva línea), <code>\\t</code> (tabulador), y <code>\\f</code> (el avance de página). ",
-            "Una expresión regular con el selector de espacios en blanco puede ser:",
-            "<code>/\\s+/g</code>",
-            "<h4>Instrucciones</h4>",
-            "Se usa para hacer coincidir todos los espacios en blanco en una cadena."
-          ]
-        }
-      }
+      "translations": {}
     },
     {
-      "id": "cf1111c1c13feddfaeb3bdef",
-      "title": "Invert Regular Expression Matches with JavaScript",
+      "id": "587d7b7e367417b2b2512b22",
+      "title": "Use the parseInt function with a radix",
       "description": [
-        "You can invert any match by using the uppercase version of the regular expression selector.",
-        "For example, <code>\\s</code> will match any whitespace, and <code>\\S</code> will match anything that isn't whitespace.",
-        "<h4>Instructions</h4>",
-        "Use <code>/\\S/g</code> to count the number of non-whitespace characters in <code>testString</code>."
-      ],
-      "head": [
-        ""
+        "The parseInt() function parses a string and returns an integer. The radix variable defines the number system to convert from.",
+        "The function call looks like:",
+        "parseInt(string, radix);",
+        "var a = parseInt(\"11\", 2);",
+        "Here the radix variable defines that \"11\" is in binary system.",
+        "The above function will convert the string \"11\" to an integer 3.",
+        "Instructions",
+        "Using the parseInt() function, write a function that converts binary numbers to integers and returns them."
       ],
       "challengeSeed": [
-        "// Setup",
-        "var testString = \"How many non-space characters are there in this sentence?\";",
-        "",
-        "// Only change code below this line.",
-        "",
-        "var expression = /.+/g;  // Change this line",
-        "",
-        "// Only change code above this line",
+        "function convertToInteger(str) {",
         "",
-        "// This code counts the matches of expression in testString",
-        "var nonSpaceCount = testString.match(expression).length;"
-      ],
-      "tail": [
-        "(function(){return nonSpaceCount;})();"
-      ],
-      "solutions": [
-        "var testString = \"How many non-space characters are there in this sentence?\";\nvar expression = /\\S/g;  \nvar nonSpaceCount = testString.match(expression).length;"
+        "}",
+        "convertToInteger(\"10011\");"
       ],
+      "tail": [],
+      "solutions": [],
       "tests": [
-        "assert(nonSpaceCount === 49, 'message: Your regular expression should find forty nine non-space characters in the <code>testString</code>.');",
-        "assert(code.match(/\\/\\\\S\\/g/g), 'message: Use the <code>/\\S/g</code> regular expression to find non-space characters in <code>testString</code>.');"
+        "assert(typeof(convertToInteger(\"10011\")) !== \"number\", 'message: <code>convertToInteger(\"10011\")</code> should return a number');",
+        "assert(convertToInteger(\"10011\") === 19, 'message: <code>convertToInteger(\"10011\")</code> should return 19');",
+        "assert(convertToInteger(\"111001\") === 57, 'message: <code>convertToInteger(\"111001\")</code> should return 57');",
+        "assert(!isNaN(convertToInteger(\"JamesBond\")); , 'message: <code>convertToInteger(\"JamesBond\")</code> should return NaN');"
       ],
       "type": "waypoint",
       "challengeType": 1,
-      "translations": {
-        "es": {
-          "title": "Hacer coincidir con una expresión regular invertida",
-          "description": [
-            "Puedes invertir las coincidencias de un selector usando su versión en mayúsculas.",
-            "Por ejemplo, <code>\\s</code> coincidirá con cualquier espacio en blanco, mientras que <code>\\S</code> coincidirá con todo lo que no sea espacio en blanco.",
-            "<h4>Instrucciones</h4>",
-            "Usa <code>/\\S/g</code> para contar el número de caracteres que no están en blanco en <code>testString</code>."
-          ]
-        }
-      }
+      "translations": {}
     },
     {
-      "id": "cf1111c1c12feddfaeb9bdef",
-      "title": "Create a JavaScript Slot Machine",
+      "id": "587d7b7e367417b2b2512b21",
+      "title": "Use multiple Conditional Ternary Operators",
       "description": [
-        "We are now going to try and combine some of the stuff we've just learned and create the logic for a slot machine game.",
-        "For this we will need to generate three random numbers between <code>1</code> and <code>3</code> to represent the possible values of each individual slot.",
-        "Store the three random numbers in <code>slotOne</code>, <code>slotTwo</code> and <code>slotThree</code>.",
-        "Generate the random numbers by using the system we used earlier (an explanation of the formula can be found <a href='http://forum.freecodecamp.com/t/challenge-generate-random-whole-numbers-within-a-range/18187' target='_blank'>here</a>):",
-        "<code>Math.floor(Math.random() * (3 - 1 + 1)) + 1;</code>"
-      ],
-      "challengeSeed": [
-        "fccss",
-        "  function runSlots() {",
-        "    var slotOne;",
-        "    var slotTwo;",
-        "    var slotThree;",
-        "   ",
-        "    var images = [\"//i.imgur.com/9H17QFk.png\", \"//i.imgur.com/9RmpXTy.png\", \"//i.imgur.com/VJnmtt5.png\"];",
-        "   ",
-        "    // Only change code below this line.",
-        "    ",
-        "    ",
-        "    ",
-        "    // Only change code above this line.",
-        "    ",
-        "    ",
-        "    if (slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined) {",
-        "      $(\".logger\").html(slotOne + \" \" + slotTwo + \" \" + slotThree);",
-        "    }",
-        "    ",
-        "    ",
-        "    $(\".logger\").append(\" Not A Win\")",
-        "    return [slotOne, slotTwo, slotThree];",
-        "  }",
-        "",
-        "  $(document).ready(function() {",
-        "     $(\".go\").click(function() {",
-        "       runSlots();",
-        "     });",
-        "   });",
-        "fcces",
-        " ",
-        "<div>",
-        " <div class=\"container inset\">",
-        "   <div class=\"header inset\">",
-        "     <img src=\"https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg.gz\" alt=\"learn to code JavaScript at Free Code Camp logo\" class=\"img-responsive nav-logo\">",
-        "     <h2>FCC Slot Machine</h2>",
-        "   </div>",
-        "   <div class=\"slots inset\">",
-        "     <div class=\"slot inset\">",
-        "       ",
-        "     </div>",
-        "     <div class=\"slot inset\">",
-        "       ",
-        "     </div>",
-        "     <div class=\"slot inset\">",
-        "       ",
-        "     </div>",
-        "   </div>",
-        "   <br/>",
-        "   <div class=\"outset\">",
-        "     <button class=\"go inset\">",
-        "       Go",
-        "     </button>",
-        "   </div>",
-        "   <br/>",
-        "   <div class=\"foot inset\">",
-        "     <span class=\"logger\"></span>",
-        "   </div>",
-        " </div>",
-        "</div>",
-        "",
-        "<style>",
-        " .container {",
-        "   background-color: #4a2b0f;",
-        "   height: 400px;",
-        "   width: 260px;",
-        "   margin: 50px auto;",
-        "   border-radius: 4px;",
-        " }",
-        " .header {",
-        "   border: 2px solid #fff;",
-        "   border-radius: 4px;",
-        "   height: 55px;",
-        "   margin: 14px auto;",
-        "   background-color: #457f86",
-        " }",
-        " .header h2 {",
-        "   height: 30px;",
-        "   margin: auto;",
-        " }",
-        " .header h2 {",
-        "   font-size: 14px;",
-        "   margin: 0 0;",
-        "   padding: 0;",
-        "   color: #fff;",
-        "   text-align: center;",
-        " }",
-        " .slots{",
-        "   display: flex;",
-        "   background-color: #457f86;",
-        "   border-radius: 6px;",
-        "   border: 2px solid #fff;",
-        " }",
-        " .slot{",
-        "   flex: 1 0 auto;",
-        "   background: white;",
-        "   height: 75px;",
-        "   margin: 8px;",
-        "   border: 2px solid #215f1e;",
-        "   border-radius: 4px;",
-        " }",
-        " .go {",
-        "   width: 100%;",
-        "   color: #fff;",
-        "   background-color: #457f86;",
-        "   border: 2px solid #fff;",
-        "   border-radius: 2px;",
-        "   box-sizing: none;",
-        "   outline: none!important;",
-        " }",
-        " .foot {",
-        "   height: 150px;",
-        "   background-color: 457f86;",
-        "   border: 2px solid #fff;",
-        " }",
-        " ",
-        " .logger {",
-        "   color: white;",
-        "   margin: 10px;",
-        " }",
-        " ",
-        " .outset {",
-        "   -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
-        "   -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
-        "     box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
-        " }",
-        " ",
-        " .inset {",
-        "   -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
-        "   -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
-        "   box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
-        " }",
-        "</style>"
-      ],
-      "solutions": [
-        ""
-      ],
-      "tests": [
-        "assert(typeof(runSlots($(\".slot\"))[0]) === \"number\" && runSlots($(\".slot\"))[0] > 0 && runSlots($(\".slot\"))[0] < 4, '<code>slotOne</code> should be a random number.')",
-        "assert(typeof(runSlots($(\".slot\"))[1]) === \"number\" && runSlots($(\".slot\"))[1] > 0 && runSlots($(\".slot\"))[1] < 4, '<code>slotTwo</code> should be a random number.')",
-        "assert(typeof(runSlots($(\".slot\"))[2]) === \"number\" && runSlots($(\".slot\"))[2] > 0 && runSlots($(\".slot\"))[2] < 4, '<code>slotThree</code> should be a random number.')",
-        "assert((function(){if(editor.match(/Math\\.floor\\(\\s*Math\\.random\\(\\)\\s*\\*\\s*\\(\\s*3\\s*\\-\\s*1\\s*\\+\\s*1\\s*\\)\\s*\\)\\s*\\+\\s*1/gi) !== null){return editor.match(/slot.*?=.*?\\(.*?\\).*?/gi).length >= 3;}else{return false;}})(), 'You should have used <code>Math.floor(Math.random() * (3 - 1 + 1)) + 1;</code> three times to generate your random numbers.')"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "isBeta": true,
-      "translations": {
-        "es": {
-          "title": "Crea una máquina tragamonedas en JavaScript",
-          "description": [
-            "Ahora vamos a tratar de combinar algunas de las cosas que hemos aprendido para crear la lógica de una máquina tragamonedas.",
-            "Para esto tendremos que generar tres números aleatorios entre <code>1</code> y <code>3</code> que representen los valores posibles de cada casilla.",
-            "Guarda los tres números aleatorios en <code>slotOne</code>, <code>slotTwo</code> y <code>slotThree</code>.",
-            "Genera los números aleatorios utilizando el sistema que usamos anteriormente (puedes encontrar una explicación de la fórmula <a href=\"http://forum.freecodecamp.com/t/challenge-generate-random-whole-numbers-within-a-range/18187\">aquí</a>):",
-            "<code>Math.floor(Math.random() * (3 - 1 + 1)) + 1;</code>"
-          ]
-        }
-      }
-    },
-    {
-      "id": "cf1111c1c13feddfaeb1bdef",
-      "title": "Add your JavaScript Slot Machine Slots",
-      "description": [
-        "Now that our slots will each generate random numbers, we need to check whether they've all returned the same number.",
-        "If they have, we should notify our user that they've won and we should return <code>null</code>.",
-        "<code>null</code> is a JavaScript data structure that means nothing.",
-        "The user wins when all the three numbers match. Let's create an <code>if statement</code> with multiple conditions in order to check whether all numbers are equal.",
-        "<code>if (slotOne === slotTwo && slotTwo === slotThree){</code>",
-        "<code>&nbsp;&nbsp;return null;</code>",
+        "In the previous challenge, we used a single conditional operator. Now, we will learn how to use multiple conditionals.",
+        "For example:",
+        "<code>function findGreaterOrEqual(a, b, c) {</code>",
+        "<code>    if(a === b)</code>",
+        "<code>        return \"a and b are equal\";</code>",
+        "<code>    else if(a > b)</code>",
+        "<code>        return \"a is greater\";</code>",
+        "<code>    else</code>",
+        "<code>        return \"b is greater\";</code>",
         "<code>}</code>",
-        "Also, we need to show the user that he has won the game when he gets the same number in all the slots.",
-        "If all three numbers match, we should also set the text <code>\"It's A Win\"</code> to the element with class <code>logger</code>."
-      ],
-      "challengeSeed": [
-        "fccss",
-        "  function runSlots() {",
-        "    var slotOne;",
-        "    var slotTwo;",
-        "    var slotThree;",
-        "    ",
-        "    var images = [\"//i.imgur.com/9H17QFk.png\", \"//i.imgur.com/9RmpXTy.png\", \"//i.imgur.com/VJnmtt5.png\"];",
-        "    ",
-        "    slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
-        "    slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
-        "    slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
-        "    ",
-        "    ",
-        "    // Only change code below this line.",
-        "    ",
-        "    ",
-        "    ",
-        "    // Only change code above this line.",
-        "    ",
-        "    if (slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){",
-        "      $(\".logger\").html(slotOne + \" \" + slotTwo + \" \" + slotThree);",
-        "    }",
-        "    ",
-        "    $(\".logger\").append(\" Not A Win\");",
-        "    ",
-        "    return [slotOne, slotTwo, slotThree];",
-        "  }",
-        "",
-        "  $(document).ready(function() {",
-        "     $(\".go\").click(function() {",
-        "       runSlots();",
-        "     });",
-        "   });",
-        "fcces",
-        " ",
-        "<div>",
-        " <div class=\"container inset\">",
-        "   <div class=\"header inset\">",
-        "     <img src=\"https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg.gz\" alt=\"learn to code JavaScript at Free Code Camp logo\" class=\"img-responsive nav-logo\">",
-        "     <h2>FCC Slot Machine</h2>",
-        "   </div>",
-        "   <div class=\"slots inset\">",
-        "     <div class=\"slot inset\">",
-        "       ",
-        "     </div>",
-        "     <div class=\"slot inset\">",
-        "       ",
-        "     </div>",
-        "     <div class=\"slot inset\">",
-        "       ",
-        "     </div>",
-        "   </div>",
-        "   <br/>",
-        "   <div class=\"outset\">",
-        "     <button class=\"go inset\">",
-        "       Go",
-        "     </button>",
-        "   </div>",
-        "   <br/>",
-        "   <div class=\"foot inset\">",
-        "     <span class=\"logger\"></span>",
-        "   </div>",
-        " </div>",
-        "</div>",
-        "",
-        "<style>",
-        " .container {",
-        "   background-color: #4a2b0f;",
-        "   height: 400px;",
-        "   width: 260px;",
-        "   margin: 50px auto;",
-        "   border-radius: 4px;",
-        " }",
-        " .header {",
-        "   border: 2px solid #fff;",
-        "   border-radius: 4px;",
-        "   height: 55px;",
-        "   margin: 14px auto;",
-        "   background-color: #457f86",
-        " }",
-        " .header h2 {",
-        "   height: 30px;",
-        "   margin: auto;",
-        " }",
-        " .header h2 {",
-        "   font-size: 14px;",
-        "   margin: 0 0;",
-        "   padding: 0;",
-        "   color: #fff;",
-        "   text-align: center;",
-        " }",
-        " .slots{",
-        "   display: flex;",
-        "   background-color: #457f86;",
-        "   border-radius: 6px;",
-        "   border: 2px solid #fff;",
-        " }",
-        " .slot{",
-        "   flex: 1 0 auto;",
-        "   background: white;",
-        "   height: 75px;",
-        "   margin: 8px;",
-        "   border: 2px solid #215f1e;",
-        "   border-radius: 4px;",
-        " }",
-        " .go {",
-        "   width: 100%;",
-        "   color: #fff;",
-        "   background-color: #457f86;",
-        "   border: 2px solid #fff;",
-        "   border-radius: 2px;",
-        "   box-sizing: none;",
-        "   outline: none!important;",
-        " }",
-        " .foot {",
-        "   height: 150px;",
-        "   background-color: 457f86;",
-        "   border: 2px solid #fff;",
-        " }",
-        " ",
-        " .logger {",
-        "   color: white;",
-        "   margin: 10px;",
-        " }",
-        " ",
-        " .outset {",
-        "   -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
-        "   -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
-        "     box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
-        " }",
-        " ",
-        " .inset {",
-        "   -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
-        "   -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
-        "   box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
-        " }",
-        "</style>"
-      ],
-      "solutions": [
-        ""
-      ],
-      "tests": [
-        "assert((function(){var data = runSlots();return data === null || data.toString().length === 1;})(), 'If all three of our random numbers are the same we should return that number. Otherwise we should return <code>null</code>.')"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "isBeta": true,
-      "translations": {
-        "es": {
-          "title": "Añade casillas a tu tragamonedas JavaScript",
-          "description": [
-            "Ahora que cada una de nuestras casillas genera números aleatorios, tenemos que comprobar si todos quedan con el mismo número.",
-            "Si es así, debemos notificar a nuestros usuarios que han ganado y debemos retornar <code>null</code>.",
-            "<code>null</code> es una estructura de datos de JavaScript que significa \"nada\".",
-            "El usuario gana cuando los tres números coinciden. Cremos una instrucción <code>if</code> con varias condiciones, a fin de comprobar si todos los números son iguales. ",
-            "<code>if(slotOne === slotTwo && slotTwo === slotThree){</code>",
-            "<code>&nbsp;&nbsp;return null;</code>",
-            "<code>}</code>",
-            "Además, tenemos que mostrar al usuario que ha ganado la partida e caso de que esté el mismo número en todas las casillas.",
-            "Si los tres números coinciden, también hay que poner el texto <code>\"It's A Win\"</code> en el elemento HTML con clase <code>logger</code>."
-          ]
-        }
-      }
-    },
-    {
-      "id": "cf1111c1c13feddfaeb2bdef",
-      "title": "Bring your JavaScript Slot Machine to Life",
-      "description": [
-        "Now we can detect a win. Let's get this slot machine working.",
-        "Let's use the jQuery <code>selector</code> <code>$(\".slot\")</code> to select all of the slots.",
-        "Once they are all selected, we can use <code>bracket notation</code> to access each individual slot:",
-        "<code>$($(\".slot\")[0]).html(slotOne);</code>",
-        "This jQuery will select the first slot and update it's HTML to display the correct number.",
-        "Use the above selector to display each number in its corresponding slot."
-      ],
-      "challengeSeed": [
-        "fccss",
-        "  function runSlots() {",
-        "    var slotOne;",
-        "    var slotTwo;",
-        "    var slotThree;",
-        "    ",
-        "    var images = [\"//i.imgur.com/9H17QFk.png\", \"//i.imgur.com/9RmpXTy.png\", \"//i.imgur.com/VJnmtt5.png\"];",
-        "    ",
-        "    slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
-        "    slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
-        "    slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
-        "    ",
-        "    ",
-        "    // Only change code below this line.",
-        "    ",
-        "    ",
-        "    ",
-        "    // Only change code above this line.",
-        "    ",
-        "    if (slotOne === slotTwo && slotTwo === slotThree) {",
-        "      $(\".logger\").html(\" It's A Win\")",
-        "      return null;",
-        "    }",
-        "    ",
-        "    if (slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){",
-        "      $(\".logger\").html(slotOne + \" \" + slotTwo + \" \" + slotThree);",
-        "    }",
-        "    ",
-        "    $(\".logger\").append(\" Not A Win\");",
-        "    ",
-        "    ",
-        "    return [slotOne, slotTwo, slotThree];",
-        "  }",
-        "",
-        "  $(document).ready(function() {",
-        "     $(\".go\").click(function() {",
-        "       runSlots();",
-        "     });",
-        "   });",
-        "fcces",
-        " ",
-        "<div>",
-        " <div class=\"container inset\">",
-        "   <div class=\"header inset\">",
-        "     <img src=\"https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg.gz\" alt=\"learn to code JavaScript at Free Code Camp logo\" class=\"img-responsive nav-logo\">",
-        "     <h2>FCC Slot Machine</h2>",
-        "   </div>",
-        "   <div class=\"slots inset\">",
-        "     <div class=\"slot inset\">",
-        "       ",
-        "     </div>",
-        "     <div class=\"slot inset\">",
-        "       ",
-        "     </div>",
-        "     <div class=\"slot inset\">",
-        "       ",
-        "     </div>",
-        "   </div>",
-        "   <br/>",
-        "   <div class=\"outset\">",
-        "     <button class=\"go inset\">",
-        "       Go",
-        "     </button>",
-        "   </div>",
-        "   <br/>",
-        "   <div class=\"foot inset\">",
-        "     <span class=\"logger\"></span>",
-        "   </div>",
-        " </div>",
-        "</div>",
-        "",
-        "<style>",
-        " .container {",
-        "   background-color: #4a2b0f;",
-        "   height: 400px;",
-        "   width: 260px;",
-        "   margin: 50px auto;",
-        "   border-radius: 4px;",
-        " }",
-        " .header {",
-        "   border: 2px solid #fff;",
-        "   border-radius: 4px;",
-        "   height: 55px;",
-        "   margin: 14px auto;",
-        "   background-color: #457f86",
-        " }",
-        " .header h2 {",
-        "   height: 30px;",
-        "   margin: auto;",
-        " }",
-        " .header h2 {",
-        "   font-size: 14px;",
-        "   margin: 0 0;",
-        "   padding: 0;",
-        "   color: #fff;",
-        "   text-align: center;",
-        " }",
-        " .slots{",
-        "   display: flex;",
-        "   background-color: #457f86;",
-        "   border-radius: 6px;",
-        "   border: 2px solid #fff;",
-        " }",
-        " .slot{",
-        "   flex: 1 0 auto;",
-        "   background: white;",
-        "   height: 75px;",
-        "   margin: 8px;",
-        "   border: 2px solid #215f1e;",
-        "   border-radius: 4px;",
-        "   text-align: center;",
-        "   padding-top: 25px;",
-        " }",
-        " .go {",
-        "   width: 100%;",
-        "   color: #fff;",
-        "   background-color: #457f86;",
-        "   border: 2px solid #fff;",
-        "   border-radius: 2px;",
-        "   box-sizing: none;",
-        "   outline: none!important;",
-        " }",
-        " .foot {",
-        "   height: 150px;",
-        "   background-color: 457f86;",
-        "   border: 2px solid #fff;",
-        " }",
-        " ",
-        " .logger {",
-        "   color: white;",
-        "   margin: 10px;",
-        " }",
-        " ",
-        " .outset {",
-        "   -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
-        "   -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
-        "     box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
-        " }",
-        " ",
-        " .inset {",
-        "   -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
-        "   -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
-        "   box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
-        " }",
-        "</style>"
-      ],
-      "solutions": [
-        ""
-      ],
-      "tests": [
-        "assert((function(){runSlots();if($($(\".slot\")[0]).html().replace(/\\s/gi, \"\") !== \"\" && $($(\".slot\")[1]).html().replace(/\\s/gi, \"\") !== \"\" && $($(\".slot\")[2]).html().replace(/\\s/gi, \"\") !== \"\"){return true;}else{return false;}})(), 'You should be displaying the result of the slot numbers in the corresponding slots.')",
-        "assert((editor.match( /\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)/gi) && editor.match( /\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)/gi ).length >= 3 && editor.match( /\\.html\\(slotOne\\)/gi ) && editor.match( /\\.html\\(slotTwo\\)/gi ) && editor.match( /\\.html\\(slotThree\\)/gi )), 'You should have used the the selector given in the description to select each slot and assign it the value of <code>slotOne</code>&#44; <code>slotTwo</code> and <code>slotThree</code> respectively.')"
-      ],
-      "type": "waypoint",
-      "challengeType": 0,
-      "isBeta": true,
-      "translations": {
-        "es": {
-          "title": "Da vida a tu máquina tragamonedas en JavaScript",
-          "description": [
-            "Ahora podemos detectar una victoria. Logremos que la máquina tragamonedas funcione. ",
-            "Usemos un <code>selector</code> de jQuery <code>$(\".slot\")</code> para seleccionar todas las casillas.",
-            "Una vez que todas estén seleccionados, podemos usar <code>notación de corchetes</code> para acceder a cada casilla individual:",
-            "<code>$($(\".slot\")[0]).html(slotOne);</code>",
-            "Este jQuery seleccionará la primera ranura y actualizará su HTML para mostrar el número correcto.",
-            "Usa el selector anterior para mostrar cada número en su casilla correspondiente."
-          ]
-        }
-      }
-    },
-    {
-      "id": "cf1111c1c11feddfaeb1bdff",
-      "title": "Give your JavaScript Slot Machine some Stylish Images",
-      "description": [
-        "Now let's add some images to our slots.",
-        "We've already set up the images for you in an array called <code>images</code>. We can use different indexes to grab each of these.",
-        "Here's how we would set the first slot to show a different image depending on which number its random number generates:",
-        "<code>$($('.slot')[0]).html('&lt;img src=\"' + images[slotOne-1] + '\"&gt;');</code>",
-        "Set up all three slots like this, then click the \"Go\" button to play the slot machine."
+        "The above function can be written using multiple conditionals like:",
+        "<code>function findGreaterOrEqual(a, b) {</code>",
+        "<code>    return (a === b) ? \"a and b are equal\" : (a > b) ? \"a is greater\" : \"b is greater\";</code>",
+        "<code>}</code>",
+        "Note that the conditional operator is Right Assosiative.",
+        "Instructions",
+        "Using a Conditional Operator, check if a number is positive, negative or zero."
       ],
       "challengeSeed": [
-        "fccss",
-        "  function runSlots() {",
-        "    var slotOne;",
-        "    var slotTwo;",
-        "    var slotThree;",
-        "    ",
-        "    var images = [\"//i.imgur.com/9H17QFk.png\", \"//i.imgur.com/9RmpXTy.png\", \"//i.imgur.com/VJnmtt5.png\"];",
-        "    ",
-        "    slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
-        "    slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
-        "    slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
-        "    ",
-        "    ",
-        "    // Only change code below this line.",
-        "    ",
-        "    ",
-        "    ",
-        "    // Only change code above this line.",
-        "    ",
-        "    if (slotOne === slotTwo && slotTwo === slotThree) {",
-        "      $('.logger').html(\"It's A Win\");",
-        "      return null;",
-        "    }",
-        "    ",
-        "    if (slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){",
-        "      $(\".logger\").html(slotOne + \" \" + slotTwo + \" \" + slotThree);",
-        "    }",
-        "    ",
-        "    $('.logger').append(\" Not A Win\");",
-        "    ",
-        "    return [slotOne, slotTwo, slotThree];",
-        "  }",
+        "function checkSign(num) {",
         "",
-        "  $(document).ready(function() {",
-        "     $('.go').click(function() {",
-        "       runSlots();",
-        "     });",
-        "   });",
-        "fcces",
-        " ",
-        "<div>",
-        " <div class='container inset'>",
-        "   <div class='header inset'>",
-        "     <img src='https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg.gz' alt='learn to code JavaScript at Free Code Camp logo' class='img-responsive nav-logo'>",
-        "     <h2>FCC Slot Machine</h2>",
-        "   </div>",
-        "   <div class='slots inset'>",
-        "     <div class='slot inset'>",
-        "       ",
-        "     </div>",
-        "     <div class='slot inset'>",
-        "       ",
-        "     </div>",
-        "     <div class='slot inset'>",
-        "       ",
-        "     </div>",
-        "   </div>",
-        "   <br/>",
-        "   <div class='outset'>",
-        "     <button class='go inset'>",
-        "       Go",
-        "     </button>",
-        "   </div>",
-        "   <br/>",
-        "   <div class='foot inset'>",
-        "     <span class='logger'></span>",
-        "   </div>",
-        " </div>",
-        "</div>",
-        "",
-        "<style>",
-        " .slot > img {",
-        "  margin: 0!important;",
-        "  height: 71px;",
-        "  width: 50px;",
-        " }",
-        " .container {",
-        "   background-color: #4a2b0f;",
-        "   height: 400px;",
-        "   width: 260px;",
-        "   margin: 50px auto;",
-        "   border-radius: 4px;",
-        " }",
-        " .header {",
-        "   border: 2px solid #fff;",
-        "   border-radius: 4px;",
-        "   height: 55px;",
-        "   margin: 14px auto;",
-        "   background-color: #457f86",
-        " }",
-        " .header h2 {",
-        "   height: 30px;",
-        "   margin: auto;",
-        " }",
-        " .header h2 {",
-        "   font-size: 14px;",
-        "   margin: 0 0;",
-        "   padding: 0;",
-        "   color: #fff;",
-        "   text-align: center;",
-        " }",
-        " .slots{",
-        "   display: flex;",
-        "   background-color: #457f86;",
-        "   border-radius: 6px;",
-        "   border: 2px solid #fff;",
-        " }",
-        " .slot{",
-        "   flex: 1 0 auto;",
-        "   background: white;",
-        "   height: 75px;",
-        "   width: 50px;",
-        "   margin: 8px;",
-        "   border: 2px solid #215f1e;",
-        "   border-radius: 4px;",
-        "   text-align: center;",
-        " }",
-        " .go {",
-        "   width: 100%;",
-        "   color: #fff;",
-        "   background-color: #457f86;",
-        "   border: 2px solid #fff;",
-        "   border-radius: 2px;",
-        "   box-sizing: none;",
-        "   outline: none!important;",
-        " }",
-        " .foot {",
-        "   height: 150px;",
-        "   background-color: 457f86;",
-        "   border: 2px solid #fff;",
-        " }",
-        " ",
-        " .logger {",
-        "   color: white;",
-        "   margin: 10px;",
-        " }",
-        " ",
-        " .outset {",
-        "   -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
-        "   -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
-        "     box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
-        " }",
-        " ",
-        " .inset {",
-        "   -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
-        "   -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
-        "   box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
-        " }",
-        "</style>"
-      ],
-      "solutions": [
-        ""
+        "}",
+        "checkSign(10);"
       ],
+      "tail": [],
+      "solutions": [],
       "tests": [
-        "assert((editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)\\.html\\(\\s*?\\'\\<img\\s?src\\s?=\\s?\"\\'\\s?\\+\\s?images\\[\\w+\\s*\\-\\s*1\\]\\s?\\+\\s?\\'\"\\>\\'\\s*?\\);/gi) && editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)\\.html\\(\\s*?\\'\\<img\\s?src\\s?=\\s?\"\\'\\s?\\+\\s?images\\[\\w+\\s*\\-\\s*1\\]\\s?\\+\\s?\\'\"\\>\\'\\s*?\\);/gi).length >= 3), 'Use the provided code three times. One for each slot.')",
-        "assert(editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[0\\]\\s*?\\)/gi), 'You should have used <code>$&#40;&#39;.slot&#39;&#41;[0]</code> at least once.')",
-        "assert(editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[1\\]\\s*?\\)/gi), 'You should have used <code>$&#40;&#39;.slot&#39;&#41;[1]</code> at least once.')",
-        "assert(editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[2\\]\\s*?\\)/gi), 'You should have used <code>$&#40;&#39;.slot&#39;&#41;[2]</code> at least once.')",
-        "assert(editor.match(/slotOne/gi) && editor.match(/slotOne/gi).length >= 7, 'You should have used the <code>slotOne</code> value at least once.')",
-        "assert(editor.match(/slotTwo/gi) && editor.match(/slotTwo/gi).length >= 8, 'You should have used the <code>slotTwo</code> value at least once.')",
-        "assert(editor.match(/slotThree/gi) && editor.match(/slotThree/gi).length >= 7, 'You should have used the <code>slotThree</code> value at least once.')"
+        "assert(checkSign(10) === 'positive', 'message: <code>checkSign(10)</code> should return positive');",
+        "assert(checkSign(-12) === 'negative', 'message: <code>checkSign(-12)</code> should return negative');",
+        "assert(checkSign(0) === 'zero', 'message: </code>checkSign(0)</code> should return zero');"
       ],
       "type": "waypoint",
-      "challengeType": 0,
-      "isBeta": true,
-      "translations": {
-        "es": {
-          "title": "Dale a tu máquina tragamonedas JavaScript algunas imágenes con estilo",
-          "description": [
-            "Ahora añadamos algunas imágenes en nuestras casillas.",
-            "Ya hemos creado las imágenes por ti en una matriz llamada <code>images</code>. Podemos utilizar diferentes índices para tomara cada una de estas. ",
-            "Aquí está como haríamos que la primera casilla muestre una imagen diferente dependiendo del número aleatorio que se genere:",
-            "<code>$($('.slot')[0]).html('&lt;img src=\"' + images[slotOne-1] + '\"&gt;');</code>",
-            "Configura las tres casillas de manera análoga, a continuación, pulsa el botón \"Go\" para jugar con la máquina tragamonedas."
-          ]
-        }
-      }
+      "challengeType": 1,
+      "translations": {}
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/seed/challenges/02-javascript-algorithms-and-data-structures/claim-your-javascript-algorithms-and-data-structures.json b/seed/challenges/02-javascript-algorithms-and-data-structures/claim-your-javascript-algorithms-and-data-structures.json
new file mode 100644
index 00000000000000..fc734893dcbac2
--- /dev/null
+++ b/seed/challenges/02-javascript-algorithms-and-data-structures/claim-your-javascript-algorithms-and-data-structures.json
@@ -0,0 +1,240 @@
+{
+  "name": "Claim Your JavaScript Algorithms and Data Structures Certificate",
+  "order": 13,
+  "time": "5 minutes",
+  "challenges": [
+    {
+      "id": "587d7b7f367417b2b2512b25",
+      "title": "Claim Your JavaScript Algorithms and Data Structures Certificate",
+      "description": [
+        [
+          "//i.imgur.com/k8btNUB.jpg",
+          "An image of our Front End Development Certificate",
+          "This challenge will give you your verified Front End Development Certificate. Before we issue your certificate, we must verify that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
+          ""
+        ],
+        [
+          "//i.imgur.com/uLPsUko.jpg",
+          "The definition of plagiarism: Plagiarism (noun) - copying someone else’s work and presenting it as your own without crediting them",
+          "By clicking below, you pledge that all of your submitted code A) is code you or your pair personally wrote, or B) comes from open source libraries like jQuery, or C) has been clearly attributed to its original authors. You also give us permission to audit your challenge solutions and revoke your certificate if we discover evidence of plagiarism.",
+          "#"
+        ],
+        [
+          "//i.imgur.com/UedoV2G.jpg",
+          "An image of the text \"Front End Development Certificate requirements\"",
+          "Let's confirm that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. Click the button below to verify this.",
+          "#"
+        ],
+        [
+          "//i.imgur.com/Q5Za9U6.jpg",
+          "An image of the word \"Congratulations\"",
+          "Congratulations! We've added your Front End Development Certificate to your portfolio page. Unless you choose to hide your solutions, this certificate will remain publicly visible and verifiable.",
+          ""
+        ]
+      ],
+      "challengeSeed": [
+        {
+          "properties": [
+            "isHonest",
+            "isFrontEndCert"
+          ],
+          "apis": [
+            "/certificate/honest",
+            "/certificate/verify/front-end"
+          ],
+          "stepIndex": [
+            1,
+            2
+          ]
+        }
+      ],
+      "tests": [
+        {
+          "id": "a202eed8fc186c8434cb6d61",
+          "title": "Reverse a String"
+        },
+        {
+          "id": "a302f7aae1aa3152a5b413bc",
+          "title": "Factorialize a Number"
+        },
+        {
+          "id": "aaa48de84e1ecc7c742e1124",
+          "title": "Check for Palindromes"
+        },
+        {
+          "id": "a26cbbe9ad8655a977e1ceb5",
+          "title": "Find the Longest Word in a String"
+        },
+        {
+          "id": "ab6137d4e35944e21037b769",
+          "title": "Title Case a Sentence"
+        },
+        {
+          "id": "a789b3483989747d63b0e427",
+          "title": "Return Largest Numbers in Arrays"
+        },
+        {
+          "id": "acda2fb1324d9b0fa741e6b5",
+          "title": "Confirm the Ending"
+        },
+        {
+          "id": "afcc8d540bea9ea2669306b6",
+          "title": "Repeat a string repeat a string"
+        },
+        {
+          "id": "ac6993d51946422351508a41",
+          "title": "Truncate a string"
+        },
+        {
+          "id": "a9bd25c716030ec90084d8a1",
+          "title": "Chunky Monkey"
+        },
+        {
+          "id": "579e2a2c335b9d72dd32e05c",
+          "title": "Splice and Slice"
+        },
+        {
+          "id": "af2170cad53daa0770fabdea",
+          "title": "Mutations"
+        },
+        {
+          "id": "adf08ec01beb4f99fc7a68f2",
+          "title": "Falsy Bouncer"
+        },
+        {
+          "id": "a39963a4c10bc8b4d4f06d7e",
+          "title": "Seek and Destroy"
+        },
+        {
+          "id": "a24c1a4622e3c05097f71d67",
+          "title": "Where do I belong"
+        },
+        {
+          "id": "a3566b1109230028080c9345",
+          "title": "Sum All Numbers in a Range"
+        },
+        {
+          "id": "a5de63ebea8dbee56860f4f2",
+          "title": "Diff Two Arrays"
+        },
+        {
+          "id": "a7f4d8f2483413a6ce226cac",
+          "title": "Roman Numeral Converter"
+        },
+        {
+          "id": "a8e512fbe388ac2f9198f0fa",
+          "title": "Wherefore art thou"
+        },
+        {
+          "id": "a0b5010f579e69b815e7c5d6",
+          "title": "Search and Replace"
+        },
+        {
+          "id": "aa7697ea2477d1316795783b",
+          "title": "Pig Latin"
+        },
+        {
+          "id": "afd15382cdfb22c9efe8b7de",
+          "title": "DNA Pairing"
+        },
+        {
+          "id": "af7588ade1100bde429baf20",
+          "title": "Missing letters"
+        },
+        {
+          "id": "a77dbc43c33f39daa4429b4f",
+          "title": "Boo who"
+        },
+        {
+          "id": "a105e963526e7de52b219be9",
+          "title": "Sorted Union"
+        },
+        {
+          "id": "a6b0bb188d873cb2c8729495",
+          "title": "Convert HTML Entities"
+        },
+        {
+          "id": "a103376db3ba46b2d50db289",
+          "title": "Spinal Tap Case"
+        },
+        {
+          "id": "a5229172f011153519423690",
+          "title": "Sum All Odd Fibonacci Numbers"
+        },
+        {
+          "id": "a3bfc1673c0526e06d3ac698",
+          "title": "Sum All Primes"
+        },
+        {
+          "id": "ae9defd7acaf69703ab432ea",
+          "title": "Smallest Common Multiple"
+        },
+        {
+          "id": "a6e40f1041b06c996f7b2406",
+          "title": "Finders Keepers"
+        },
+        {
+          "id": "a5deed1811a43193f9f1c841",
+          "title": "Drop it"
+        },
+        {
+          "id": "ab306dbdcc907c7ddfc30830",
+          "title": "Steamroller"
+        },
+        {
+          "id": "a8d97bd4c764e91f9d2bda01",
+          "title": "Binary Agents"
+        },
+        {
+          "id": "a10d2431ad0c6a099a4b8b52",
+          "title": "Everything Be True"
+        },
+        {
+          "id": "a97fd23d9b809dac9921074f",
+          "title": "Arguments Optional"
+        },
+        {
+          "id": "56533eb9ac21ba0edf2244e2",
+          "title": "Caesars Cipher"
+        },
+        {
+          "id": "a2f1d72d9b908d0bd72bb9f6",
+          "title": "Make a Person"
+        },
+        {
+          "id": "af4afb223120f7348cdfc9fd",
+          "title": "Map the Debris"
+        }
+      ],
+      "type": "Waypoint",
+      "challengeType": 7,
+      "descriptionEs": [
+        [
+          "//i.imgur.com/k8btNUB.jpg",
+          "Una imagen que muestra nuestro certificado de Desarrollo de interfaces",
+          "Este desafío te otorga tu certificado autenticado de Desarrollo de interfaces. Antes de que podamos emitir tu certificado, debemos verificar que has completado todos los desafíos básicos e intermedios de diseño de algoritmos, y todos los proyectos básicos e intermedios de desarrollo de interfaces. También debes aceptar nuestro Juramento de honestidad académica. Pulsa el botón siguiente para iniciar este proceso.",
+          ""
+        ],
+        [
+          "//i.imgur.com/HArFfMN.jpg",
+          "Plagio (nombre): acción y efecto de plagiar. Plagiar (verbo) - copiar en lo sustancial obras ajenas, dándolas como propias.",
+          "Al pulsar el botón siguiente, juras que todo el código en tus soluciones a los desafíos A) es código que tú o tu compañero escribieron personalmente, o B) proviene de librerías de código abierto como jQuery, o C) ha sido claramente atribuido a sus autores originales. También nos otorgas el permiso para auditar tus soluciones a los desafíos y revocar tu certificado si encontramos evidencia de plagio.",
+          "#"
+        ],
+        [
+          "//i.imgur.com/14F2Van.jpg",
+          "Una imagen del texto \"Front End Development Certificate requirements\"",
+          "Confirmemos que has completado todos nuestros desafíos básicos e intermedios de diseño de algoritmos, y todos nuestros proyectos básicos e intermedios de desarrollo de interfaces. Pulsa el botón siguiente para hacer la verificación.",
+          "#"
+        ],
+        [
+          "//i.imgur.com/16SIhHO.jpg",
+          "Una imagen de la palabra \"Congratulations\"",
+          "¡Felicitaciones! Hemos agregado tu certificado de Desarrollo de interfaces a tu portafolio. A menos que elijas no mostrar tus soluciones, este certificado será públicamente visible y verificable.",
+          ""
+        ]
+      ],
+      "titleEs": "Reclama tu certificado de Desarrollo de interfaces"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/02-javascript-algorithms-and-data-structures/debugging.json b/seed/challenges/02-javascript-algorithms-and-data-structures/debugging.json
new file mode 100644
index 00000000000000..46c4e321f49334
--- /dev/null
+++ b/seed/challenges/02-javascript-algorithms-and-data-structures/debugging.json
@@ -0,0 +1,589 @@
+{
+  "name": "Debugging",
+  "order": 4,
+  "time": "1 hour",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "587d7b83367417b2b2512b32",
+      "title": "Introduction to the Debugging Challenges",
+      "description": [
+        [
+          "http://imgs.xkcd.com/comics/debugging.png",
+          "XKCD web comic walking through the convoluted process of debugging. The programmer moves from a browser problem, to a keyboard driver issue, receives a cryptic system utility error message, and ends by finding the sword of Martin the Warrior.",
+          "Debugging is a valuable and (unfortunately) necessary tool for programmers. It follows the testing phase of checking if your code works as intended, and discovering it does not. Debugging is the process of finding exactly what isn't working and fixing it.",
+          ""
+        ],
+        [
+          "",
+          "",
+          "After spending time creating a brilliant block of code, it is tough realizing it may have errors. These issues generally come in three forms: 1) syntax errors that prevent a program from running, 2) runtime errors when code fails to execute or has unexpected behavior, and 3) semantic (or logical) errors when code doesn't do what it's meant to.<br><br>Modern code editors (and experience) can help identify syntax errors. Semantic and runtime errors are harder to find. They may cause your program to crash, make it run forever, or give incorrect output. Think of debugging as trying to understand why your code is behaving the way it is.<br><br>Example of a syntax error - often detected by the code editor:<br><br><blockquote>funtion willNotWork( {<br>&nbsp;&nbsp;console.log(\"Yuck\");<br>}<br>// \"function\" keyword is misspelled and there's a missing parenthesis</blockquote><br><br>Here's an example of a runtime error - often detected while the program executes:<br><br><blockquote>function loopy() {<br>&nbsp;&nbsp;while(true) {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Hello, world!\");<br>&nbsp;&nbsp;}<br>}<br>// Calling loopy starts an infinite loop, which may crash your browser</blockquote><br><br>Example of a semantic error - often detected after testing code output:<br><br><blockquote>function calcAreaOfRect(w, h) {<br>&nbsp;&nbsp;return w + h; // This should be w * h<br>}<br>let myRectArea = calcAreaOfRect(2, 3);<br>// Correct syntax and the program executes, but this gives the wrong answer</blockquote>",
+          ""
+        ],
+        [
+          "",
+          "",
+          "Debugging is frustrating, but it helps to develop (and follow) a step-by-step approach to review your code. This means checking the intermediate values and types of variables to see if they are what they should be. You can start with a simple process of elimination.<br><br>For example, if function A works and returns what it's supposed to, then function B may have the issue. Or start checking values in a block of code from the middle to try to cut the search space in half. A problem in one spot indicates a bug in the first half of the code. If not, it's likely in the second.<br><br>This section will cover a couple helpful tools to find bugs, and some of the common forms they take. Fortunately, debugging is a learnable skill that just requires a little patience and practice to master.",
+          ""
+        ]
+      ],
+      "releasedOn": "",
+      "challengeSeed": [],
+      "tests": [],
+      "type": "Waypoint",
+      "challengeType": 7,
+      "isRequired": false,
+      "titleEs": "",
+      "descriptionEs": [
+        []
+      ],
+      "titleFr": "",
+      "descriptionFr": [
+        []
+      ],
+      "titleDe": "",
+      "descriptionDe": [
+        []
+      ]
+    },
+    {
+      "id": "587d7b83367417b2b2512b33",
+      "title": "Use the JavaScript Console to Check the Value of a Variable",
+      "description": [
+        "Both Chrome and Firefox have excellent JavaScript consoles, also known as DevTools, for debugging your JavaScript.",
+        "You can find Developer tools in your Chrome's menu or Web Console in FireFox's menu. If you're using a different browser, or a mobile phone, we strongly recommend switching to desktop Firefox or Chrome.",
+        "The <code>console.log()</code> method, which \"prints\" the output of what's within its parentheses to the console, will likely be the most helpful debugging tool. Placing it at strategic points in your code can show you the intermediate values of variables. It's good practice to have an idea of what the output should be before looking at what it is. Having check points to see the status of your calculations throughout your code will help narrow down where the problem is.",
+        "Here's an example to print 'Hello world!' to the console:",
+        "<code>console.log('Hello world!');</code>",
+        "<h4>Instructions</h4>",
+        "Use the <code>console.log()</code> method to print the value of the variable <code>a</code> where noted in the code."
+      ],
+      "challengeSeed": [
+        "let a = 5;",
+        "let b = 1;",
+        "a++;",
+        "// Add your code below this line",
+        "",
+        "",
+        "let sumAB = a + b;",
+        "console.log(sumAB);"
+      ],
+      "tests": [
+        "assert(code.match(/console\\.log\\(a\\)/g), 'message: Your code should use <code>console.log()</code> to check the value of the variable <code>a</code>.');"
+      ],
+      "solutions": [
+
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b84367417b2b2512b34",
+      "title": "Use typeof to Check the Type of a Variable",
+      "description": [
+        "You can use <code>typeof</code> to check the data structure, or type, of a variable. This is useful in debugging when working with multiple data types. If you think you're adding two numbers, but one is actually a string, the results can be unexpected. Type errors can lurk in calculations or function calls. Especially take care when you're accessing and working with external data in the form of a JavaScript object (JSON).",
+        "Here are some examples using <code>typeof</code>:",
+        "<blockquote>console.log(typeof \"\"); // outputs \"string\"<br>console.log(typeof 0); // outputs \"number\"<br>console.log(typeof []); // outputs \"object\"<br>console.log(typeof {}); // outputs \"object\"</blockquote>",
+        "JavaScript recognizes six primitive (immutable) data types: <code>Boolean</code>, <code>Null</code>, <code>Undefined</code>, <code>Number</code>, <code>String</code>, and <code>Symbol</code> (new with ES6) and one type for mutable items: <code>Object</code>. Note that in JavaScript, arrays are technically a type of object.",
+        "<h4>Instructions</h4>",
+        "Add two <code>console.log()</code> statements to check the <code>typeof</code> each of the two variables <code>seven</code> and <code>three</code> in the code."
+      ],
+      "challengeSeed": [
+        "let seven = 7;",
+        "let three = \"3\";",
+        "console.log(seven + three);",
+        "// Add your code below this line",
+        ""
+      ],
+      "tests": [
+        "assert(code.match(/console\\.log\\(typeof[\\( ].*\\)?\\);/g).length == 2, 'message: Your code should use <code>typeof</code> in two <code>console.log()</code> statements to check the type of the variables.');",
+        "assert(code.match(/typeof[\\( ]seven\\)?/g), 'message: Your code should use <code>typeof</code> to check the type of the variable <code>seven</code>.');",
+        "assert(code.match(/typeof[\\( ]three\\)?/g), 'message: Your code should use <code>typeof</code> to check the type of the variable <code>three</code>.');"
+      ],
+      "solutions": [
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b84367417b2b2512b35",
+      "title": "Catch Misspelled Variable and Function Names",
+      "description": [
+        "The <code>console.log()</code> and <code>typeof</code> methods are the two primary ways to check intermediate values and types of program output. Now it's time to get into the common forms that bugs take. One syntax-level issue that fast typers can commiserate with is the humble spelling error.",
+        "Transposed, missing, or mis-capitalized characters in a variable or function name will have the browser looking for an object that doesn't exist - and complain in the form of a reference error. JavaScript variable and function names are case-sensitive.",
+        "<h4>Instructions</h4>",
+        "Fix the two spelling errors in the code so the <code>netWorkingCapital</code> calculation works."
+      ],
+      "challengeSeed": [
+        "let receivables = 10;",
+        "let payables = 8;",
+        "let netWorkingCapital = recievables - payable;",
+        "console.log(`Net working capital is: ${netWorkingCapital}`);"
+      ],
+      "tests": [
+        "assert(netWorkingCapital === 2, 'message: Check the spelling of the two variables used in the netWorkingCapital calculation, the console output should show that \"Net working capital is: 2\".');",
+        "assert(!code.match(/recievables/g), 'message: There should be no instances of mis-spelled variables in the code.');",
+        "assert(code.match(/receivables/g).length == 2, 'message: The <code>receivables</code> variable should be declared and used properly in the code.');",
+        "assert(!code.match(/payable;/g), 'message: There should be no instances of mis-spelled variables in the code.');",
+        "assert(code.match(/payables/g).length == 2, 'message: The <code>payables</code> variable should be declared and used properly in the code.');"
+      ],
+      "solutions": [
+
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b84367417b2b2512b36",
+      "title": "Catch Unclosed Parentheses, Brackets, Braces and Quotes",
+      "description": [
+        "Another syntax error to be aware of is that all opening parentheses, brackets, curly braces, and quotes have a closing pair. Forgetting a piece tends to happen when you're editing existing code and inserting items with one of the pair types. Also, take care when nesting code blocks into others, such as adding a callback function as an argument to a method.",
+        "One way to avoid this mistake is as soon as the opening character is typed, immediately include the closing match, then move the cursor back between them and continue coding. Fortunately, most modern code editors generate the second half of the pair automatically.",
+        "<h4>Instructions</h4>",
+        "Fix the two pair errors in the code."
+      ],
+      "challengeSeed": [
+        "let myArray = [1, 2, 3;",
+        "let arraySum = myArray.reduce((previous, current =>  previous + current);",
+        "console.log(`Sum of array values is: ${arraySum}`);"
+      ],
+      "tests": [
+        "assert(code.match(/myArray\\s*?=\\s*?\\[\\s*?1\\s*?,\\s*?2\\s*?,\\s*?3\\s*?\\];/g), 'message: Your code should fix the missing piece of the array.');",
+        "assert(arraySum === 6, 'message: Your code should fix the missing piece of the <code>.reduce()</code> method. The console output should show that \"Sum of array values is: 6\".');"
+      ],
+      "solutions": [
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b84367417b2b2512b37",
+      "title": "Catch Mixed Usage of Single and Double Quotes",
+      "description": [
+        "JavaScript allows the use of both single ('') and double (\"\") quotes to declare a string. Deciding which one to use generally comes down to personal preference, with some exceptions.",
+        "Having two choices is great when a string has contractions or another piece of text that's in quotes. Just be careful that you don't close the string too early, which causes a syntax error.",
+        "Here are some examples of mixing quotes:",
+        "<blockquote>// These are correct:<br>const grouchoContraction = \"I've had a perfectly wonderful evening, but this wasn't it.\";<br>const quoteInString = \"Groucho Marx once said 'Quote me as saying I was mis-quoted.'\";<br>// This is incorrect:<br>const uhOhGroucho = 'I've had a perfectly wonderful evening, but this wasn't it.';</blockquote>",
+        "Of course, it is okay to use only one style of quotes. You can escape the quotes inside the string by using the backslash (\\) escape character:",
+        "<blockquote>// Correct use of same quotes:<br>const allSameQuotes = 'I\\'ve had a perfectly wonderful evening, but this wasn\\'t it.';</blockquote>",
+        "<h4>Instructions</h4>",
+        "Fix the string so it either uses different quotes for the <code>href</code> value, or escape the existing ones. Keep the double quote marks around the entire string."
+      ],
+      "challengeSeed": [
+        "let innerHtml = \"<p>Click here to <a href=\"#Home\">return home</a></p>\";",
+        "console.log(innerHtml);"
+      ],
+      "tests": [
+        "assert(code.match(/<a href=\\s*?('|\\\\\")#Home\\1\\s*?>/g), 'message: Your code should fix the quotes around the <code>href</code> value \"#Home\" by either changing or escaping them.');",
+        "assert(code.match(/\"<p>.*?<\\/p>\";/g), 'message: Your code should keep the double quotes around the entire string.');"
+      ],
+      "solutions": [
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b85367417b2b2512b38",
+      "title": "Catch Use of Assignment Operator Instead of Equality Operator",
+      "description": [
+        "Branching programs, i.e. ones that do different things if certain conditions are met, rely on <code>if</code>, <code>else if</code>, and <code>else</code> statements in JavaScript. The condition sometimes takes the form of testing whether a result is equal to a value.",
+        "This logic is spoken (in English, at least) as \"if x equals y, then ...\" which can literally translate into code using the <code>=</code>, or assignment operator. This leads to unexpected control flow in your program.",
+        "As covered in previous challenges, the assignment operator (<code>=</code>) in JavaScript assigns a value to a variable name. And the <code>==</code> and <code>===</code> operators check for equality (the triple <code>===</code> tests for strict equality, meaning both value and type are the same).",
+        "The code below assigns <code>x</code> to be 2, which evaluates as <code>true</code>. Almost every value on its own in JavaScript evaluates to <code>true</code>, except what are known as the \"falsy\" values: <code>false</code>, <code>0</code>, <code>\"\"</code> (an empty string), <code>NaN</code>, <code>undefined</code>, and <code>null</code>.",
+        "<blockquote>let x = 1;<br>let y = 2;<br>if (x = y) {<br>&nbsp;&nbsp;// this code block will run for any value of y (unless y were originally set as a falsy)<br>} else {<br>&nbsp;&nbsp;// this code block is what should run (but won't) in this example<br>}</blockquote>",
+        "<h4>Instructions</h4>",
+        "Fix the condition so the program runs the right branch, and the appropriate value is assigned to <code>result</code>."
+      ],
+      "challengeSeed": [
+        "let x = 7;",
+        "let y = 9;",
+        "let result = \"to come\";",
+        "",
+        "if(x = y) {",
+        "  result = \"Equal!\";",
+        "} else {",
+        "  result = \"Not equal!\";",
+        "}",
+        "",
+        "console.log(result);"
+      ],
+      "tests": [
+        "assert(result == \"Not equal!\", 'message: Your code should fix the condition so it checks for equality, instead of using assignment.');",
+        "assert(code.match(/x\\s*?===?\\s*?y/g), 'message: The condition can use either <code>==</code> or <code>===</code> to test for equality.');"
+      ],
+      "solutions": [
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b85367417b2b2512b39",
+      "title": "Catch Missing Open and Closing Parenthesis After a Function Call",
+      "description": [
+        "When a function or method doesn't take any arguments, you may forget to include the (empty) opening and closing parentheses when calling it. Often times the result of a function call is saved in a variable for other use in your code. This error can be detected by logging variable values (or their types) to the console and seeing that one is set to a function reference, instead of the expected value the function returns.",
+        "The variables in the following example are different:",
+        "<blockquote>function myFunction() {<br>&nbsp;&nbsp;return \"You rock!\";<br>}<br>let varOne = myFunction; // set to equal a function<br>let varTwo = myFunction(); // set to equal the string \"You rock!\"</blockquote>",
+        "<h4>Instructions</h4>",
+        "Fix the code so the variable <code>result</code> is set to the value returned from calling the function <code>getNine</code>."
+      ],
+      "challengeSeed": [
+        "function getNine() {",
+        "  let x = 6;",
+        "  let y = 3;",
+        "  return x + y;",
+        "}",
+        "",
+        "let result = getNine;",
+        "console.log(result);"
+      ],
+      "tests": [
+        "assert(result == 9, 'message: Your code should fix the variable <code>result</code> so it is set to the number that the function <code>getNine</code> returns.');",
+        "assert(code.match(/getNine\\(\\)/g).length == 2, 'message: Your code should call the <code>getNine</code> function.');"
+      ],
+      "solutions": [
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b85367417b2b2512b3a",
+      "title": "Catch Arguments Passed in the Wrong Order When Calling a Function",
+      "description": [
+        "Continuing the discussion on calling functions, the next bug to watch out for is when a function's arguments are supplied in the incorrect order. If the arguments are different types, such as a function expecting an array and an integer, this will likely throw a runtime error. If the arguments are the same type (all integers, for example), then the logic of the code won't make sense. Make sure to supply all required arguments, in the proper order to avoid these issues.",
+        "<h4>Instructions</h4>",
+        "The following function <code>positivePowers</code> raises a base to a positive exponent. Unfortunately, it's not called properly - fix the code so the value of <code>power</code> is the expected 8."
+      ],
+      "challengeSeed": [
+        "function positivePowers(b, e) {",
+        "  let result = 1;",
+        "  if (e <= 0) return result;",
+        "  for (let i = 1; i <= e; i++) {",
+        "    result *= b;",
+        "  }",
+        "  return result;",
+        "}",
+        "",
+        "let base = 2;",
+        "let exp = 3;",
+        "let power = positivePowers(exp, base);",
+        "console.log(power);"
+      ],
+      "tests": [
+        "assert(power == 8, 'message: Your code should fix the variable <code>power</code> so it equals 2 raised to the 3rd power, not 3 raised to the 2nd power.');",
+        "assert(code.match(/positivePowers\\(\\s*?base\\s*?,\\s*?exp\\s*?\\);/g), 'message: Your code should use the correct order of the arguments for the <code>positivePowers</code> function call.');"
+      ],
+      "solutions": [
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b86367417b2b2512b3b",
+      "title": "Catch Off By One Errors When Using Indexing",
+      "description": [
+        "<code>Off by one errors</code> (sometimes called OBOE) crop up when you're trying to target a specific index of a string or array (to slice or access a segment), or when looping over the indices of them. JavaScript indexing starts at zero, not one, which means the last index is always one less than the length of the item. If you try to access an index equal to the length, the program may throw an \"index out of range\" reference error or print <code>undefined</code>.",
+        "When you use string or array methods that take index ranges as arguments, it helps to read the documentation and understand if they are inclusive (the item at the given index is part of what's returned) or not. Here are some examples of off by one errors:",
+        "<blockquote>let alphabet = \"abcdefghijklmnopqrstuvwxyz\";<br>let len = alphabet.length;<br>for (let i = 0; i <= len; i++) {<br>&nbsp;&nbsp;// loops one too many times at the end<br>&nbsp;&nbsp;console.log(alphabet[i]);<br>}<br>for (let j = 1; j < len; j++) {<br>&nbsp;&nbsp;// loops one too few times and misses the first character at index 0<br>&nbsp;&nbsp;console.log(alphabet[j]);<br>}<br>for (let k = 0; k < len; k++) {<br>&nbsp;&nbsp;// Goldilocks approves - this is just right<br>&nbsp;&nbsp;console.log(alphabet[k]);<br>}</blockquote>",
+        "<h4>Instructions</h4>",
+        "Fix the two indexing errors in the following function so all the numbers 1 through 5 are printed to the console."
+      ],
+      "challengeSeed": [
+        "function countToFive() {",
+        "  let firstFive = \"12345\";",
+        "  let len = firstFive.length;",
+        "  for (let i = 1; i <= len; i++) {",
+        "    console.log(firstFive[i]);",
+        "  }",
+        "}",
+        "",
+        "countToFive();"
+      ],
+      "tests": [
+        "assert(code.match(/i\\s*?=\\s*?0\\s*?;/g).length == 1, 'message: Your code should set the initial condition of the loop so it starts at the first index.');",
+        "assert(!code.match(/i\\s?=\\s*?1\\s*?;/g), 'message: Your code should fix the initial condition of the loop.');",
+        "assert(code.match(/i\\s*?<\\s*?len\\s*?;/g).length == 1, 'message: Your code should set the terminal condition of the loop so it stops at the last index.');",
+        "assert(!code.match(/i\\s*?<=\\s*?len;/g), 'message: Your code should fix the terminal condition of the loop.');"
+      ],
+      "solutions": [
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b86367417b2b2512b3c",
+      "title": "Use Caution When Reinitializing Variables Inside a Loop",
+      "description": [
+        "Sometimes it's necessary to save information, increment counters, or re-set variables within a loop. A potential issue is when variables either should be reinitialized, and aren't, or vice versa. This is particularly dangerous if you accidentally reset the variable being used for the terminal condition, causing an infinite loop.",
+        "Printing variable values with each cycle of your loop by using <code>console.log()</code> can uncover buggy behavior related to resetting, or failing to reset a variable.",
+        "<h4>Instructions</h4>",
+        "The following function is supposed to create a two-dimensional array with <code>m</code> rows and <code>n</code> columns of zeroes. Unfortunately, it's not producing the expected output because the <code>row</code> variable isn't being reinitialized (set back to an empty array) in the outer loop. Fix the code so it returns a correct 3x2 array of zeroes, which looks like <code>[[0, 0], [0, 0], [0, 0]]</code>."
+      ],
+      "challengeSeed": [
+        "function zeroArray(m, n) {",
+        "  // Creates a 2-D array with m rows and n columns of zeroes",
+        "  let newArray = [];",
+        "  let row = [];",
+        "  for (let i = 0; i < m; i++) {",
+        "    // Adds the m-th row into newArray",
+        "    ",
+        "    for (let j = 0; j < n; j++) {",
+        "      // Pushes n zeroes into the current row to create the columns",
+        "      row.push(0);",
+        "    }",
+        "    // Pushes the current row, which now has n zeroes in it, to the array",
+        "    newArray.push(row);",
+        "  }",
+        "  return newArray;",
+        "}",
+        "",
+        "let matrix = zeroArray(3, 2);",
+        "console.log(matrix);"
+      ],
+      "tests": [
+        "assert(JSON.stringify(matrix) == \"[[0,0],[0,0],[0,0]]\", 'message: Your code should set the <code>matrix</code> variable to an array holding 3 rows of 2 columns of zeroes each.');",
+        "assert(matrix.length == 3, 'message: The <code>matrix</code> variable should have 3 rows.');",
+        "assert(matrix[0].length == 2 && matrix[1].length === 2 && matrix[2].length === 2, 'message: The <code>matrix</code> variable should have 2 columns in each row.');"
+      ],
+      "solutions": [
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b86367417b2b2512b3d",
+      "title": "Prevent Infinite Loops with a Valid Terminal Condition",
+      "description": [
+        "The final topic is the dreaded infinite loop. Loops are great tools when you need your program to run a code block a certain number of times or until a condition is met, but they need a terminal condition that ends the looping. Infinite loops are likely to freeze or crash the browser, and cause general program execution mayhem, which no one wants.",
+        "There was an example of an infinite loop in the introduction to this section - it had no terminal condition to break out of the <code>while</code> loop inside <code>loopy()</code>. Do NOT call this function!",
+        "<blockquote>function loopy() {<br>&nbsp;&nbsp;while(true) {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Hello, world!\");<br>&nbsp;&nbsp;}<br>}</blockquote>",
+        "It's the programmer's job to ensure that the terminal condition, which tells the program when to break out of the loop code, is eventually reached. One error is incrementing or decrementing a counter variable in the wrong direction from the terminal condition. Another one is accidentally resetting a counter or index variable within the loop code, instead of incrementing or decrementing it.",
+        "<h4>Instructions</h4>",
+        "The <code>myFunc()</code> function contains an infinite loop because the terminal condition <code>i != 4</code> will never evaluate to <code>false</code> (and break the looping) - <code>i</code> will increment by 2 each pass, and jump right over 4 since <code>i</code> is odd to start. Fix the comparison operator in the terminal condition so the loop only runs for <code>i</code> less than or equal to 4."
+      ],
+      "challengeSeed": [
+        "function myFunc() {",
+        "  for (let i = 1; i != 4; i += 2) {",
+        "    console.log(\"Still going!\");",
+        "  }",
+        "}"
+      ],
+      "tests": [
+        "assert(code.match(/i\\s*?<=\\s*?4;/g).length == 1, 'message: Your code should change the comparison operator in the terminal condition (the middle part) of the <code>for</code> loop.');",
+        "assert(!code.match(/i\\s*?!=\\s*?4;/g), 'message: Your code should fix the comparison operator in the terminal condition of the loop.');"
+      ],
+      "solutions": [
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/02-javascript-algorithms-and-data-structures/es6.json b/seed/challenges/02-javascript-algorithms-and-data-structures/es6.json
new file mode 100644
index 00000000000000..378e1f9767bd27
--- /dev/null
+++ b/seed/challenges/02-javascript-algorithms-and-data-structures/es6.json
@@ -0,0 +1,1054 @@
+{
+  "name": "ES6",
+  "order": 2,
+  "time": "5 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "587d7b86367417b2b2512b3e",
+      "title": "Introduction to the ES6 Challenges",
+      "description": [
+        [
+          "",
+          "",
+          "ECMAScript is a standardized version of JavaScript with the goal of unifying the language's specifications and features. As all major browsers and JavaScript-runtimes follow this specification, the term <i>ECMAScript</i> is interchangeable with the term <i>JavaScript</i>.<br><br>Most of the challenges on Free Code Camp use the ECMAScript 5 (ES5) specification of the language, finalized in 2009. But JavaScript is an evolving programming language. As features are added and revisions are made, new versions of the language are released for use by developers.<br><br>The most recent standardized version is called ECMAScript 6 (ES6), released in 2015. This new version of the language adds some powerful features that will be covered in this section of challenges, including:<br><br><ul><li>Arrow functions</li><li>Classes</li><li>Modules</li><li>Promises</li><li>Generators</li><li><code>let</code> and <code>const</code></li></ul><br><br><strong>Note</strong><br>Not all browsers support ES6 features. If you use ES6 in your own projects, you may need to use a program (transpiler) to convert your ES6 code into ES5 until browsers support ES6.",
+          ""
+        ]
+      ],
+      "releasedOn": "",
+      "challengeSeed": [],
+      "tests": [],
+      "type": "Waypoint",
+      "challengeType": 7,
+      "isRequired": false,
+      "titleEs": "",
+      "descriptionEs": [
+        []
+      ],
+      "titleFr": "",
+      "descriptionFr": [
+        []
+      ],
+      "titleDe": "",
+      "descriptionDe": [
+        []
+      ]
+    },
+    {
+      "id": "587d7b87367417b2b2512b3f",
+      "title": "Problems with the var keyword",
+      "description": [
+        "One of the biggest problems with declaring variables with the var keyword is that you can overwrite variable declarations without an error.",
+        "<code>var camper = 'James'; </code>",
+        "<code>var camper = 'David'; </code>",
+        "<code>console.log(camper); </code>",
+        "<code>// logs 'David'</code>",
+        "In a small application, you might not run into this type of problem, but when your code becomes larger, you might accidently overwrite a variable what you did not intend to overwrite. Without an error warning, searching and fixing bugs becomes more difficult.",
+        "Another problem with the var keyword is that it is hoisted to the top of your code when it compiles. This means that you can use a variable before you declare it.",
+        "<code>console.log(camper); </code>",
+        "<code>var camper = 'David'; </code>",
+        "<code>// logs undefined</code>",
+        "The code runs in the following order: the variable camper is declared as undefined, camper is loged, and then David is assigned to camper. This code will run without an error.",
+        "A new keyword was introduced in ES6 to solve the problems with the var keyword, called let. With the let keyword, all the examples we just saw will cause an error to appear. We can no longer overwrite variables or use a variable before we declare it. Some modern browsers requires you to add \"use strict\" to the top of your code before you can able to use the new features in ES6",
+        "Let's try using the let keyword;",
+        "Instructions",
+        "Fix the code so it only uses the let keyword and make the errors go away.",
+        "Note",
+        "Remember to add \"use strict\" to the top of your code."
+      ],
+      "challengeSeed": [
+        "var favorite = redNosedReindeer + \" is Santa's favorite reindeer.\";",
+        "var redNosedReindeer = \"Rudolph\";",
+        "var redNosedReindeer = \"Comet\";"
+      ],
+      "tests": [
+        "assert(redNosedReindeer === \"Rudolph\", 'message: <code>redNosedReindeer</code> should be Rudolph.');",
+        "assert(favorite === \"Rudolph is Santa's favorite reindeer.\", \"message: <code>favorite</code> should return Santa's favorite reindeer.\");"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b87367417b2b2512b40",
+      "title": "Scopes and the var keyword",
+      "description": [
+        "When you declare a variable with the var keyword, it is declared globally, or locally if inside a function.",
+        "The let keywords behaves in the same way, but with some extra features. When you declare a variable with the let keyword inside a block, statement, or expression; its scope is limited to that block, statement, or expression.",
+        "For example:",
+        "<code>var numArray = [];</code>",
+        "<code>for( var i = 0; i < 3; i++){</code>",
+        "<code>  numArray.push(i);</code>",
+        "<code>}</code>",
+        "<code>console.log(numArray)</code>",
+        "<code>// returns [ 0, 1, 2 ]</code>",
+        "<code>console.log(i) </code>",
+        "<code>// returns 3</code>",
+        "With the var keyword, i is declared globally. So when i++ is executed, it updates the global variable. This code is similiar to the following:",
+        "<code>var numArray = [];</code>",
+        "<code>var i ;</code>",
+        "<code>for( i = 0; i < 3; i++){</code>",
+        "<code>  numArray.push(i);</code>",
+        "<code>}</code>",
+        "<code>console.log(numArray)</code>",
+        "<code>// returns [ 0, 1, 2 ]</code>",
+        "<code>console.log(i) </code>",
+        "<code>// returns 3</code>",
+        "This behavior will cause problems when you create a function, and store it for later uses, inside the for loop that uses the i variable. This is because the stored function will always refer to the value of the updated global i variable.",
+        "<code>var printNumTwo;</code>",
+        "<code>for( var i = 0; i < 3; i++){</code>",
+        "<code>  if(i === 2){</code>",
+        "<code>      printNumTwo = function(){</code>",
+        "<code>          return i;</code>",
+        "<code>      }</code>",
+        "<code>  }</code>",
+        "<code>}</code>",
+        "<code>console.log(printNumTwo())</code>",
+        "<code>// returns 3</code>",
+        "As you can see, printNumTwo() prints 3 and not 2. This because the value to i was updated and the printNumTwo() returns the global i and not the value i had when the function was created in for loop. The let keyword does not follow this behavior;",
+        "<code>'use strict'</code>",
+        "<code>let printNumTwo;</code>",
+        "<code>for( let i = 0; i < 3; i++){</code>",
+        "<code>  if(i === 2){</code>",
+        "<code>      printNumTwo = function(){</code>",
+        "<code>          return i;</code>",
+        "<code>     }</code>",
+        "<code>  }</code>",
+        "<code>}</code>",
+        "<code>console.log(printNumTwo())</code>",
+        "<code>// returns 2</code>",
+        "<code>console.log(i)</code>",
+        "<code>// returns \"i is not defined\"</code>",
+        "i is not defined because it was not declared in the global scope. It is only declared within the for loop statement. printNumTwo() was able to print the correct value because within the loop let create 3 different i varibles with their own values.",
+        "Instructions",
+        "Fix the code so each camper shows their correct index when they are called.",
+        "Note",
+        "Remember to add \"use strict\" to the top of your code."
+      ],
+      "challengeSeed": [
+        "var newCampers = [{camper: \"Wil\"}, {camper: \"Sam\"},{camper: \"Dav\"}];",
+        "// only change code below this line",
+        "for( var i = 0; i < newCampers.length; i++){",
+        "// only change code above this line",
+        "    newCampers[i].roleCall = function(){",
+        "        return \"Camper # \" + (i + 1) + \" has arrived.\";",
+        "    };",
+        "}",
+        "// test your code",
+        "console.log(newCampers[0].roleCall());",
+        "console.log(newCampers[1].roleCall());",
+        "console.log(newCampers[2].roleCall());"
+      ],
+      "tests": [
+        "assert(newCampers[0].roleCall() === \"Camper # 1 has arrived.\", \"message: <code>newCampers[0].call()</code> should call the index of the first camper\");",
+        "assert(newCampers[1].roleCall() === \"Camper # 2 has arrived.\", \"message: <code>newCampers[0].call()</code> should call the index of the second camper\");",
+        "assert(newCampers[2].roleCall() === \"Camper # 3 has arrived.\", \"message: <code>newCampers[0].call()</code> should call the index of the third camper\");"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b87367417b2b2512b41",
+      "title": "Using the const keyword",
+      "description": [
+        "let is not the only new way to declared variables. In ES6, you can also declare variables using the const keyword.",
+        "const has all the awesome features that let has, with the added bonus that variables declared using const are read-only; they are a constant value. Which means once a variable is assigned with const, it cannot be reassigned.",
+        "<code>\"use strict\"</code>",
+        "<code>const FAV_PET = \"Cats\";</code>",
+        "<code>FAV_PET = \"Dogs\"; // returns error</code>",
+        "<code>console.log(FAV_PET);</code>",
+        "As you can see, trying to reassign a constant variable will throw an error. You should always name variables you don't want to reassign using the const keyword. This helps when you accidentally reassign a variable you did not intend to reassign. A common practice is to name your constants in all upper-cases and with an underscore to separate words.",
+        "Instructions",
+        "Change the follow code so all variables are declared using let or const. Use let when you want the variable to change, and const when you don't. Also rename const variable to conform to common practices.",
+        "Note",
+        "Don't forget to use strict mode."
+      ],
+      "challengeSeed": [
+        "// change 'var' to 'let' or 'const'",
+        "// rename constant variables",
+        "var pi = 3.14;",
+        "var radius = 10;",
+        "var calulateCircumference = function(r){",
+        "    var diameter = 2 * r;",
+        "    var result = pi * diameter;",
+        "    return result",
+        "}",
+        "// Test your code",
+        "console.log(calulateCircumference(radius))"
+      ],
+      "tests": [
+        "// Test user replaced all var keyword",
+        "// Test PI is const",
+        "// Test calculateCircumference is const",
+        "// Test pi and calulateCircumference has been renamed"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b87367417b2b2512b42",
+      "title": "An Immutable Object a const does not make",
+      "description": [
+        "const has many use-cases in modern JavaScript",
+        "Some developers prefer to assign all their variables as const by default, unless they know they need to reassign the value. Only in that case, they use let.",
+        "But, it is to be kept in mind that objects (arrays, or functions too) assigned to a variable using const are not immutable. It only prevents reassignment of the variable. You cannot use the variable and assignment operator to point to a new value.",
+        "<code>\"use strict\"</code>",
+        "<code>const s = [ 5, 6, 7 ]</code>",
+        "<code>s = [1, 2, 3]; // throws error, trying to assign a const</code>",
+        "<code>s[7] = 45; // works just as normally as it would with a regular array s, defined with var</code>",
+        "As you can see you can mutate the object itself. s still points to the array. The array s itself is not immutable, just that you cannot use the variable s to point to a different array using the assignment operator",
+        "To make an object immutable, you can use Object.freeze().",
+        "Instructions",
+        "An array is defined as <code>const s = [5, 7, 2]</code>. Change the array to <code>[2, 5, 7]</code>.",
+        "Note",
+        "Don't forget to use strict mode."
+      ],
+      "challengeSeed": [
+        "const s = [ 5, 7, 2 ];",
+        "// change code below this line",
+        "s = [2, 5, 7]",
+        "// change code above this line",
+        "// Test your code",
+        "console.log(s)"
+      ],
+      "tests": [
+        "// Test user did not replace const keyword",
+        "// Test s is const",
+        "// Test s is sorted",
+        "// Test s is still mutable, and object freeze was not invoked"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b87367417b2b2512b43",
+      "title": "Arrow functions",
+      "description": [
+        "In JS, we often, we often don't name our functions. Callback functions, for example.",
+        "Because we often create function just to pass it as argument to some other function, and we might not need to reuse this function anywhere.",
+        "To achieve this, we often use the boilerplate",
+        "<code>function(){</code>",
+        "<code>// function body</code>",
+        "<code> return ;</code>",
+        "<code>}</code>",
+        "ES6 provides you with the syntactic sugar to not having to write this. Instead, you can use arrow function syntax",
+        "<code>() => (</code>",
+        "<code>// function body</code>",
+        "<code>return ;</code>",
+        "<code>)</code>",
+        "When there is no function body, and only a return value, you can write that as a one-liner:",
+        "<code>() => (/* return value */)</code>",
+        "You don't have to write the keyword return here. You can even omit the paranthesis after =>",
+        "Instructions.",
+        "Refactor the function which returns the new Date(), to use arrow function syntax. Also make sure var is not there in the code anymore.",
+        "Note",
+        "Don't forget to use strict mode."
+      ],
+      "challengeSeed": [
+        "// change code below this line",
+        "var magic = function() {",
+        "  return new Date()",
+        "}",
+        "// change code above this line",
+        "// test your code",
+        "console.log(magic());"
+      ],
+      "tests": [
+        "// Test user did replace var keyword",
+        "// Test magic is const",
+        "// Test magic is a function",
+        "// Test magic() returns the correct date",
+        "// Test function keyword was not used",
+        "// Test arrow => was used"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b88367417b2b2512b44",
+      "title": "Arrow functions with input parameters",
+      "description": [
+        "Just like a normal function, you can pass input parameters into arrow functions.",
+        "<code>const doubler = (item) => item * 2; // doubles input value and returns it</code>",
+        "You can pass more than one parameter as well",
+        "Instructions.",
+        "Write the myConcat function that appends content of the second array, passed as argument arr2 to the first array, passed as arr1.",
+        "Note",
+        "Don't forget to use strict mode."
+      ],
+      "challengeSeed": [
+        "// change code below this line",
+        "var myConcat = function(arr1, arr2) {",
+        "  return arr1.concat(arr2)",
+        "}",
+        "// change code above this line",
+        "// test your code",
+        "console.log(myConcat([1, 2], [3, 4, 5]));"
+      ],
+      "tests": [
+        "// Test user did replace var keyword",
+        "// Test myConcat is const",
+        "// Test myConcat is a function",
+        "// Test myConcat() returns the correct array",
+        "// Test function keyword was not used",
+        "// Test arrow => was used"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b88367417b2b2512b45",
+      "title": "Arrow functions with higher order functions",
+      "description": [
+        "It's time we see in action how easily arrow function let us write complex data processing code",
+        "It mixes really well with higher order functions, such as map(), filter(), reduce() etc., that takes other functions as inputs for processing collections.",
+        "Read the following code:",
+        "<code>FBPosts.</code>",
+        "<code>.filter(function(post){</code>",
+        "<code>    return post.thumbnail !== null && post.shares > 100 && post.likes > 500</code>",
+        "<code>})</code>",
+        "<code>.reduce(function(acc, current){</code>",
+        "<code>    return acc + '<img alt=\"' + current.text + '\">' + current.thumbnail + '</img>'</code>",
+        "<code>})</code>",
+        "We have written this with filter() and reduce() to at least make it somewhat readable. Now compare the version with arrow functions",
+        "<code>FBPosts</code>",
+        "<code>    .filter((post) => post.thumbnail !== null && post.shares > 100 && post.likes > 500)</code>",
+        "<code>    .reduce((acc, current) => (acc + '<img alt=\"' + current.text + '\">' + current.thumbnail + '</img>'))</code>",
+        "This code is more succinct and keeps only the parts of the code where the real processing happen.",
+        "Instructions.",
+        "Use arrow function syntax to compute square of only the positive integers (fractions are not integers) in the array and return the array.",
+        "Note",
+        "Don't forget to use strict mode."
+      ],
+      "challengeSeed": [
+        "const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34]",
+        "// change code below this line",
+        "var squaredIntegers = realNumberArray",
+        "// change bcode above this line",
+        "// test your code",
+        "console.log(squaredIntegers);"
+      ],
+      "tests": [
+        "// Test user did replace var keyword",
+        "// Test squaredIntegers is const",
+        "// Test squaredIntegers is an array",
+        "// Test squaredIntegers is [16, 1764, 36]",
+        "// Test function keyword was not used",
+        "// Test arrow => was used",
+        "// Test loop was not used",
+        "// Test map and filter were used"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b88367417b2b2512b46",
+      "title": "Default Parameters",
+      "description": [
+        "In order to help us create more flexible functions, ES2015 introduces default parameters for functions.",
+        "Check out this code:",
+        "<code>function greeting(name = \"Anonymous\") {</code>",
+        "<code>    return \"Hello \" + name;</code>",
+        "<code>}</code>",
+        "<code>console.log(greeting(\"John\")); // Hello John</code>",
+        "<code>console.log(greeting()); // Hello Anonymous</code>",
+        "The default parameter kicks in when the argument is not specified (it is undefined). As you can see in the example above, when you do not provide a value for your parameter, the parameter will receive its default value. You can add default values for as many parameters as you want.",
+        "Instructions.",
+        "Modify the following code by adding a default parameter for the increment function so that it will always return a valid number and it will add 1 to the number parameter in case value is not specified.",
+        "Note",
+        "Don't forget to use strict mode."
+      ],
+      "challengeSeed": [
+        "function increment(number, value) {",
+        "    return number + value;",
+        "}",
+        "console.log(increment(5, 2)); // returns 7",
+        "console.log(increment(5)); // returns NaN"
+      ],
+      "tests": [
+        "assert(increment(5, 2) === 7, \"The result of increment(5, 2) should be 7\");",
+        "assert(increment(5) === 6, \"The result of increment(5) should be 6\");",
+        "// Test default parameter was used for 'value'"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b88367417b2b2512b47",
+      "title": "",
+      "description": [
+        "In order to help us create more flexible functions, ES2015 introduces the rest operator for function parameters. With the rest operator, you can create functions with variable number of arguments and then have those arguments available into an Array inside the function",
+        "Check out this code:",
+        "<code>function howMany(...args) {</code>",
+        "<code>    return \"You have passed \" + args.length + \" arguments.\";</code>",
+        "<code>}</code>",
+        "<code>console.log(howMany(0, 1, 2)); // You have passed 3 arguments.</code>",
+        "<code>console.log(howMany(\"string\", null, [1, 2, 3], { })); // You have passed 4 arguments.</code>",
+        "The rest operator eliminates the need to check the arguments object and allows us to apply map, filter and reduce on the parameters array.",
+        "Instructions.",
+        "Modify the sum function so that is uses the rest operator and it works in the same way with any number of parameters.",
+        "Note",
+        "Don't forget to use strict mode."
+      ],
+      "challengeSeed": [
+        "function sum(x, y, z) {",
+        "    const array = [ x, y, z ];",
+        "    return array.reduce((a, b) => a + b, 0);",
+        "}",
+        "console.log(sum(1, 2, 3)); // 6"
+      ],
+      "tests": [
+        "assert(sum(0,1,2) === 3, 'The result of sum(0,1,2) should be 3');",
+        "assert(sum(1,2,3,4) === 10, 'The result of sum(1,2,3,4) should be 10');",
+        "assert(sum(5) === 5, 'The result of sum(5) should be 5');",
+        "assert(sum() === 0, 'The result of sum() should be 0');"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b89367417b2b2512b48",
+      "title": "Spread Operator",
+      "description": [
+        "With the Spread Operator in ES6 or ES2015; you can improve on the array literal syntax",
+        "The ES5 code uses apply to compute the maximum value in an array",
+        "<code>var arr = [6, 89, 3, 45];</code>",
+        "<code>var maximus = Math.max.apply(null, arr); // returns 89</code>",
+        "<code>We had to use Math.max.apply(null, arr), because Math.max(arr) returns NaN. Math.max expects a comma separated arguments, just not an array.</code>",
+        "However, the spread operator makes this syntax much better to read and maintain.",
+        "<code>const arr = [6, 89, 3, 45];</code>",
+        "<code>const maximus = Math.max(...arr); // returns 89</code>",
+        "...arr returns an un-packed array content. It spreads the array.",
+        "However, this is in-place; like the argument to a function. You cannot do this:",
+        "<code>const spreaded = ...arr; // will throw a syntax error</code>",
+        "Instructions.",
+        "Copy all contents of arr1 into another array arr2."
+      ],
+      "challengeSeed": [
+        "const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];",
+        "/* Alter code below this line */",
+        "const arr2 = undefined; // change this",
+        "/* Alter code above this line */",
+        "arr1.push('JUN');",
+        "console.log(arr2); // should not be affected"
+      ],
+      "tests": [
+        "// Test arr2 is correct copy of arr1",
+        "// Test arr1 has changed",
+        "// Test spread operator was used"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b89367417b2b2512b49",
+      "title": "",
+      "description": [
+        "We earlier saw how spread operator can effectively spread or unpack the contents of the array.",
+        "We can do something similar with objects as well. Objects in JavaScript are a key-value pair collections.",
+        "Consider the following:",
+        "<code>const voxel = {x: 3.6, y: 7.4, z: 6.54 };</code>",
+        "<code>const x = voxel.x; // x = 3.6</code>",
+        "<code>const y = voxel.y; // y = 7.4</code>",
+        "<code>const z = voxel.z; // z = 6.54</code>",
+        "Here's the same assignment statement with ES6 destructuring syntax",
+        "<code>const { x, y, z } = voxel; // x = 3.6, y = 7.4, z = 6.54</code>",
+        "If instead, you want to store the values of voxel.x into a, voxel.y into b and so on; you have that freedom as well.",
+        "<code>const { x : a, y : b, z : c } = voxel // a = 3.6, y = 7.4, z = 6.54</code>",
+        "You may read it as \"get the field x and copy the value in a\" and so on.",
+        "Instructions.",
+        "Use destructuring to obtain the length of the string greeting"
+      ],
+      "challengeSeed": [
+        "const greeting = 'itadakimasu'",
+        "/* Alter code below this line */",
+        "const len = 0; // change this",
+        "/* Alter code above this line */",
+        "console.log(len); // should be using destructuring"
+      ],
+      "tests": [
+        "// Test len is 11",
+        "// Test destructuring was used"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b89367417b2b2512b4a",
+      "title": "Nested Object Destructuring",
+      "description": [
+        "We can similarly destructure nested objects",
+        "Consider the following code:",
+        "<code>const a = { start: { x: 5, y: 6}, end: { x: 6, y: -9 }};</code>",
+        "<code>const { start : { x: startX, y: startY }} = a;</code>",
+        "<code>console.log(startX, startY); // 5, 6</code>",
+        "It pulls from the first nested object. Rest of the syntax is as it was for simple object destructuring.",
+        "Instructions.",
+        "Use destructuring to obtain the max of tomorrow, which should be same as forecast.tomorrow.max"
+      ],
+      "challengeSeed": [
+        "const forecast = {",
+        "    today: { min: 72, max: 83},",
+        "    tomorrow: {min: 73.3, max: 84.6}",
+        "}",
+        "/* Alter code below this line */",
+        "const max_of_tomorrow = undefined; // change this",
+        "/* Alter code above this line */",
+        "console.log(max_of_tomorrow); // should be 84.6 destructuring"
+      ],
+      "tests": [
+        "// Test max_of_tomorrow to be 84.6",
+        "// Test destructuring was used"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b89367417b2b2512b4b",
+      "title": "Array Destructuring",
+      "description": [
+        "We can also destructure arrays as easily as objects.",
+        "One key difference between spread operator and array destructuring is that, spread operators unpack all contents of array.",
+        "Consequently, you cannot pick and choose which element or set of elements you would want to assign to variables.",
+        "Destruring an array lets us do exactly that:",
+        "<code>const [a, b] = [1, 2, 3, 4, 5, 7];</code>",
+        "<code>console.log(a, b); // 1, 2</code>",
+        "The variable a assumes first value, and b takes the second value from the array.",
+        "You can also destructure in a way, that you can pick up values from any other array index position. You simply have to use commas (,).",
+        "Instructions.",
+        "Use destructuring to swap the variables a, b. Swapping is an operation, after which, a gets the value stored in b, and b receives the value stored in a"
+      ],
+      "challengeSeed": [
+        "let a = 8, b = 6;",
+        "/* Alter code below this line */",
+        "a = b;",
+        "b = a;",
+        "/* Alter code above this line */",
+        "console.log(a); // should be 6",
+        "console.log(b); // should be 8"
+      ],
+      "tests": [
+        "// Test a is 6",
+        "// Test b is 8",
+        "// Test destructuring was used"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b8a367417b2b2512b4c",
+      "title": "Array Destructuring with Rest Operator",
+      "description": [
+        "There are situations with destructuring an array, where we might want to collect the rest of the elements into a separate array.",
+        "Something similar to Array.prototype.slice(), as shown below:",
+        "<code>const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];</code>",
+        "<code>console.log(a, b); // 1, 2</code>",
+        "<code>console.log(arr); // [3, 4, 5, 7]</code>",
+        "The variable a assumes first value, and b takes the second value from the array. After that, because of rest operator's presence, arr gets rest of the values in the form of an array.",
+        "Note that the rest element has to be the last element in the array. As in, you cannot use rest operator to catch a subarray that leaves out last element of the original array.",
+        "Instructions.",
+        "Use destructuring with rest operator to perform an effective Array.prototype.slice() so that variable arr is sub-array of original array source, with first two elements ommitted."
+      ],
+      "challengeSeed": [
+        "const source = [1,2,3,4,5,6,7,8,9,10];",
+        "/* Alter code below this line */",
+        "const arr = source ; // change this",
+        "/* Alter code above this line */",
+        "console.log(arr); // should be [3,4,5,6,7,8,9,10]",
+        "console.log(source); // should be [1,2,3,4,5,6,7,8,9,10];"
+      ],
+      "tests": [
+        "// Test arr is [3,4,5,6,7,8,9,10];",
+        "// Test source is [1,2,3,4,5,6,7,8,9,10];",
+        "// Test destructuring was used",
+        "// Test slice was not used"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b8a367417b2b2512b4d",
+      "title": "Destructuring Function Parameters",
+      "description": [
+        "In some cases, you can destructure the object in the function argument itself.",
+        "Consider the code below",
+        "<code>const profileUpdate = (profileData) => {</code>",
+        "<code>   const { name, age, sex, nationality, location } = profileData;</code>",
+        "<code>   // do something with these variables</code>",
+        "<code>}</code>",
+        "This effectively destructure the object sent into the function. However, this can also be done in-place.",
+        "const profileUpdate = ({ name, age, sex, nationality, location }) => {/* do something with these fields */}",
+        "This removes some extra linees and mainly a syntactic sugar.",
+        "This also has the added benefit of not having to send an entire object into a function; rather only those fields are copied that are needed inside the function.",
+        "Instructions.",
+        "Use destructuring within function argument to send only the max and min inside the function"
+      ],
+      "challengeSeed": [
+        "const stats = {",
+        "    max: 56.78,",
+        "    standard_deviation: 4.34,",
+        "    median: 34.54,",
+        "    mode: 23.87,",
+        "    min: -0.75,",
+        "    average: 35.85",
+        "}",
+        "/* Alter code below this line */",
+        "const half = (stats) => ((stats.max + stats.min) / 2.0); // use function argument destructurung",
+        "/* Alter code above this line */",
+        "console.log(stats); // should be object",
+        "console.log(half(stats)); // should be 28.015"
+      ],
+      "tests": [
+        "// Test stats is an object",
+        "// Test half is 28.015",
+        "// Test destructuring was used"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b8a367417b2b2512b4e",
+      "title": "String Interpolation using Backquotes",
+      "description": [
+        "A new feature of ES6 or ES2015, is that it allows you to use string interpolation with back-ticks.",
+        "Consider the code below",
+        "<code>const text = 'Hello World';</code>",
+        "<code>// string interpolation</code>",
+        "<code>const divText = `</code>",
+        "<code><div></code>",
+        "<code>   ${text}</code>",
+        "<code></div></code>",
+        "<code>console.log(divText); // prints </code>",
+        "<code>//<div></code>",
+        "<code>// Hello World</code>",
+        "<code>//</div></code>",
+        "A lot of thing happened in there.",
+        "First, the ${variable} syntax. It's a template literal. Basically, you won't have to use concatenation with + anymore. Just drop the variable in your string, wrapped with ${ and }.",
+        "Second, we used backticks, not quotes, to wrap around the string. Notice that the string is multi-line.",
+        "In ES6, back-ticks give you more robust string creation ability.",
+        "Instructions",
+        "Use proper template literal syntax with backticks.",
+        "The expected output is each entry of result object's failure array, wrapped inside an <li> element, with class attribute text-warning.",
+        "If you have trouble finding backticks, it's the ` key, to the left of your 1; and has ~ on it."
+      ],
+      "challengeSeed": [
+        "const result = {",
+        "    success: ['max_length', 'no-amd', 'prefer-arrow-functions'],",
+        "    failure: ['no-var', 'var-on-top', 'linebreak'],",
+        "    skipped: ['id-blacklist', 'no-dup-keys']",
+        "}",
+        "/* Alter code below this line */",
+        "const resultDisplay = undefined;",
+        "/* Alter code above this line */",
+        "console.log(resultDisplay);",
+        "/**",
+        " * ",
+        " * should look like this",
+        " * <li class=\"text-warning\">no-var</li>",
+        " *  <li class=\"text-warning\">var-on-top</li>",
+        " *  <li class=\"text-warning\">linebreak</li>",
+        " **/"
+      ],
+      "tests": [
+        "// Test resultDisplay is a string",
+        "// Test resultDisplay is the desired output",
+        "// Test template strings were used"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b8a367417b2b2512b4f",
+      "title": "Enhanced Object Literals : Simple Fields",
+      "description": [
+        "ES6 adds some nice support for removing boiler-plate from object literals declaration.",
+        "Consider the following:",
+        "<code>const getMousePosition = (x, y) => {</code>",
+        "<code>   return {</code>",
+        "<code>      x: x,</code>",
+        "<code>      y: y</code>",
+        "<code>   } </code>",
+        "<code>}</code>",
+        "It's a simple function that returns an object, which has two fields.",
+        "ES6 provides a syntactic sugar to remove the redundancy from having to write x: x. You can simply write x once, and it would convert that to x : x (or some equivalent of it) under the hood.",
+        "The code now becomes:",
+        "<code>const getMousePosition = (x, y) => ({x, y})</code>",
+        "Instructions",
+        "Use object literal simplification to create and return a Person object"
+      ],
+      "challengeSeed": [
+        "/* Alter code below this line */",
+        "const createPerson = (name, age, gender) => {",
+        "    return {",
+        "        name: name,",
+        "        age: age,",
+        "        gender: gender",
+        "    }",
+        "}",
+        "/* Alter code above this line */",
+        "console.log(createPerson('Zodiac Hasbro', 56, 'male')); // returns a proper object"
+      ],
+      "tests": [
+        "// Test the output is {name: \"Zodiac Hasbro\", age: 56, gender: \"male\"}",
+        "// Test no : was present"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b8b367417b2b2512b50",
+      "title": "Enhanced Object Literals : Functions",
+      "description": [
+        "With ES6, it's possible to remove the keyword function as follows, from object literals",
+        "<code>const Container extends Component {</code>",
+        "<code>    render: function() {</code>",
+        "<code>      return {</code>",
+        "<code>        `<div>Container</div>`</code>",
+        "<code>      }</code>",
+        "<code>    }</code>",
+        "<code>}</code>",
+        "We can remove the function keyword and colon (:) altogether - and get this:",
+        " const Container extends Component {",
+        "     render() {",
+        "       return {",
+        "         `<div>Container</div>`",
+        "       }",
+        "     }",
+        " }",
+        "Instructions",
+        "Use object literal simplification to create and return a Person object"
+      ],
+      "challengeSeed": [
+        "/* Alter code below this line */",
+        "const Person = (name, age, gender) => {",
+        "    return {",
+        "        name: name,",
+        "        age: age,",
+        "        gender: gender,",
+        "        sendFriendRequest: function(person){",
+        "            console.log(`Sending request to ${person.name}`);",
+        "        }",
+        "    }",
+        "}",
+        "/* Alter code above this line */",
+        "<code>const zod = Person(\"Zodiac Hasbro\", 56, 'male');</code>",
+        "<code>const yan = Person(\"Yanoshi Mimoto\", 55, 'male');</code>",
+        "<code>zod.sendFriendRequest(yan);</code>"
+      ],
+      "tests": [
+        "// Test the output is Sending request to Yanoshi Mimoto",
+        "// Test no : was present"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b8b367417b2b2512b51",
+      "title": "Enhanced Object Literals Computed Fields",
+      "description": [
+        "With ES6, you can also create a field name dynamically, like this:",
+        "<code>const prop = 'os'</code>",
+        "<code>const setup = {</code>",
+        "<code>   ['prop-' + prop] : 'darwin-64'</code>",
+        "<code>}</code>",
+        "If you inspect the object setup, you would see it's {\"prop-os\": \"darwin-64\"}",
+        "Instructions",
+        "Use object literal computed property to create an object like this",
+        "<code>{</code>",
+        "<code>  \"prop-1\": 1,</code>",
+        "<code>  \"prop-2\": 2,</code>",
+        "<code>  \"prop-3\": 3</code>",
+        "<code>}</code>"
+      ],
+      "challengeSeed": [
+        "/* Alter code below this line */",
+        "const funObject = {",
+        "}",
+        "/* Alter code above this line */",
+        "console.log(funObject);"
+      ],
+      "tests": [
+        "// Test the output is correct",
+        "// Test no = was present outside funObject = {}"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b8b367417b2b2512b52",
+      "title": "Enhanced Object Literals Computed Fields",
+      "description": [
+        "With ES6, you can also create a field name dynamically, like this:",
+        "<code>const prop = 'os'</code>",
+        "<code>const setup = {</code>",
+        "<code>   ['prop-' + prop] : 'darwin-64'</code>",
+        "<code>}</code>",
+        "If you inspect the object setup, you would see it's <code>{\"prop-os\": \"darwin-64\"}</code>",
+        "Instructions",
+        "Use object literal computed property to create an object like this",
+        "<code>{</code>",
+        "<code>  \"prop-1\": 1,</code>",
+        "<code>  \"prop-2\": 2,</code>",
+        "<code>  \"prop-3\": 3</code>",
+        "<code>}</code>"
+      ],
+      "challengeSeed": [
+        "/* Alter code below this line */",
+        "const funObject = {",
+        "}",
+        "/* Alter code above this line */",
+        "console.log(funObject);"
+      ],
+      "tests": [
+        "// Test the output is correct",
+        "// Test no = was present outside funObject = {}"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b8b367417b2b2512b53",
+      "title": "class Syntax",
+      "description": [
+        "ES6 provides a new syntax to help create objects, using the keyword class.",
+        "This is to be noted, that the class syntax is just a syntax, and not a full-fledged class based implementation of object oriented paradigm, unlike in languages like Java, or Python, or Ruby etc.",
+        "In ES5, we usually define a constructor function, and use the new keyword to instantiate an object.",
+        "<code> var spaceShuttle = function(targetPlanet){</code>",
+        "<code>     this.targetPlanet = targetPlanet; </code>",
+        "<code>}</code>",
+        "<code> var zeus = new spaceShuttle('Jupiter');</code>",
+        "The class syntax simply replaces the constructor function creation:",
+        "<code>class spaceShuttle {</code>",
+        "<code>  constructor(targetPlanet){</code>",
+        "<code>    this.targetPlanet = targetPlanet;</code>",
+        "<code>  }</code>",
+        "<code>}</code>",
+        "<code>const zeus = new spaceShuttle('Jupiter');</code>",
+        "Notice that the class keyword declares a new function, and a constructor was added, which would be invoked when new is called - to create a new object.",
+        "Instructions",
+        "Use class keyword and write a proper constructor to create the vegetable class.",
+        "The Vegetable lets you create a vegetable object, with a property name, to be passed to constructor."
+      ],
+      "challengeSeed": [
+        "/* Alter code below this line */",
+        "const Vegetable = undefined;",
+        "/* Alter code above this line */",
+        "const carrot = new Vegetable('carrot')",
+        "console.log(carrot.name); // => should be 'carrot'"
+      ],
+      "tests": [
+        "// Test the Vegetable is a class",
+        "// Test that class keyword was used",
+        "// Test that other objects could be created with the class"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b8c367417b2b2512b54",
+      "title": "class getters and setters",
+      "description": [
+        "You can obtain values from an object, and set a value of a property within an object.",
+        "These are classically called getters and setters.",
+        "Getter functions are meant to simply return (get) the value of an object's private variable to the user without the user directly accessing the private variable.",
+        "Setter functions are meant to modify (set) the value of an object's private variable based on the value passed into the setter function. This change could involve calculations, or even overwriting the previous value completely.",
+        "<code>class Book {</code>",
+        "<code>  constructor(author) {</code>",
+        "<code>    this._author = author;</code>",
+        "<code>  }</code>",
+        "<code>  // getter</code>",
+        "<code>  get writer(){</code>",
+        "<code>    return this._author;</code>",
+        "<code>  }</code>",
+        "<code>  // setter</code>",
+        "<code>  set writer(updatedAuthor){</code>",
+        "<code>    this._author = updatedAuthor;</code>",
+        "<code>  }</code>",
+        "<code>}</code>",
+        "<code>const lol = new Book('anonymous');</code>",
+        "<code>console.log(lol.writer);</code>",
+        "<code>lol.writer = 'wut';</code>",
+        "<code>console.log(lol.writer);</code>",
+        "Notice the syntax we are using to invoke the getter and setter - as if they are not even functions.",
+        "Getters and setters are important, because they hide internal implementation details.",
+        "Instructions",
+        "Use class keyword to create a Thermostat class. The constructor accepts Farenheit temperature.",
+        "Now create getter and setter in the class, to obtain the temperature in Celsius scale.",
+        "Remember that <code>F = C * 9.0 / 5 + 32</code>, where F is the value of temperature in Fahrenheit scale, and C is the value of the same temperature in Celsius scale",
+        "Note",
+        "When you implement this, you would be tracking the temperature inside the class in one scale - either Fahrenheit or Celsius.",
+        "This is the power of getter or setter - you are creating an API for another user, who would get the correct result, no matter which one you track.",
+        "In other words, you are abstracting implementation details from the consumer."
+      ],
+      "challengeSeed": [
+        "/* Alter code below this line */",
+        "const Thermostat = undefined;",
+        "/* Alter code above this line */",
+        "const thermos = new Thermostat(76); // setting in Farenheit scale",
+        "let temp = thermos.temperature; // 24.44 in C",
+        "thermos.temperature = 26;",
+        "temp = thermos.temperature; // 26 in C"
+      ],
+      "tests": [
+        "// Test the Thermostat is a class",
+        "// Test that class keyword was used",
+        "// Test that other objects could be created with the class"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b8c367417b2b2512b55",
+      "title": "Import vs. Require: What's the difference?",
+      "description": [
+        "In the past, the function require() would be used to import the functions and code in external files and modules. While handy, this presents a problem: some files and modules are rather large, and you may only need certain code from those external resources.",
+        "ES6 gives us a very handy tool known as import. With it, we can choose which parts of a module or file to load into a given file, saving time and memory.",
+        "Consider the following example. Imagine that math_array_functions has about 20 functions, but I only need one, countItems, in my current file. The old require() approach would force me to bring in all 20 functions. With this new import syntax, I can bring in just the desired function, like so:",
+        "<code>import { countItems } from \"math_array_functions\"</code>",
+        "A description of the above code:",
+        "<code>import { function } from \"file_path_goes_here\"</code>",
+        "//We can also import variables the same way! ",
+        "There are a few ways to write an import statement, but the above is a very common use-case. Note: the whitespace surrounding the function inside the curly braces is a best practice-it makes it easier to read the import statement.",
+        "Note: The lessons in this section handle non-browser features. Import, and the statements we introduce in the rest of these lessons, won't work on a browser directly, However, we can use various tools to create code out of this to make it work in browser.",
+        "Instructions",
+        "Add the appropriate import statement that will allow the current file to use the capitalizeString function. The file where this function lives is called \"string_functions,\" and it is in the same directory as the current file."
+      ],
+      "challengeSeed": [
+        "capitalizeString(\"hello!\");"
+      ],
+      "tests": [
+        "assert(code.match(/import\\s+\\{\\s?capitalizeString\\s?\\}\\s+from\\s+\"string_functions\"/ig)"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b8c367417b2b2512b56",
+      "title": "Export: One of Import's siblings.",
+      "description": [
+        "In the previous challenge, you learned about import and how it can be leveraged to import small amounts of code from large files. In order for this to work, though, we must utilize one of the statements that goes with import, known as export. When we want some code-a function, or a variable-to be usable in another file, we must export it in order to import it into another file. Like import, export is a non-browser feature.",
+        "The following is what we refer to as a named export. With this, we can import any code we export into another file with the import syntax you learned in the last lesson. Here's an example:",
+        "<code>const capitalizeString = (string) => {</code>",
+        "<code>  return string.charAt(0).toUpperCase() + string.slice(1);</code>",
+        "<code>} </code>",
+        "<code>export { capitalizeString } //How to export functions.</code>",
+        "<code>export const foo = \"bar\"; //How to export variables.</code>",
+        "Alternatively, if you would like to compact all your export statements into one line, you can take this approach:",
+        "<code>const capitalizeString = (string) => {</code>",
+        "<code>  return string.charAt(0).toUpperCase() + string.slice(1);</code>",
+        "<code>}</code>",
+        "<code>const foo = \"bar\";</code>",
+        "<code>export { capitalizeString, bar }</code>",
+        "Either approach is perfectly acceptable.",
+        "Instructions",
+        "Below are two variables that I want to make available for other files to use. Utilizing the first way I demonstrated export, export the two variables."
+      ],
+      "challengeSeed": [
+        "const foo = \"bar\";",
+        "const boo = \"far\";"
+      ],
+      "tests": [
+        "assert(code.match(/export\\s+const\\s+foo\\s+=+\\s\"bar\"/ig))",
+        "assert(code.match(/export\\s+const\\s+boo\\s+=+\\s\"far\"/ig))"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b8c367417b2b2512b57",
+      "title": "Import Everything",
+      "description": [
+        "Suppose you have a file that you wish to import all of its contents into the current file. This can be done with the import * syntax.",
+        "Here's an example where the contents of a file named \"math_functions\" are imported into a file in the same directory:",
+        "<code>import * as myMathModule from \"math_functions\"</code>",
+        "<code>myMathModule.add(2,3);</code>",
+        "<code>myMathModule.subtract(5,3);</code>",
+        "<code>And breaking down that code:</code>",
+        "<code>import * as object_with_name_of_your_choice from \"file_path_goes_here\"</code>",
+        "<code>object_with_name_of_your_choice.imported_function</code>",
+        "You may use any name following the import * as portion of the statement. In order to utilize this method, it requires an object that receives the imported values. From here, you will use the dot notation to call your imported values.",
+        "Instructions",
+        "The code below requires the contents of a file, \"capitalize_strings\", found in the same directory as it, imported. Add the appropriate import * statement to the top of the file, using the object provided."
+      ],
+      "challengeSeed": [
+        "myStringModule.capitalize(\"foo\");",
+        "myStringModule.lowercase(\"Foo\");"
+      ],
+      "tests": [
+        "assert(code.match(/import\\s+\\*\\s+as\\s+myStringModule\\s+from\\s+\"capitalize_strings\"/ig))"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b8c367417b2b2512b58",
+      "title": "Export Default",
+      "description": [
+        "In the export lesson, you learned about the syntax referred to as a named export. This allowed you to make multiple functions and variables available for use in other files.",
+        "There is another export syntax you need to know, known as export default. Usually you will use this syntax if only one value is being exported from a file. It is also used to create a fallback value for a file or module.",
+        "Here is a quick example of export default:",
+        "<code>export default const add = (x,y) => {</code>",
+        "<code>  return x + y;</code>",
+        "<code>}</code>",
+        "There is a one major feature of export default you must never forget-since it is used to declare a fallback value for a module or file, you can only have one value be a default export in each module or file.",
+        "Instructions",
+        "The following function should be the fallback value for the module. Please add the necessary code to do so."
+      ],
+      "challengeSeed": [
+        "const subtract = (x,y) => {return x - y;}"
+      ],
+      "tests": [
+        "assert(code.match(/export\\s+default\\s+const\\s+subtract\\s+=\\s+\\(x,y\\)\\s+=>\\s+{return\\s+x\\s-\\s+y;}/ig))"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d7b8d367417b2b2512b59",
+      "title": "Importing a Default Export",
+      "description": [
+        "In the last challenge, you learned about export default and its uses. It is important to note that, to import a default export, you need to use a different import syntax.",
+        "In the following example, we have a function, add, that is the default export of a file, \"math_functions\". Here is how to import it:",
+        "<code>import add from \"math_functions\";</code>",
+        "<code>add(5,4); //Will return 9</code>",
+        "The syntax differs in one key place-the imported value, add, is not surrounded by curly braces, {}. Unlike exported values, the primary method if importing a default export is to simply write the value's name after import.",
+        "Instructions",
+        "In the following code, please import the default export, subtract, from the file \"math_functions\", found in the same directory as this file."
+      ],
+      "challengeSeed": [
+        "subtract(7,4);"
+      ],
+      "tests": [
+        "assert(code.match(/import\\s+subtract\\s+from\\s+\"math_functions\"/ig))"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {}
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/02-javascript-algorithms-and-data-structures/functional-programming.json b/seed/challenges/02-javascript-algorithms-and-data-structures/functional-programming.json
new file mode 100644
index 00000000000000..f3832bccccaa5e
--- /dev/null
+++ b/seed/challenges/02-javascript-algorithms-and-data-structures/functional-programming.json
@@ -0,0 +1,1679 @@
+{
+  "name": "Functional Programming",
+  "order": 7,
+  "time": "5 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "587d7b8d367417b2b2512b5a",
+        "title": "Introduction to the Functional Programming Challenges",
+        "description": [
+          [
+            "http://imgs.xkcd.com/comics/functional.png",
+            "XKCD web comic with one person asking why the other likes functional programming so much, and the second responding that tail recursion is its own reward.",
+            "Functional programming is an approach to software development based around the evaluation of functions. Like mathematics, functions in programming map input to output to produce a result. You can combine basic functions in many ways to build more and more complex programs.<br><br>Functional programming follows a few core principles:<br><br><ul><li>Functions are independent from the state of the program or global variables. They only depend on the arguments passed into them to make a calculation</li><br><li>Functions try to limit any changes to the state of the program and avoid changes to the global objects holding data</li><br><li>Functions have minimal side effects in the program</li></ul><br><br>The functional programming software development approach breaks a program into small, testable parts. This section covers basic functional programming principles in JavaScript.",
+            ""
+          ]        ],
+        "releasedOn": "",
+        "challengeSeed": [],
+        "tests": [],
+        "type": "Waypoint",
+        "challengeType": 7,
+        "isRequired": false,
+        "titleEs": "",
+        "descriptionEs": [
+          []
+        ],
+        "titleFr": "",
+        "descriptionFr": [
+          []
+        ],
+        "titleDe": "",
+        "descriptionDe": [
+          []
+        ]
+    },
+    {
+      "id": "587d7b8d367417b2b2512b5b",
+      "title": "Learn About Functional Programming",
+      "description": [
+        "Functional programming is a style of programming where solutions are simple, isolated functions, without any side effects outside of the function scope.",
+        "<code>INPUT -> PROCESS -> OUTPUT</code>",
+        "Functional programming is about:",
+        "1) Isolated functions - there is no dependence on the state of the program, which includes global variables that are subject to change",
+        "2) Pure functions - the same input always gives the same output",
+        "3) Functions with limited side effects - any changes, or mutations, to the state of the program outside the function are carefully controlled",
+        "<h4>Instructions</h4>",
+        "The members of Free Code Camp happen to love tea.",
+        "In the code editor, the <code>prepareTea</code> and <code>getTea</code> functions are already defined for you. Call the <code>getTea</code> function to get 40 cups of tea for the team, and store them in the <code>tea4TeamFCC</code> variable."
+      ],
+      "challengeSeed": [
+        "/**",
+        " * A long process to prepare tea.",
+        " * @return {string} A cup of tea.",
+        " **/",
+        "const prepareTea = () => 'greenTea';",
+        "",
+        "/**",
+        " * Get given number of cups of tea.",
+        " * @param {number} numOfCups Number of required cups of tea.",
+        " * @return {Array<string>} Given amount of tea cups.",
+        " **/",
+        "const getTea = (numOfCups) => {",
+        "  const teaCups = [];",
+        "  ",
+        "  for(let cups = 1; cups <= numOfCups; cups += 1) {",
+        "    const teaCup = prepareTea();",
+        "    teaCups.push(teaCup);",
+        "  }",
+        "",
+        "  return teaCups;",
+        "};",
+        "",
+        "// Add your code below this line",
+        "",
+        "const tea4TeamFCC = null; // :(",
+        "",
+        "// Add your code above this line",
+        "",
+        "console.log(tea4TeamFCC);"
+      ],
+      "tests": [
+        "assert(tea4TeamFCC.length === 40, 'message: The <code>tea4TeamFCC</code> variable should hold 40 cups of tea for the team.');",
+        "assert(tea4TeamFCC[0] === 'greenTea', 'message: The <code>tea4TeamFCC</code> variable should hold cups of green tea.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b8e367417b2b2512b5c",
+      "title": "Understand Functional Programming Terminology",
+      "description": [
+        "The FCC Team had a mood swing and now wants two types of tea: green tea and black tea. General Fact: Client mood swings are pretty common.",
+        "With that information, we'll need to revisit the <code>getTea</code> function from last challenge to handle various tea requests. We can modify <code>getTea</code> to accept a function as a parameter to be able to change the type of tea it prepares. This makes <code>getTea</code> more flexible, and gives the programmer more control when client requests change.",
+        "But first, let's cover some functional terminology:",
+        "<code>Callbacks</code> are the functions that are slipped or passed into another function to decide the invocation of that function. You may have seen them passed to other methods, for example in <code>filter</code>, the callback function tells JavaScript the criteria for how to filter an array.",
+        "Functions that can be assigned to a variable, passed into another function, or returned from another function just like any other normal value, are called <code>first class</code> functions. In JavaScript, all functions are <code>first class</code> functions.",
+        "The functions that take a function as an argument, or return a function as a return value are called <code>higher order</code> functions.",
+        "When the functions are passed in to another function or returned from another function, then those functions which gets passed in or returned can be called a <code>lambda</code>.",
+        "<h4>Instructions</h4>",
+        "Prepare 27 cups of green tea and 13 cups of black tea and store them in <code>tea4GreenTeamFCC</code> and <code>tea4BlackTeamFCC</code> variables, respectively. Note that the <code>getTea</code> function has been modified so it now takes a function as the first argument.",
+        "Note: The data (the number of cups of tea) is supplied as the last argument. We'll discuss this more in later lessons."
+      ],
+      "challengeSeed": [
+        "/**",
+        " * A long process to prepare green tea.",
+        " * @return {string} A cup of green tea.",
+        " **/",
+        "const prepareGreenTea = () => 'greenTea';",
+        "",
+        "/**",
+        " * A long process to prepare black tea.",
+        " * @return {string} A cup of black tea.",
+        " **/",
+        "const prepareBlackTea = () => 'blackTea';",
+        "",
+        "/**",
+        " * Get given number of cups of tea.",
+        " * @param {function():string} prepareTea The type of tea preparing function.",
+        " * @param {number} numOfCups Number of required cups of tea.",
+        " * @return {Array<string>} Given amount of tea cups.",
+        " **/",
+        "const getTea = (prepareTea, numOfCups) => {",
+        "  const teaCups = [];",
+        "",
+        "  for(let cups = 1; cups <= numOfCups; cups += 1) {",
+        "    const teaCup = prepareTea();",
+        "    teaCups.push(teaCup);",
+        "  }",
+        "",
+        "  return teaCups;",
+        "};",
+        "",
+        "// Add your code below this line",
+        "",
+        "const tea4GreenTeamFCC = null; // :(",
+        "const tea4BlackTeamFCC = null; // :(",
+        "",
+        "// Add your code above this line",
+        "",
+        "console.log(",
+        "  tea4GreenTeamFCC,",
+        "  tea4BlackTeamFCC",
+        ");"
+      ],
+      "tests": [
+        "assert(tea4GreenTeamFCC.length === 27, 'message: The <code>tea4GreenTeamFCC</code> variable should hold 27 cups of green tea for the team.');",
+        "assert(tea4GreenTeamFCC[0] === 'greenTea', 'message: The <code>tea4GreenTeamFCC</code> variable should hold cups of green tea.');",
+        "assert(tea4BlackTeamFCC.length === 13, 'message: The <code>tea4BlackTeamFCC</code> variable should hold 13 cups of black tea.');",
+        "assert(tea4BlackTeamFCC[0] === 'blackTea', 'message: The <code>tea4BlackTeamFCC</code> variable should hold cups of black tea.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b8e367417b2b2512b5d",
+      "title": "Understand the Hazards of Using Imperative Code",
+      "description": [
+        "Functional programming is a good habit. It keeps your code easy to manage, and saves you from sneaky bugs. But before we get there, let's look at an imperative approach to programming to highlight where you may have issues.",
+        "In English (and many other languages), the imperative tense is used to give commands. Similarly, an imperative style in programming is one that gives the computer a set of statements to perform a task.",
+        "Often the statements change the state of the program, like updating global variables. A classic example is writing a <code>for</code> loop that gives exact directions to iterate over the indices of an array.",
+        "In contrast, functional programming is a form of declarative programming. You tell the computer what you want done by calling a method or function.",
+        "JavaScript offers many predefined methods that handle common tasks so you don't need to write out how the computer should perform them. For example, instead of using the <code>for</code> loop mentioned above, you could call the <code>map</code> method which handles the details of iterating over an array. This helps to avoid semantic errors, like the \"Off By One Errors\" that were covered in the Debugging section.",
+        "Consider the scenario: you are browsing the web in your browser, and want to track the tabs you have opened. Let's try to model this using some simple object-oriented code.",
+        "A Window object is made up of tabs, and you usually have more than one Window open. The titles of each open site in each Window object is held in an array. After working in the browser (opening new tabs, merging windows, and closing tabs), you want to print the tabs that are still open. Closed tabs are removed from the array and new tabs (for simplicity) get added to the end of it.",
+        "The code editor shows an implementation of this functionality with functions for <code>tabOpen()</code>, <code>tabClose()</code>, and <code>join()</code>. The array <code>tabs</code> is part of the Window object that stores the name of the open pages.",
+        "<h4>Instructions<h4>",
+        "Run the code in the editor. It's using a method that has side effects in the program, causing incorrect output. The final list of open tabs should be <code>['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium', 'Netflix', 'YouTube', 'Vine', 'GMail', 'Work mail', 'Docs', 'FreeCodeCamp', 'new tab']</code> but the output will be slightly different.",
+        "Work through the code and see if you can figure out the problem, then advance to the next challenge to learn more."
+      ],
+      "challengeSeed": [
+        "// tabs is an array of titles of each site open within the window",
+        "var Window = function(tabs) {",
+        "  this.tabs = tabs; // we keep a record of the array inside the object",
+        "};",
+        "",
+        "// When you join two windows into one window",
+        "Window.prototype.join = function (otherWindow) {",
+        "  this.tabs = this.tabs.concat(otherWindow.tabs);",
+        "  return this;",
+        "};",
+        "",
+        "// When you open a new tab at the end",
+        "Window.prototype.tabOpen = function (tab) {",
+        "  this.tabs.push('new tab'); // let's open a new tab for now",
+        "  return this;",
+        "};",
+        "",
+        "// When you close a tab",
+        "Window.prototype.tabClose = function (index) {",
+        "  var tabsBeforeIndex = this.tabs.splice(0, index); // get the tabs before the tab",
+        "  var tabsAfterIndex = this.tabs.splice(index); // get the tabs after the tab",
+        "",
+        "  this.tabs = tabsBeforeIndex.concat(tabsAfterIndex); // join them together ",
+        "  return this;",
+        " };",
+        "",
+        "// Let's create three browser windows",
+        "var workWindow = new Window(['GMail', 'Inbox', 'Work mail', 'Docs', 'FreeCodeCamp']); // Your mailbox, drive, and other work sites",
+        "var socialWindow = new Window(['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium']); // Social sites",
+        "var videoWindow = new Window(['Netflix', 'YouTube', 'Vimeo', 'Vine']); //  Entertainment sites",
+        "",
+        "// Now perform the tab opening, closing, and other operations",
+        "var finalTabs = socialWindow",
+        "                    .tabOpen() // Open a new tab for cat memes",
+        "                    .join(videoWindow.tabClose(2)) // Close third tab in video window, and join",
+        "                    .join(workWindow.tabClose(1).tabOpen());",
+        "",
+        "alert(finalTabs.tabs);"
+      ],
+      "tests": [
+        "assert(true, 'message: Move ahead to understand the error.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b8e367417b2b2512b5e",
+      "title": "Avoid Mutations and Side Effects Using Functional Programming",
+      "description": [
+        "If you haven't already figured it out, the issue in the previous challenge was with the <code>splice</code> call in the <code>tabClose()</code> function. Unfortunately, <code>splice</code> changes the original array it is called on, so the second call to it used a modified array, and gave unexpected results.",
+        "This is a small example of a much larger pattern - you call a function on a variable, array, or an object, and the function changes the variable or something in the object.",
+        "One of the core principle of functional programming is to not change things. Changes lead to bugs. It's easier to prevent bugs knowing that your functions don't change anything, including the function arguments or any global variable.",
+        "The previous example didn't have any complicated operations but the <code>splice</code> method changed the original array, and resulted in a bug.",
+        "Recall that in functional programming, changing or altering things is called <code>mutation</code>, and the outcome is called a <code>side effect</code>. A function, ideally, should be a <code>pure function</code>, meaning that it does not cause any side effects.",
+        "Let's try to master this discipline and not alter any variable or object in our code.",
+        "<h4>Instructions</h4>",
+        "Fill in the code for the function <code>incrementer</code> so it returns the value of the global variable <code>fixedValue</code> increased by one."
+      ],
+      "challengeSeed": [
+        "// the global variable",
+        "var fixedValue = 4;",
+        "",
+        "function incrementer () {",
+        "  // Add your code below this line",
+        "  ",
+        "  ",
+        "  // Add your code above this line",
+        "}",
+        "",
+        "var newValue = incrementer(); // Should equal 5",
+        "console.log(fixedValue); // Should print 4"
+      ],
+      "tests": [
+        "assert(fixedValue === 4, 'message: Your function <code>incrementer</code> should not change the value of <code>fixedValue</code>.');",
+        "assert(newValue === 5, 'message: Your <code>incrementer</code> function should return a value that is one larger than the <code>fixedValue</code> value.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b8e367417b2b2512b5f",
+      "title": "Pass Arguments to Avoid External Dependence in a Function",
+      "description": [
+        "The last challenge was a step closer to functional programming principles, but there is still something missing.",
+        "We didn't alter the global variable value, but the function <code>incrementer</code> would not work without the global variable <code>fixedValue</code> being there.",
+        "Another principle of functional programming is to always declare your dependencies explicitly. This means if a function depends on a variable or object being present, then pass that variable or object directly into the function as an argument.",
+        "There are several good consequences from this principle. The function is easier to test, you know exactly what input it takes, and it won't depend on anything else in your program.",
+        "This can give you more confidence when you alter, remove, or add new code. You would know what you can or cannot change and you can see where the potential traps are.",
+        "Finally, the function would always produce the same output for the same set of inputs, no matter what part of the code executes it.",
+        "<h4>Instructions</h4>",
+        "Let's update the <code>incrementer</code> function to clearly declare its dependencies.",
+        "Write the <code>incrementer</code> function so it takes an argument, and then increases the value by one."
+      ],
+      "challengeSeed": [
+        "// the global variable",
+        "var fixedValue = 4;",
+        "",
+        "// Add your code below this line",
+        "function incrementer () {",
+        "  ",
+        "  ",
+        "  // Add your code above this line",
+        "}",
+        "",
+        "var newValue = incrementer(fixedValue); // Should equal 5",
+        "console.log(fixedValue); // Should print 4"
+      ],
+      "tests": [
+          "assert(fixedValue === 4, 'message: Your function <code>incrementer</code> should not change the value of <code>fixedValue</code>.');",
+          "assert(code.match(/function\\s+?incrementer\\(.+?\\)/g), 'message: Your <code>incrementer</code> function should take a parameter.');",
+          "assert(newValue === 5, 'message: Your <code>incrementer</code> function should return a value that is one larger than the <code>fixedValue</code> value.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b8f367417b2b2512b60",
+      "title": "Refactor Global Variables Out of Functions",
+      "description": [
+        "So far, we have seen two distinct principles for functional programming:",
+        "1) Don't alter a variable or object - create new variables and objects and return them if need be from a function.",
+        "2) Declare function arguments - any computation inside a function depends only on the arguments, and not on any global object or variable.",
+        "Adding one to a number is not very exciting, but we can apply these principles when working with arrays or more complex objects.",
+        "<h4>Instructions</h4>",
+        "Refactor (rewrite) the code so the global array <code>bookList</code> is not changed inside either function. The <code>add</code> function should add the given <code>bookName</code> to the end of an array. The <code>remove</code> function should remove the given <code>bookName</code> from an array. Both functions should return an array, and any new parameters should be added before the <code>bookName</code> one."
+      ],
+      "challengeSeed": [
+        "// the global variable",
+        "var bookList = [\"The Hound of the Baskervilles\", \"On The Electrodynamics of Moving Bodies\", \"Philosophiæ Naturalis Principia Mathematica\", \"Disquisitiones Arithmeticae\"];",
+        "",
+        "/* This function should add a book to the list and return the list */",
+        "// New parameters should come before the bookName one",
+        "",
+        "// Add your code below this line",
+        "function add (bookName) {",
+        "  ",
+        "  return bookList.push(bookName);",
+        "  ",
+        "  // Add your code above this line",
+        "}",
+        "",
+        "/* This function should remove a book from the list and return the list */",
+        "// New parameters should come before the bookName one",
+        "",
+        "// Add your code below this line",
+        "function remove (bookName) {",
+        "  if (bookList.indexOf(bookName) >= 0) {",
+        "    ",
+        "    return bookList.splice(0, 1, bookName);",
+        "    ",
+        "    // Add your code above this line",
+        "    }",
+        "}",
+        "",
+        "var newBookList = add(bookList, 'A Brief History of Time');",
+        "var newerBookList = remove(bookList, 'On The Electrodynamics of Moving Bodies');",
+        "var newestBookList = remove(add(bookList, 'A Brief History of Time'), 'On The Electrodynamics of Moving Bodies');",
+        "",
+        "console.log(bookList);"
+      ],
+      "tests": [
+        "assert(JSON.stringify(bookList) === JSON.stringify([\"The Hound of the Baskervilles\", \"On The Electrodynamics of Moving Bodies\", \"Philosophiæ Naturalis Principia Mathematica\", \"Disquisitiones Arithmeticae\"]), 'message: <code>bookList</code> should not change and still equal <code>[\"The Hound of the Baskervilles\", \"On The Electrodynamics of Moving Bodies\", \"Philosophiæ Naturalis Principia Mathematica\", \"Disquisitiones Arithmeticae\"]</code>.');",
+        "assert(JSON.stringify(newBookList) === JSON.stringify(['The Hound of the Baskervilles', 'On The Electrodynamics of Moving Bodies', 'Philosophiæ Naturalis Principia Mathematica', 'Disquisitiones Arithmeticae', 'A Brief History of Time']), 'message: <code>newBookList</code> should equal <code>[\"The Hound of the Baskervilles\", \"On The Electrodynamics of Moving Bodies\", \"Philosophiæ Naturalis Principia Mathematica\", \"Disquisitiones Arithmeticae\", \"A Brief History of Time\"]</code>.');",
+        "assert(JSON.stringify(newerBookList) === JSON.stringify(['The Hound of the Baskervilles', 'Philosophiæ Naturalis Principia Mathematica', 'Disquisitiones Arithmeticae']), 'message: <code>newerBookList</code> should equal <code>[\"The Hound of the Baskervilles\", \"Philosophiæ Naturalis Principia Mathematica\", \"Disquisitiones Arithmeticae\"]</code>.');",
+        "assert(JSON.stringify(newestBookList) === JSON.stringify(['The Hound of the Baskervilles', 'Philosophiæ Naturalis Principia Mathematica', 'Disquisitiones Arithmeticae', 'A Brief History of Time']), 'message: <code>newestBookList</code> should equal <code>[\"The Hound of the Baskervilles\", \"Philosophiæ Naturalis Principia Mathematica\", \"Disquisitiones Arithmeticae\", \"A Brief History of Time\"]</code>.');"
+      ],
+      "solutions": [],
+      "hints": [
+          "Look at how the functions are called to see the correct order of the parameters.",
+          "Consider using the concat method instead of push.",
+          "The slice method returns a new array without modifying the original."
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b8f367417b2b2512b61",
+      "title": "Use Map to Extract Data from an Array",
+      "description": [
+        "So far we have learned to use pure functions to avoid side effects in a program. Also, we have seen the value in having a function only depend on its input arguments.",
+        "This is only the beginning. As its name suggests, functional programming is centered around a theory of functions.",
+        "It would make sense to be able to pass them as arguments to other functions, and return a function from another function. Functions are considered <code>First Class Objects</code> in JavaScript, which means they can be used like any other object. They can be saved in variables, stored in an object, or passed as function arguments.",
+        "Let's start with some simple array functions, which are methods on the array object prototype. In this exercise we are looking at <code>Array.prototype.map()</code>, or more simply <code>map</code>.",
+        "Remember that the <code>map</code> method is a way to iterate over each item in an array. It creates a new array (without changing the original one) after applying a callback function to every element.",
+        "<h4>Instructions</h4>",
+        "The <code>watchList</code> array holds objects with information on several movies. Use <code>map</code> to pull the title and rating from <code>watchList</code> and save the new array in the <code>rating</code> variable. The code in the editor currently uses a <code>for</code> loop to do this, replace the loop functionality with your <code>map</code> expression."
+      ],
+      "challengeSeed": [
+        "// the global variable",
+        "var watchList = [",
+        "                 {  ",
+        "                   \"Title\": \"Inception\",",
+        "                   \"Year\": \"2010\",",
+        "                   \"Rated\": \"PG-13\",",
+        "                   \"Released\": \"16 Jul 2010\",",
+        "                   \"Runtime\": \"148 min\",",
+        "                   \"Genre\": \"Action, Adventure, Crime\",",
+        "                   \"Director\": \"Christopher Nolan\",",
+        "                   \"Writer\": \"Christopher Nolan\",",
+        "                   \"Actors\": \"Leonardo DiCaprio, Joseph Gordon-Levitt, Ellen Page, Tom Hardy\",",
+        "                   \"Plot\": \"A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.\",",
+        "                   \"Language\": \"English, Japanese, French\",",
+        "                   \"Country\": \"USA, UK\",",
+        "                   \"Awards\": \"Won 4 Oscars. Another 143 wins & 198 nominations.\",",
+        "                   \"Poster\": \"http://ia.media-imdb.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX300.jpg\",",
+        "                   \"Metascore\": \"74\",",
+        "                   \"imdbRating\": \"8.8\",",
+        "                   \"imdbVotes\": \"1,446,708\",",
+        "                   \"imdbID\": \"tt1375666\",",
+        "                   \"Type\": \"movie\",",
+        "                   \"Response\": \"True\"",
+        "                },",
+        "                {  ",
+        "                   \"Title\": \"Interstellar\",",
+        "                   \"Year\": \"2014\",",
+        "                   \"Rated\": \"PG-13\",",
+        "                   \"Released\": \"07 Nov 2014\",",
+        "                   \"Runtime\": \"169 min\",",
+        "                   \"Genre\": \"Adventure, Drama, Sci-Fi\",",
+        "                   \"Director\": \"Christopher Nolan\",",
+        "                   \"Writer\": \"Jonathan Nolan, Christopher Nolan\",",
+        "                   \"Actors\": \"Ellen Burstyn, Matthew McConaughey, Mackenzie Foy, John Lithgow\",",
+        "                   \"Plot\": \"A team of explorers travel through a wormhole in space in an attempt to ensure humanity's survival.\",",
+        "                   \"Language\": \"English\",",
+        "                   \"Country\": \"USA, UK\",",
+        "                   \"Awards\": \"Won 1 Oscar. Another 39 wins & 132 nominations.\",",
+        "                   \"Poster\": \"http://ia.media-imdb.com/images/M/MV5BMjIxNTU4MzY4MF5BMl5BanBnXkFtZTgwMzM4ODI3MjE@._V1_SX300.jpg\",",
+        "                   \"Metascore\": \"74\",",
+        "                   \"imdbRating\": \"8.6\",",
+        "                   \"imdbVotes\": \"910,366\",",
+        "                   \"imdbID\": \"tt0816692\",",
+        "                   \"Type\": \"movie\",",
+        "                   \"Response\": \"True\"",
+        "                },",
+        "                {",
+        "                   \"Title\": \"The Dark Knight\",",
+        "                   \"Year\": \"2008\",",
+        "                   \"Rated\": \"PG-13\",",
+        "                   \"Released\": \"18 Jul 2008\",",
+        "                   \"Runtime\": \"152 min\",",
+        "                   \"Genre\": \"Action, Adventure, Crime\",",
+        "                   \"Director\": \"Christopher Nolan\",",
+        "                   \"Writer\": \"Jonathan Nolan (screenplay), Christopher Nolan (screenplay), Christopher Nolan (story), David S. Goyer (story), Bob Kane (characters)\",",
+        "                   \"Actors\": \"Christian Bale, Heath Ledger, Aaron Eckhart, Michael Caine\",",
+        "                   \"Plot\": \"When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.\",",
+        "                   \"Language\": \"English, Mandarin\",",
+        "                   \"Country\": \"USA, UK\",",
+        "                   \"Awards\": \"Won 2 Oscars. Another 146 wins & 142 nominations.\",",
+        "                   \"Poster\": \"http://ia.media-imdb.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_SX300.jpg\",",
+        "                   \"Metascore\": \"82\",",
+        "                   \"imdbRating\": \"9.0\",",
+        "                   \"imdbVotes\": \"1,652,832\",",
+        "                   \"imdbID\": \"tt0468569\",",
+        "                   \"Type\": \"movie\",",
+        "                   \"Response\": \"True\"",
+        "                },",
+        "                {  ",
+        "                   \"Title\": \"Batman Begins\",",
+        "                   \"Year\": \"2005\",",
+        "                   \"Rated\": \"PG-13\",",
+        "                   \"Released\": \"15 Jun 2005\",",
+        "                   \"Runtime\": \"140 min\",",
+        "                   \"Genre\": \"Action, Adventure\",",
+        "                   \"Director\": \"Christopher Nolan\",",
+        "                   \"Writer\": \"Bob Kane (characters), David S. Goyer (story), Christopher Nolan (screenplay), David S. Goyer (screenplay)\",",
+        "                   \"Actors\": \"Christian Bale, Michael Caine, Liam Neeson, Katie Holmes\",",
+        "                   \"Plot\": \"After training with his mentor, Batman begins his fight to free crime-ridden Gotham City from the corruption that Scarecrow and the League of Shadows have cast upon it.\",",
+        "                   \"Language\": \"English, Urdu, Mandarin\",",
+        "                   \"Country\": \"USA, UK\",",
+        "                   \"Awards\": \"Nominated for 1 Oscar. Another 15 wins & 66 nominations.\",",
+        "                   \"Poster\": \"http://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3._V1_SX300.jpg\",",
+        "                   \"Metascore\": \"70\",",
+        "                   \"imdbRating\": \"8.3\",",
+        "                   \"imdbVotes\": \"972,584\",",
+        "                   \"imdbID\": \"tt0372784\",",
+        "                   \"Type\": \"movie\",",
+        "                   \"Response\": \"True\"",
+        "                },",
+        "                {",
+        "                   \"Title\": \"Avatar\",",
+        "                   \"Year\": \"2009\",",
+        "                   \"Rated\": \"PG-13\",",
+        "                   \"Released\": \"18 Dec 2009\",",
+        "                   \"Runtime\": \"162 min\",",
+        "                   \"Genre\": \"Action, Adventure, Fantasy\",",
+        "                   \"Director\": \"James Cameron\",",
+        "                   \"Writer\": \"James Cameron\",",
+        "                   \"Actors\": \"Sam Worthington, Zoe Saldana, Sigourney Weaver, Stephen Lang\",",
+        "                   \"Plot\": \"A paraplegic marine dispatched to the moon Pandora on a unique mission becomes torn between following his orders and protecting the world he feels is his home.\",",
+        "                   \"Language\": \"English, Spanish\",",
+        "                   \"Country\": \"USA, UK\",",
+        "                   \"Awards\": \"Won 3 Oscars. Another 80 wins & 121 nominations.\",",
+        "                   \"Poster\": \"http://ia.media-imdb.com/images/M/MV5BMTYwOTEwNjAzMl5BMl5BanBnXkFtZTcwODc5MTUwMw@@._V1_SX300.jpg\",",
+        "                   \"Metascore\": \"83\",",
+        "                   \"imdbRating\": \"7.9\",",
+        "                   \"imdbVotes\": \"876,575\",",
+        "                   \"imdbID\": \"tt0499549\",",
+        "                   \"Type\": \"movie\",",
+        "                   \"Response\": \"True\"",
+        "                }",
+        "];",
+        "",
+        "// Add your code below this line",
+        "",
+        "var rating = [];",
+        "for(var i=0; i < watchList.length; i++){",
+        "  rating.push({title: watchList[i][\"Title\"],  rating: watchList[i][\"imdbRating\"]});",
+        "}",
+        "",
+        "// Add your code above this line",
+        "",
+        "console.log(rating); "
+      ],
+      "tests": [
+        "assert(watchList[0].Title === \"Inception\" && watchList[4].Director == \"James Cameron\", 'message: The <code>watchList</code> variable should not change.');",
+        "assert(!code.match(/for\\s*?\\(.+?\\)/g), 'message: Your code should not use a <code>for</code> loop.');",
+        "assert(code.match(/\\.map/g), 'message: Your code should use the <code>map</code> method.');",
+        "assert(JSON.stringify(rating) === JSON.stringify([{\"title\":\"Inception\",\"rating\":\"8.8\"},{\"title\":\"Interstellar\",\"rating\":\"8.6\"},{\"title\":\"The Dark Knight\",\"rating\":\"9.0\"},{\"title\":\"Batman Begins\",\"rating\":\"8.3\"},{\"title\":\"Avatar\",\"rating\":\"7.9\"}]), 'message: <code>rating</code> should equal <code>[{\"title\":\"Inception\",\"rating\":\"8.8\"},{\"title\":\"Interstellar\",\"rating\":\"8.6\"},{\"title\":\"The Dark Knight\",\"rating\":\"9.0\"},{\"title\":\"Batman Begins\",\"rating\":\"8.3\"},{\"title\":\"Avatar\",\"rating\":\"7.9\"}]</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b8f367417b2b2512b62",
+      "title": "Implement Map on a Prototype",
+      "description": [
+        "As you have seen from applying <code>Array.prototype.map()</code>, or simply <code>map()</code> earlier, the <code>map</code> method returns an array of the same length as the one it was called on. It also doesn't alter the original array, as long as its callback function doesn't.",
+        "In other words, <code>map</code> is a pure function, and its output depends solely on its inputs. Plus, it takes another function as its argument.",
+        "It would teach us a lot about <code>map</code> to try to implement a version of it that behaves exactly like the <code>Array.prototype.map()</code> with a <code>for</code> loop or <code>Array.prototype.forEach()</code>.",
+        "Note: A pure function is allowed to alter local variables defined within its scope, although, it's preferable to avoid that as well.",
+        "<h4>Instructions</h4>",
+        "Write your own <code>Array.prototype.myMap()</code>, which should behave exactly like <code>Array.prototype.map()</code>. You may use a <code>for</code> loop or the <code>forEach</code> method."
+      ],
+      "challengeSeed": [
+        "// the global Array",
+        "var s = [23, 65, 98, 5];",
+        "",
+        "Array.prototype.myMap = function(callback){",
+        "  var newArray = [];",
+        "  // Add your code below this line",
+        "  ",
+        "  // Add your code above this line",
+        "  return newArray;",
+        "",
+        "};",
+        "",
+        "var new_s = s.myMap(function(item){",
+        "  return item * 2;",
+        "});"
+      ],
+      "tests": [
+        "assert(JSON.stringify(new_s) === JSON.stringify([46, 130, 196, 10]), 'message: <code>new_s</code> should equal <code>[46, 130, 196, 10]</code>.');",
+        "assert(!code.match(/\\.map/g), 'message: Your code should not use the <code>map</code> method.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b8f367417b2b2512b63",
+      "title": "Use Filter to Extract Data from an Array",
+      "description": [
+        "Another useful array function is <code>Array.prototype.filter()</code>, or simply <code>filter()</code>. The <code>filter</code> method returns a new array which is at most as long as the original array, but usually has fewer items.",
+        "<code>Filter</code> doesn't alter the original array, just like <code>map</code>. It takes a callback function that applies the logic inside the callback on each element of the array. If an element returns true based on the criteria in the callback function, then it is included in the new array.",
+        "<h4>Instructions</h4>",
+        "The variable <code>watchList</code> holds an array of objects with information on several movies. Use a combination of <code>filter</code> and <code>map</code> to return a new array of objects with only <code>title</code> and <code>rating</code> keys, but where <code>imdbRating</code> is greater than or equal to 8.0. Note that the rating values are saved as strings in the object and you may want to convert them into numbers to perform mathematical operations on them."
+      ],
+      "challengeSeed": [
+        "// the global variable",
+        "var watchList = [",
+        "                 {  ",
+        "                   \"Title\": \"Inception\",",
+        "                   \"Year\": \"2010\",",
+        "                   \"Rated\": \"PG-13\",",
+        "                   \"Released\": \"16 Jul 2010\",",
+        "                   \"Runtime\": \"148 min\",",
+        "                   \"Genre\": \"Action, Adventure, Crime\",",
+        "                   \"Director\": \"Christopher Nolan\",",
+        "                   \"Writer\": \"Christopher Nolan\",",
+        "                   \"Actors\": \"Leonardo DiCaprio, Joseph Gordon-Levitt, Ellen Page, Tom Hardy\",",
+        "                   \"Plot\": \"A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.\",",
+        "                   \"Language\": \"English, Japanese, French\",",
+        "                   \"Country\": \"USA, UK\",",
+        "                   \"Awards\": \"Won 4 Oscars. Another 143 wins & 198 nominations.\",",
+        "                   \"Poster\": \"http://ia.media-imdb.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX300.jpg\",",
+        "                   \"Metascore\": \"74\",",
+        "                   \"imdbRating\": \"8.8\",",
+        "                   \"imdbVotes\": \"1,446,708\",",
+        "                   \"imdbID\": \"tt1375666\",",
+        "                   \"Type\": \"movie\",",
+        "                   \"Response\": \"True\"",
+        "                },",
+        "                {  ",
+        "                   \"Title\": \"Interstellar\",",
+        "                   \"Year\": \"2014\",",
+        "                   \"Rated\": \"PG-13\",",
+        "                   \"Released\": \"07 Nov 2014\",",
+        "                   \"Runtime\": \"169 min\",",
+        "                   \"Genre\": \"Adventure, Drama, Sci-Fi\",",
+        "                   \"Director\": \"Christopher Nolan\",",
+        "                   \"Writer\": \"Jonathan Nolan, Christopher Nolan\",",
+        "                   \"Actors\": \"Ellen Burstyn, Matthew McConaughey, Mackenzie Foy, John Lithgow\",",
+        "                   \"Plot\": \"A team of explorers travel through a wormhole in space in an attempt to ensure humanity's survival.\",",
+        "                   \"Language\": \"English\",",
+        "                   \"Country\": \"USA, UK\",",
+        "                   \"Awards\": \"Won 1 Oscar. Another 39 wins & 132 nominations.\",",
+        "                   \"Poster\": \"http://ia.media-imdb.com/images/M/MV5BMjIxNTU4MzY4MF5BMl5BanBnXkFtZTgwMzM4ODI3MjE@._V1_SX300.jpg\",",
+        "                   \"Metascore\": \"74\",",
+        "                   \"imdbRating\": \"8.6\",",
+        "                   \"imdbVotes\": \"910,366\",",
+        "                   \"imdbID\": \"tt0816692\",",
+        "                   \"Type\": \"movie\",",
+        "                   \"Response\": \"True\"",
+        "                },",
+        "                {",
+        "                   \"Title\": \"The Dark Knight\",",
+        "                   \"Year\": \"2008\",",
+        "                   \"Rated\": \"PG-13\",",
+        "                   \"Released\": \"18 Jul 2008\",",
+        "                   \"Runtime\": \"152 min\",",
+        "                   \"Genre\": \"Action, Adventure, Crime\",",
+        "                   \"Director\": \"Christopher Nolan\",",
+        "                   \"Writer\": \"Jonathan Nolan (screenplay), Christopher Nolan (screenplay), Christopher Nolan (story), David S. Goyer (story), Bob Kane (characters)\",",
+        "                   \"Actors\": \"Christian Bale, Heath Ledger, Aaron Eckhart, Michael Caine\",",
+        "                   \"Plot\": \"When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.\",",
+        "                   \"Language\": \"English, Mandarin\",",
+        "                   \"Country\": \"USA, UK\",",
+        "                   \"Awards\": \"Won 2 Oscars. Another 146 wins & 142 nominations.\",",
+        "                   \"Poster\": \"http://ia.media-imdb.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_SX300.jpg\",",
+        "                   \"Metascore\": \"82\",",
+        "                   \"imdbRating\": \"9.0\",",
+        "                   \"imdbVotes\": \"1,652,832\",",
+        "                   \"imdbID\": \"tt0468569\",",
+        "                   \"Type\": \"movie\",",
+        "                   \"Response\": \"True\"",
+        "                },",
+        "                {  ",
+        "                   \"Title\": \"Batman Begins\",",
+        "                   \"Year\": \"2005\",",
+        "                   \"Rated\": \"PG-13\",",
+        "                   \"Released\": \"15 Jun 2005\",",
+        "                   \"Runtime\": \"140 min\",",
+        "                   \"Genre\": \"Action, Adventure\",",
+        "                   \"Director\": \"Christopher Nolan\",",
+        "                   \"Writer\": \"Bob Kane (characters), David S. Goyer (story), Christopher Nolan (screenplay), David S. Goyer (screenplay)\",",
+        "                   \"Actors\": \"Christian Bale, Michael Caine, Liam Neeson, Katie Holmes\",",
+        "                   \"Plot\": \"After training with his mentor, Batman begins his fight to free crime-ridden Gotham City from the corruption that Scarecrow and the League of Shadows have cast upon it.\",",
+        "                   \"Language\": \"English, Urdu, Mandarin\",",
+        "                   \"Country\": \"USA, UK\",",
+        "                   \"Awards\": \"Nominated for 1 Oscar. Another 15 wins & 66 nominations.\",",
+        "                   \"Poster\": \"http://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3._V1_SX300.jpg\",",
+        "                   \"Metascore\": \"70\",",
+        "                   \"imdbRating\": \"8.3\",",
+        "                   \"imdbVotes\": \"972,584\",",
+        "                   \"imdbID\": \"tt0372784\",",
+        "                   \"Type\": \"movie\",",
+        "                   \"Response\": \"True\"",
+        "                },",
+        "                {",
+        "                   \"Title\": \"Avatar\",",
+        "                   \"Year\": \"2009\",",
+        "                   \"Rated\": \"PG-13\",",
+        "                   \"Released\": \"18 Dec 2009\",",
+        "                   \"Runtime\": \"162 min\",",
+        "                   \"Genre\": \"Action, Adventure, Fantasy\",",
+        "                   \"Director\": \"James Cameron\",",
+        "                   \"Writer\": \"James Cameron\",",
+        "                   \"Actors\": \"Sam Worthington, Zoe Saldana, Sigourney Weaver, Stephen Lang\",",
+        "                   \"Plot\": \"A paraplegic marine dispatched to the moon Pandora on a unique mission becomes torn between following his orders and protecting the world he feels is his home.\",",
+        "                   \"Language\": \"English, Spanish\",",
+        "                   \"Country\": \"USA, UK\",",
+        "                   \"Awards\": \"Won 3 Oscars. Another 80 wins & 121 nominations.\",",
+        "                   \"Poster\": \"http://ia.media-imdb.com/images/M/MV5BMTYwOTEwNjAzMl5BMl5BanBnXkFtZTcwODc5MTUwMw@@._V1_SX300.jpg\",",
+        "                   \"Metascore\": \"83\",",
+        "                   \"imdbRating\": \"7.9\",",
+        "                   \"imdbVotes\": \"876,575\",",
+        "                   \"imdbID\": \"tt0499549\",",
+        "                   \"Type\": \"movie\",",
+        "                   \"Response\": \"True\"",
+        "                }",
+        "];",
+        "",
+        "// Add your code below this line",
+        "",
+        "var filteredList;",
+        "",
+        "// Add your code above this line",
+        "",
+        "console.log(filteredList); "
+      ],
+      "tests": [
+        "assert(watchList[0].Title === \"Inception\" && watchList[4].Director == \"James Cameron\", 'message: The <code>watchList</code> variable should not change.');",
+        "assert(code.match(/\\.filter/g), 'message: Your code should use the <code>filter</code> method.');",
+        "assert(!code.match(/for\\s*?\\(.+?\\)/g), 'message: Your code should not use a <code>for</code> loop.');",
+        "assert(JSON.stringify(filteredList) === JSON.stringify([{\"title\": \"Inception\",\"rating\": \"8.8\"},{\"title\": \"Interstellar\",\"rating\": \"8.6\"},{\"title\": \"The Dark Knight\",\"rating\": \"9.0\"},{\"title\": \"Batman Begins\",\"rating\": \"8.3\"}]), 'message: <code>filteredList</code> should equal <code>[{\"title\": \"Inception\",\"rating\": \"8.8\"},{\"title\": \"Interstellar\",\"rating\": \"8.6\"},{\"title\": \"The Dark Knight\",\"rating\": \"9.0\"},{\"title\": \"Batman Begins\",\"rating\": \"8.3\"}]</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b8f367417b2b2512b64",
+      "title": "Implement the Filter Function on a Prototype",
+      "description": [
+        "It would teach us a lot about the <code>filter</code> method if we try to implement a version of it that behaves exactly like <code>Array.prototype.filter()</code>. It can use either a <code>for</code> loop or <code>Array.prototype.forEach()</code>.",
+        "Note: A pure function is allowed to alter local variables defined within its scope, although, it's preferable to avoid that as well.",
+        "<h4>Instructions</h4>",
+        "Write your own <code>Array.prototype.myFilter()</code>, which should behave exactly like <code>Array.prototype.filter()</code>. You may use a <code>for</code> loop or the <code>Array.prototype.forEach()</code> method."
+      ],
+      "challengeSeed": [
+        "// the global Array",
+        "var s = [23, 65, 98, 5];",
+        "",
+        "Array.prototype.myFilter = function(callback){",
+        "  var newArray = [];",
+        "  // Add your code below this line",
+        "  ",
+        "  // Add your code above this line",
+        "  return newArray;",
+        "",
+        "};",
+        "",
+        "var new_s = s.myFilter(function(item){",
+        "  return item % 2 === 1;",
+        "});"
+      ],
+      "tests": [
+        "assert(JSON.stringify(new_s) === JSON.stringify([23, 65, 5]), 'message: <code>new_s</code> should equal <code>[23, 65, 5]</code>.');",
+        "assert(!code.match(/\\.filter/g), 'message: Your code should not use the <code>filter</code> method.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7b90367417b2b2512b65",
+      "title": "Return Part of an Array Using the Slice Method",
+      "description": [
+        "The <code>slice</code> method returns a copy of certain elements of an array. It can take two arguments, the first gives the index of where to begin the slice, the second is the index for where to end the slice (and it's non-inclusive). If the arguments are not provided, the default is to start at the beginning of the array through the end, which is an easy way to make a copy of the entire array. The <code>slice</code> method does not mutate the original array, but returns a new one.",
+        "Here's an example:",
+        "<blockquote>var arr = [\"Cat\", \"Dog\", \"Tiger\", \"Zebra\"];<br>var newArray = arr.slice(1, 3);<br>// Sets newArray to [\"Dog\", \"Tiger\"]</blockquote>",
+        "<h4>Instructions</h4>",
+        "Use the <code>slice</code> method in the <code>sliceArray</code> function to return part of the <code>anim</code> array given the provided <code>beginSlice</code> and <code>endSlice</code> indices. The function should return an array."
+      ],
+      "challengeSeed": [
+        "function sliceArray(anim, beginSlice, endSlice) {",
+        "  // Add your code below this line",
+        "  ",
+        "  ",
+        "  // Add your code above this line",
+        "}",
+        "var inputAnim = [\"Cat\", \"Dog\", \"Tiger\", \"Zebra\", \"Ant\"];",
+        "sliceArray(tempArray, 1, 3);"
+      ],
+      "tests": [
+        "assert(code.match(/\\.slice/g), 'message: Your code should use the <code>slice</code> method.');",
+        "assert(JSON.stringify(inputAnim) === JSON.stringify([\"Cat\", \"Dog\", \"Tiger\", \"Zebra\", \"Ant\"]), 'message: The <code>inputAnim</code> variable should not change.');",
+        "assert(JSON.stringify(sliceArray([\"Cat\", \"Dog\", \"Tiger\", \"Zebra\", \"Ant\"], 1, 3)) === JSON.stringify([\"Dog\", \"Tiger\"]), 'message: <code>sliceArray([\"Cat\", \"Dog\", \"Tiger\", \"Zebra\", \"Ant\"], 1, 3)</code> should return <code>[\"Dog\", \"Tiger\"]</code>.');",
+        "assert(JSON.stringify(sliceArray([\"Cat\", \"Dog\", \"Tiger\", \"Zebra\", \"Ant\"], 0, 1)) === JSON.stringify([\"Cat\"]), 'message: <code>sliceArray([\"Cat\", \"Dog\", \"Tiger\", \"Zebra\", \"Ant\"], 0, 1)</code> should return <code>[\"Cat\"]</code>.');",
+        "assert(JSON.stringify(sliceArray([\"Cat\", \"Dog\", \"Tiger\", \"Zebra\", \"Ant\"], 1, 4)) === JSON.stringify([\"Dog\", \"Tiger\", \"Zebra\"]), 'message: <code>sliceArray([\"Cat\", \"Dog\", \"Tiger\", \"Zebra\", \"Ant\"], 1, 4)</code> should return <code>[\"Dog\", \"Tiger\", \"Zebra\"]</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "9d7123c8c441eeafaeb5bdef",
+      "title": "Remove Elements from an Array Using Slice Instead of Splice",
+      "description": [
+        "A common pattern while working with arrays is when you want to remove items and keep the rest of the array. JavaScript offers the <code>splice</code> method for this, which takes arguments for the index of where to start removing items, then the number of items to remove. If the second argument is not provided, the default is to remove items through the end. However, the <code>splice</code> method mutates the original array it is called on. Here's an example:",
+        "<blockquote>var cities = [\"Chicago\", \"Delhi\", \"Islamabad\", \"London\", \"Berlin\"];<br>cities.splice(3, 1); // Returns \"London\" and deletes it from the cities array<br>// cities is now [\"Chicago\", \"Delhi\", \"Islamabad\", \"Berlin\"]</blockquote>",
+        "As we saw in the last challenge, the <code>slice</code> method does not mutate the original array, but returns a new one which can be saved into a variable. Recall that the <code>slice</code> method takes two arguments for the indices to begin and end the slice (the end is non-inclusive), and returns those items in a new array. Using the <code>slice</code> method instead of <code>splice</code> helps to avoid any array-mutating side effects.",
+        "<h4>Instructions</h4>",
+        "Rewrite the function <code>nonMutatingSplice</code> by using <code>slice</code> instead of <code>splice</code>. It should limit the provided <code>cities</code> array to a length of 3, and return a new array with only the first three items.",
+        "Do not mutate the original array provided to the function."
+      ],
+      "challengeSeed": [
+        "function nonMutatingSplice(cities) {",
+        "  // Add your code below this line",
+        "  return cities.splice(3);",
+        "  ",
+        "  // Add your code above this line",
+        "}",
+        "var inputCities = [\"Chicago\", \"Delhi\", \"Islamabad\", \"London\", \"Berlin\"];",
+        "nonMutatingSplice(inputCities);"
+      ],
+      "tests": [
+        "assert(code.match(/\\.slice/g), 'message: Your code should use the <code>slice</code> method.');",
+        "assert(!code.match(/\\.splice/g), 'message: Your code should not use the <code>splice</code> method.');",
+        "assert(JSON.stringify(inputCities) === JSON.stringify([\"Chicago\", \"Delhi\", \"Islamabad\", \"London\", \"Berlin\"]), 'message: The <code>inputCities</code> array should not change.');",
+        "assert(JSON.stringify(nonMutatingSplice([\"Chicago\", \"Delhi\", \"Islamabad\", \"London\", \"Berlin\"])) === JSON.stringify([\"Chicago\", \"Delhi\", \"Islamabad\"]), 'message: <code>nonMutatingSplice([\"Chicago\", \"Delhi\", \"Islamabad\", \"London\", \"Berlin\"])</code> should return <code>[\"Chicago\", \"Delhi\", \"Islamabad\"]</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7da9367417b2b2512b66",
+      "title": "Combine Two Arrays Using the Concat Method",
+      "description": [
+        "<code>Concatenation</code> means to join items end to end. JavaScript offers the <code>concat</code> method for both strings and arrays that work in the same way. For arrays, the method is called on one, then another array is provided as the argument to <code>concat</code>, which is added to the end of the first array. It returns a new array and does not mutate either of the original arrays. Here's an example:",
+        "<blockquote>[1, 2, 3].concat([4, 5, 6]);<br>// Returns a new array [1, 2, 3, 4, 5, 6]</blockquote>",
+        "<h4>Instructions</h4>",
+        "Use the <code>concat</code> method in the <code>nonMutatingConcat</code> function to concatenate <code>attach</code> to the end of <code>original</code>. The function should return the concatenated array."
+      ],
+      "challengeSeed": [
+        "function nonMutatingConcat(original, attach) {",
+        "  // Add your code below this line",
+        "  ",
+        "  ",
+        "  // Add your code above this line",
+        "}",
+        "var first = [1, 2, 3];",
+        "var second = [4, 5];",
+        "nonMutatingConcat(first, second);"
+      ],
+      "tests": [
+        "assert(code.match(/\\.concat/g), 'message: Your code should use the <code>concat</code> method.');",
+        "assert(JSON.stringify(first) === JSON.stringify([1, 2, 3]), 'message: The <code>first</code> array should not change.');",
+        "assert(JSON.stringify(second) === JSON.stringify([4, 5]), 'message: The <code>second</code> array should not change.');",
+        "assert(JSON.stringify(nonMutatingConcat([1, 2, 3], [4, 5])) === JSON.stringify([1, 2, 3, 4, 5]), 'message: <code>nonMutatingConcat([1, 2, 3], [4, 5])</code> should return <code>[1, 2, 3, 4, 5]</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7da9367417b2b2512b67",
+      "title": "Add Elements to the End of an Array Using Concat Instead of Push",
+      "description": [
+        "Functional programming is all about creating and using non-mutating functions.",
+        "The last challenge introduced the <code>concat</code> method as a way to combine arrays into a new one without mutating the original arrays. Compare <code>concat</code> to the <code>push</code> method. <code>Push</code> adds an item to the end of the same array it is called on, which mutates that array. Here's an example:",
+        "<blockquote>var arr = [1, 2, 3];<br>arr.push([4, 5, 6]);<br>// arr is changed to [1, 2, 3, 4, 5, 6]<br>// Not the functional programming way</blockquote>",
+        "<code>Concat</code> offers a way to add new items to the end of an array without any mutating side effects.",
+        "<h4>Instructions</h4>",
+        "Change the <code>nonMutatingPush</code> function so it uses <code>concat</code> to add <code>newItem</code> to the end of <code>original</code> instead of <code>push</code>. The function should return an array."
+      ],
+      "challengeSeed": [
+        "function nonMutatingPush(original, newItem) {",
+        "  // Add your code below this line",
+        "  return original.push(newItem);",
+        "  ",
+        "  // Add your code above this line",
+        "}",
+        "var first = [1, 2, 3];",
+        "var second = [4, 5];",
+        "nonMutatingPush(first, second);"
+      ],
+      "tests": [
+        "assert(code.match(/\\.concat/g), 'message: Your code should use the <code>concat</code> method.');",
+        "assert(!code.match(/\\.push/g), 'message: Your code should not use the <code>push</code> method.');",
+        "assert(JSON.stringify(first) === JSON.stringify([1, 2, 3]), 'message: The <code>first</code> array should not change.');",
+        "assert(JSON.stringify(second) === JSON.stringify([4, 5]), 'message: The <code>second</code> array should not change.');",
+        "assert(JSON.stringify(nonMutatingPush([1, 2, 3], [4, 5])) === JSON.stringify([1, 2, 3, 4, 5]), 'message: <code>nonMutatingPush([1, 2, 3], [4, 5])</code> should return <code>[1, 2, 3, 4, 5]</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7da9367417b2b2512b68",
+      "title": "Use the Reduce Method to Analyze Data",
+      "description": [
+        "<code>Array.prototype.reduce()</code>, or simply <code>reduce()</code>, is the most general of all array operations in JavaScript. You can solve almost any array processing problem using the <code>reduce</code> method.",
+        "This is not the case with the <code>filter</code> and <code>map</code> methods since they do not allow interaction between two different elements of the array. For example, if you want to compare elements of the array, or add them together, <code>filter</code> or <code>map</code> could not process that.",
+        "The <code>reduce</code> method allows for more general forms of array processing, and it's possible to show that both <code>filter</code> and <code>map</code> can be derived as a special application of <code>reduce</code>.",
+        "However, before we get there, let's practice using <code>reduce</code> first.",
+        "<h4>Instructions</h4>",
+        "The variable <code>watchList</code> holds an array of objects with information on several movies. Use <code>reduce</code> to find the average IMDB rating of the movies directed by Christopher Nolan. Recall from prior challenges how to <code>filter</code> data and <code>map</code> over it to pull what you need. You may need to create other variables, but save the final average into the variable <code>averageRating</code>. Note that the rating values are saved as strings in the object and need to be converted into numbers before they are used in any mathematical operations."
+      ],
+      "challengeSeed": [
+        "// the global variable",
+        "var watchList = [",
+        "                 {  ",
+        "                   \"Title\": \"Inception\",",
+        "                   \"Year\": \"2010\",",
+        "                   \"Rated\": \"PG-13\",",
+        "                   \"Released\": \"16 Jul 2010\",",
+        "                   \"Runtime\": \"148 min\",",
+        "                   \"Genre\": \"Action, Adventure, Crime\",",
+        "                   \"Director\": \"Christopher Nolan\",",
+        "                   \"Writer\": \"Christopher Nolan\",",
+        "                   \"Actors\": \"Leonardo DiCaprio, Joseph Gordon-Levitt, Ellen Page, Tom Hardy\",",
+        "                   \"Plot\": \"A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.\",",
+        "                   \"Language\": \"English, Japanese, French\",",
+        "                   \"Country\": \"USA, UK\",",
+        "                   \"Awards\": \"Won 4 Oscars. Another 143 wins & 198 nominations.\",",
+        "                   \"Poster\": \"http://ia.media-imdb.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX300.jpg\",",
+        "                   \"Metascore\": \"74\",",
+        "                   \"imdbRating\": \"8.8\",",
+        "                   \"imdbVotes\": \"1,446,708\",",
+        "                   \"imdbID\": \"tt1375666\",",
+        "                   \"Type\": \"movie\",",
+        "                   \"Response\": \"True\"",
+        "                },",
+        "                {  ",
+        "                   \"Title\": \"Interstellar\",",
+        "                   \"Year\": \"2014\",",
+        "                   \"Rated\": \"PG-13\",",
+        "                   \"Released\": \"07 Nov 2014\",",
+        "                   \"Runtime\": \"169 min\",",
+        "                   \"Genre\": \"Adventure, Drama, Sci-Fi\",",
+        "                   \"Director\": \"Christopher Nolan\",",
+        "                   \"Writer\": \"Jonathan Nolan, Christopher Nolan\",",
+        "                   \"Actors\": \"Ellen Burstyn, Matthew McConaughey, Mackenzie Foy, John Lithgow\",",
+        "                   \"Plot\": \"A team of explorers travel through a wormhole in space in an attempt to ensure humanity's survival.\",",
+        "                   \"Language\": \"English\",",
+        "                   \"Country\": \"USA, UK\",",
+        "                   \"Awards\": \"Won 1 Oscar. Another 39 wins & 132 nominations.\",",
+        "                   \"Poster\": \"http://ia.media-imdb.com/images/M/MV5BMjIxNTU4MzY4MF5BMl5BanBnXkFtZTgwMzM4ODI3MjE@._V1_SX300.jpg\",",
+        "                   \"Metascore\": \"74\",",
+        "                   \"imdbRating\": \"8.6\",",
+        "                   \"imdbVotes\": \"910,366\",",
+        "                   \"imdbID\": \"tt0816692\",",
+        "                   \"Type\": \"movie\",",
+        "                   \"Response\": \"True\"",
+        "                },",
+        "                {",
+        "                   \"Title\": \"The Dark Knight\",",
+        "                   \"Year\": \"2008\",",
+        "                   \"Rated\": \"PG-13\",",
+        "                   \"Released\": \"18 Jul 2008\",",
+        "                   \"Runtime\": \"152 min\",",
+        "                   \"Genre\": \"Action, Adventure, Crime\",",
+        "                   \"Director\": \"Christopher Nolan\",",
+        "                   \"Writer\": \"Jonathan Nolan (screenplay), Christopher Nolan (screenplay), Christopher Nolan (story), David S. Goyer (story), Bob Kane (characters)\",",
+        "                   \"Actors\": \"Christian Bale, Heath Ledger, Aaron Eckhart, Michael Caine\",",
+        "                   \"Plot\": \"When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.\",",
+        "                   \"Language\": \"English, Mandarin\",",
+        "                   \"Country\": \"USA, UK\",",
+        "                   \"Awards\": \"Won 2 Oscars. Another 146 wins & 142 nominations.\",",
+        "                   \"Poster\": \"http://ia.media-imdb.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_SX300.jpg\",",
+        "                   \"Metascore\": \"82\",",
+        "                   \"imdbRating\": \"9.0\",",
+        "                   \"imdbVotes\": \"1,652,832\",",
+        "                   \"imdbID\": \"tt0468569\",",
+        "                   \"Type\": \"movie\",",
+        "                   \"Response\": \"True\"",
+        "                },",
+        "                {  ",
+        "                   \"Title\": \"Batman Begins\",",
+        "                   \"Year\": \"2005\",",
+        "                   \"Rated\": \"PG-13\",",
+        "                   \"Released\": \"15 Jun 2005\",",
+        "                   \"Runtime\": \"140 min\",",
+        "                   \"Genre\": \"Action, Adventure\",",
+        "                   \"Director\": \"Christopher Nolan\",",
+        "                   \"Writer\": \"Bob Kane (characters), David S. Goyer (story), Christopher Nolan (screenplay), David S. Goyer (screenplay)\",",
+        "                   \"Actors\": \"Christian Bale, Michael Caine, Liam Neeson, Katie Holmes\",",
+        "                   \"Plot\": \"After training with his mentor, Batman begins his fight to free crime-ridden Gotham City from the corruption that Scarecrow and the League of Shadows have cast upon it.\",",
+        "                   \"Language\": \"English, Urdu, Mandarin\",",
+        "                   \"Country\": \"USA, UK\",",
+        "                   \"Awards\": \"Nominated for 1 Oscar. Another 15 wins & 66 nominations.\",",
+        "                   \"Poster\": \"http://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3._V1_SX300.jpg\",",
+        "                   \"Metascore\": \"70\",",
+        "                   \"imdbRating\": \"8.3\",",
+        "                   \"imdbVotes\": \"972,584\",",
+        "                   \"imdbID\": \"tt0372784\",",
+        "                   \"Type\": \"movie\",",
+        "                   \"Response\": \"True\"",
+        "                },",
+        "                {",
+        "                   \"Title\": \"Avatar\",",
+        "                   \"Year\": \"2009\",",
+        "                   \"Rated\": \"PG-13\",",
+        "                   \"Released\": \"18 Dec 2009\",",
+        "                   \"Runtime\": \"162 min\",",
+        "                   \"Genre\": \"Action, Adventure, Fantasy\",",
+        "                   \"Director\": \"James Cameron\",",
+        "                   \"Writer\": \"James Cameron\",",
+        "                   \"Actors\": \"Sam Worthington, Zoe Saldana, Sigourney Weaver, Stephen Lang\",",
+        "                   \"Plot\": \"A paraplegic marine dispatched to the moon Pandora on a unique mission becomes torn between following his orders and protecting the world he feels is his home.\",",
+        "                   \"Language\": \"English, Spanish\",",
+        "                   \"Country\": \"USA, UK\",",
+        "                   \"Awards\": \"Won 3 Oscars. Another 80 wins & 121 nominations.\",",
+        "                   \"Poster\": \"http://ia.media-imdb.com/images/M/MV5BMTYwOTEwNjAzMl5BMl5BanBnXkFtZTcwODc5MTUwMw@@._V1_SX300.jpg\",",
+        "                   \"Metascore\": \"83\",",
+        "                   \"imdbRating\": \"7.9\",",
+        "                   \"imdbVotes\": \"876,575\",",
+        "                   \"imdbID\": \"tt0499549\",",
+        "                   \"Type\": \"movie\",",
+        "                   \"Response\": \"True\"",
+        "                }",
+        "];",
+        "",
+        "// Add your code below this line",
+        "",
+        "var averageRating;",
+        "",
+        "// Add your code above this line",
+        "",
+        "console.log(averageRating); "
+      ],
+      "tests": [
+        "assert(watchList[0].Title === \"Inception\" && watchList[4].Director == \"James Cameron\", 'message: The <code>watchList</code> variable should not change.');",
+        "assert(code.match(/\\.reduce/g), 'message: Your code should use the <code>reduce</code> method.');",
+        "assert(averageRating == 8.675, 'message: The <code>averageRating</code> should equal 8.675.');",
+        "assert(!code.match(/for\\s*?\\(.*\\)/g), 'message: Your code should not use a <code>for</code> loop.');"
+      ],
+      "solutions": [],
+      "hints": [
+          "Try using .filter() to filter the watchList by Director.",
+          "Try using .map() to return an array of ratings.",
+          "You can use Number() to convert a string into a number."
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7da9367417b2b2512b69",
+      "title": "Sort an Array Alphabetically using the Sort Method",
+      "description": [
+        "The <code>sort</code> method sorts the elements of an array according to the callback function.",
+        "For example:",
+        "<blockquote>function ascendingOrder(arr) {<br>&nbsp;&nbsp;return arr.sort(function(a, b) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return a - b;<br>&nbsp;&nbsp;});<br>}<br>ascendingOrder([1, 5, 2, 3, 4]);<br>// Returns [1, 2, 3, 4, 5]<br><br>function reverseAlpha(arr) {<br>&nbsp;&nbsp;return arr.sort(function(a, b) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return a < b;<br>&nbsp;&nbsp;});<br>}<br>reverseAlpha(['l', 'h', 'z', 'b', 's']);<br>// Returns ['z', 's', 'l', 'h', 'b']</blockquote>",
+        "Note: It's encouraged to provide a callback function to specify how to sort the array items. JavaScript's default sorting method is by string Unicode point value, which may return unexpected results.",
+        "<h4>Instructions</h4>",
+        "Use the <code>sort</code> method in the <code>alphabeticalOrder</code> function to sort the elements of <code>arr</code> in alphabetical order."
+      ],
+      "challengeSeed": [
+        "function alphabeticalOrder(arr) {",
+        "  // Add your code below this line",
+        "  ",
+        "  ",
+        "  // Add your code above this line",
+        "}",
+        "alphabeticalOrder([\"a\", \"d\", \"c\", \"a\", \"z\", \"g\"]);"
+      ],
+      "tests": [
+        "assert(code.match(/\\.sort/g), 'message: Your code should use the <code>sort</code> method.');",
+        "assert(JSON.stringify(alphabeticalOrder([\"a\", \"d\", \"c\", \"a\", \"z\", \"g\"])) === JSON.stringify([\"a\", \"a\", \"c\", \"d\", \"g\", \"z\"]), 'message: <code>alphabeticalOrder([\"a\", \"d\", \"c\", \"a\", \"z\", \"g\"])</code> should return <code>[\"a\", \"a\", \"c\", \"d\", \"g\", \"z\"]</code>.');",
+        "assert(JSON.stringify(alphabeticalOrder([\"x\", \"h\", \"a\", \"m\", \"n\", \"m\"])) === JSON.stringify([\"a\", \"h\", \"m\", \"m\", \"n\", \"x\"]), 'message: <code>alphabeticalOrder([\"x\", \"h\", \"a\", \"m\", \"n\", \"m\"])</code> should return <code>[\"a\", \"h\", \"m\", \"m\", \"n\", \"x\"]</code>.');",
+        "assert(JSON.stringify(alphabeticalOrder([\"a\", \"a\", \"a\", \"a\", \"x\", \"t\"])) === JSON.stringify([\"a\", \"a\", \"a\", \"a\", \"t\", \"x\"]), 'message: <code>alphabeticalOrder([\"a\", \"a\", \"a\", \"a\", \"x\", \"t\"])</code> should return <code>[\"a\", \"a\", \"a\", \"a\", \"t\", \"x\"]</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7da9367417b2b2512b6a",
+      "title": "Return a Sorted Array Without Changing the Original Array",
+      "description": [
+        "A side effect of the <code>sort</code> method is that it changes the order of the elements in the original array. In other words, it mutates the array in place. One way to avoid this is to first concatenate an empty array to the one being sorted (remember that <code>concat</code> returns a new array), then run the <code>sort</code> method.",
+        "<h4>Instructions</h4>",
+        "Use the <code>sort</code> method in the <code>nonMutatingSort</code> function to sort the elements of an array in ascending order. The function should return a new array, and not mutate the <code>globalArray</code> variable."
+      ],
+      "challengeSeed": [
+        "var globalArray = [5, 6, 3, 2, 9];",
+        "function nonMutatingSort(arr) {",
+        "  // Add your code below this line",
+        "  ",
+        "  ",
+        "  // Add your code above this line",
+        "}",
+        "nonMutatingSort(globalArray);"
+      ],
+      "tests": [
+        "assert(code.match(/\\.sort/g), 'message: Your code should use the <code>sort</code> method.');",
+        "assert(code.match(/\\.concat/g), 'message: Your code should use the <code>concat</code> method.');",
+        "assert(JSON.stringify(globalArray) === JSON.stringify([5, 6, 3, 2, 9]), 'message: The <code>globalArray</code> variable should not change.');",
+        "assert(JSON.stringify(nonMutatingSort(globalArray)) === JSON.stringify([2, 3, 5, 6, 9]), 'message: <code>nonMutatingSort(globalArray)</code> should return <code>[2, 3, 5, 6, 9]</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7daa367417b2b2512b6b",
+      "title": "Split a String into an Array Using the Split Method",
+      "description": [
+        "The <code>split</code> method splits a string into an array of strings. It takes an argument for the delimiter, which can be a character to use to break up the string or a regular expression. For example, if the delimiter is a space, you get an array of words, and if the delimiter is an empty string, you get an array of each character in the string.",
+        "Here are two examples that split one string by spaces, then another by digits using a regular expression:",
+        "<blockquote>var str = \"Hello World\";<br>var bySpace = str.split(\" \");<br>// Sets bySpace to [\"Hello\", \"World\"]<br><br>var otherString = \"How9are7you2today\";<br>var byDigits = str.split(/\\d/);<br>// Sets byDigits to [\"How\", \"are\", \"you\", \"today\"]</blockquote>",
+        "Since strings are immutable, the <code>split</code> method makes it easier to work with them.",
+        "<h4>Instructions</h4>",
+        "Use the <code>split</code> method inside the <code>splitify</code> function to split <code>str</code> into an array of words. The function should return the array. Note that the words are not always separated by spaces, and the array should not contain punctuation."
+      ],
+      "challengeSeed": [
+        "function splitify(str) {",
+        "  // Add your code below this line",
+        "  ",
+        "  ",
+        "  // Add your code above this line",
+        "}",
+        "splitify(\"Hello World,I-am code\");"
+      ],
+      "tests": [
+        "assert(code.match(/\\.split/g), 'message: Your code should use the <code>split</code> method.');",
+        "assert(JSON.stringify(splitify(\"Hello World,I-am code\")) === JSON.stringify([\"Hello\", \"World\", \"I\", \"am\", \"code\"]), 'message: <code>splitify(\"Hello World,I-am code\")</code> should return <code>[\"Hello\", \"World\", \"I\", \"am\", \"code\"]</code>.');",
+        "assert(JSON.stringify(splitify(\"Earth-is-our home\")) === JSON.stringify([\"Earth\", \"is\", \"our\", \"home\"]), 'message: <code>splitify(\"Earth-is-our home\")</code> should return <code>[\"Earth\", \"is\", \"our\", \"home\"]</code>.');",
+        "assert(JSON.stringify(splitify(\"This.is.a-sentence\")) === JSON.stringify([\"This\", \"is\", \"a\", \"sentence\"]), 'message: <code>splitify(\"This.is.a-sentence\")</code> should return <code>[\"This\", \"is\", \"a\", \"sentence\"]</code>.');"
+      ],
+      "solutions": [],
+      "hints": [
+          "The regex pre-defined character class for non-alphanumerics is \\W."
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7daa367417b2b2512b6c",
+      "title": "Combine an Array into a String Using the Join Method",
+      "description": [
+        "The <code>join</code> method is used to join the elements of an array together to create a string. It takes an argument for the delimiter that is used to separate the array elements in the string.",
+        "Here's an example:",
+        "<blockquote>var arr = [\"Hello\", \"World\"];<br>var str = arr.join(\" \");<br>// Sets str to \"Hello World\"</blockquote>",
+        "<h4>Instructions</h4>",
+        "Use the <code>join</code> method (among others) inside the <code>sentensify</code> function to make a sentence from the words in the string <code>str</code>. The function should return a string. For example, \"I-like-Star-Wars\" would be converted to \"I like Star Wars\". For this challenge, do not use the <code>replace</code> method."
+      ],
+      "challengeSeed": [
+        "function sentensify(str) {",
+        "  // Add your code below this line",
+        "  ",
+        "  ",
+        "  // Add your code above this line",
+        "}",
+        "sentensify(\"May-the-force-be-with-you\");"
+      ],
+      "tests": [
+        "assert(code.match(/\\.join/g), 'message: Your code should use the <code>join</code> method.');",
+        "assert(!code.match(/\\.replace/g), 'message: Your code should not use the <code>replace</code> method.');",
+        "assert(typeof sentensify(\"May-the-force-be-with-you\") === \"string\", 'message: <code>sentensify(\"May-the-force-be-with-you\")</code> should return a string.');",
+        "assert(sentensify(\"May-the-force-be-with-you\") === \"May the force be with you\", 'message: <code>sentensify(\"May-the-force-be-with-you\")</code> should return <code>\"May the force be with you\"</code>.');",
+        "assert(sentensify(\"The.force.is.strong.with.this.one\") === \"The force is strong with this one\", 'message: <code>sentensify(\"The.force.is.strong.with.this.one\")</code> should return <code>\"The force is strong with this one\"</code>.');",
+        "assert(sentensify(\"There,has,been,an,awakening\") === \"There has been an awakening\", 'message: <code>sentensify(\"There,has,been,an,awakening\")</code> should return <code>\"There has been an awakening\"</code>.');"
+      ],
+      "solutions": [],
+      "hints": [
+          "First try to split the given string before applying the join method."
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7dab367417b2b2512b6d",
+      "title": "Apply Functional Programming to Convert Strings to URL Slugs",
+      "description": [
+        "The last several challenges covered a number of useful array and string methods that follow functional programming principles. We've also learned about <code>reduce</code>, which is a powerful method used to reduce problems to simpler forms. From computing averages to sorting, any array operation can be achieved by applying it. Recall that <code>map</code> and <code>filter</code> are special cases of <code>reduce</code>.",
+        "Let's combine what we've learned to solve a practical problem.",
+        "Many content management sites (CMS) have the titles of a post added to part of the URL for simple bookmarking purposes. For example, if you write a Medium post titled \"Stop Using Reduce\", it's likely the URL would have some form of the title string in it (\".../stop-using-reduce\"). You may have already noticed this on the Free Code Camp site.",
+        "<h4>Instructions</h4>",
+        "Fill in the <code>urlSlug</code> function so it converts a string <code>title</code> and returns the hyphenated version for the URL. You can use any of the methods covered in this section, and don't use <code>replace</code>. Here are the requirements:",
+        "The input is a string with spaces and title-cased words",
+        "The output is a string with the spaces between words replaced by a hyphen (<code>-</code>)",
+        "The output should be all lower-cased letters",
+        "The output should not have any spaces"
+      ],
+      "challengeSeed": [
+        "// the global variable",
+        "var globalTitle = \"Winter Is Coming\";",
+        "",
+        "// Add your code below this line",
+        "function urlSlug(title) {",
+        "  ",
+        "  ",
+        "};",
+        "// Add your code above this line",
+        "",
+        "var winterComing = urlSlug(globalTitle); // Should be \"winter-is-coming\""
+      ],
+      "tests": [
+        "assert(globalTitle === \"Winter Is Coming\", 'message: The <code>globalTitle</code> variable should not change.');",
+        "assert(!code.match(/\\.replace/g), 'message: Your code should not use the <code>replace</code> method for this challenge.');",
+        "assert(urlSlug(\"Winter Is Coming\") === \"winter-is-coming\", 'message: <code>urlSlug(\"Winter Is Coming\")</code> should return <code>\"winter-is-coming\"</code>.');",
+        "assert(urlSlug(\" Winter Is  Coming\") === \"winter-is-coming\", 'message: <code>urlSlug(\" Winter Is  Coming\")</code> should return <code>\"winter-is-coming\"</code>.');",
+        "assert(urlSlug(\"A Mind Needs Books Like A Sword Needs A Whetstone\") === \"a-mind-needs-books-like-a-sword-needs-a-whetstone\", 'message: <code>urlSlug(\"A Mind Needs Books Like A Sword Needs A Whetstone\")</code> should return <code>\"a-mind-needs-books-like-a-sword-needs-a-whetstone\"</code>.');",
+        "assert(urlSlug(\"Hold The Door\") === \"hold-the-door\", 'message: <code>urlSlug(\"Hold The Door\")</code> should return <code>\"hold-the-door\"</code>.');"
+      ],
+      "solutions": [],
+      "hints": [
+          "When several spaces in a row are split by space, it puts an empty string in the array.",
+          "You can use the .toLowerCase() method to make the title all lower case."
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7dab367417b2b2512b6e",
+      "title": "Use the Every Method to Check that Every Element in an Array Meets a Criteria",
+      "description": [
+        "The <code>every</code> method works with arrays to check if <em>every</em> element passes a particular test. It returns a Boolean value - <code>true</code> if all values meet the criteria, <code>false</code> if not.",
+        "For example, the following code would check if every element in the <code>numbers</code> array is less than 10:",
+        "<blockquote>var numbers = [1, 5, 8, 0, 10, 11];<br>numbers.every(function(currentValue) {<br>&nbsp;&nbsp;return currentValue < 10;<br>});<br>// Returns false</blockquote>",
+        "<h4>Instructions</h4>",
+        "Use the <code>every</code> method inside the <code>checkPositive</code> function to check if every element in <code>arr</code> is positive. The function should return a Boolean value."
+      ],
+      "challengeSeed": [
+        "function checkPositive(arr) {",
+        "  // Add your code below this line",
+        "  ",
+        "  ",
+        "  // Add your code above this line",
+        "}",
+        "checkPositive([1, 2, 3, -4, 5]);"
+      ],
+      "tests": [
+        "assert(code.match(/\\.every/g), 'message: Your code should use the <code>every</code> method.');",
+        "assert(!checkPositive([1, 2, 3, -4, 5]), 'message: <code>checkPositive([1, 2, 3, -4, 5])</code> should return <code>false</code>.');",
+        "assert(checkPositive([1, 2, 3, 4, 5]), 'message: <code>checkPositive([1, 2, 3, 4, 5])</code> should return <code>true</code>.');",
+        "assert(!checkPositive([1, -2, 3, -4, 5]), 'message: <code>checkPositive([1, -2, 3, -4, 5])</code> should return <code>false</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7dab367417b2b2512b6f",
+      "title": "Use the Some Method to Check that Any Elements in an Array Meet a Criteria",
+      "description": [
+        "The <code>some</code> method works with arrays to check if <em>any</em> element passes a particular test. It returns a Boolean value - <code>true</code> if any of the values meet the criteria, <code>false</code> if not.",
+        "For example, the following code would check if any element in the <code>numbers</code> array is less than 10:",
+        "<blockquote>var numbers = [10, 50, 8, 220, 110, 11];<br>numbers.some(function(currentValue) {<br>&nbsp;&nbsp;return currentValue < 10;<br>});<br>// Returns true</blockquote>",
+        "<h4>Instructions</h4>",
+        "Use the <code>some</code> method inside the <code>checkPositive</code> function to check if any element in <code>arr</code> is positive. The function should return a Boolean value."
+      ],
+      "challengeSeed": [
+        "function checkPositive(arr) {",
+        "  // Add your code below this line",
+        "  ",
+        "  ",
+        "  // Add your code above this line",
+        "}",
+        "checkPositive([1, 2, 3, -4, 5]);"
+      ],
+      "tests": [
+        "assert(code.match(/\\.some/g), 'message: Your code should use the <code>some</code> method.');",
+        "assert(checkPositive([1, 2, 3, -4, 5]), 'message: <code>checkPositive([1, 2, 3, -4, 5])</code> should return <code>true</code>.');",
+        "assert(checkPositive([1, 2, 3, 4, 5]), 'message: <code>checkPositive([1, 2, 3, 4, 5])</code> should return <code>true</code>.');",
+        "assert(!checkPositive([-1, -2, -3, -4, -5]), 'message: <code>checkPositive([-1, -2, -3, -4, -5])</code> should return <code>false</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7dab367417b2b2512b70",
+      "title": "Introduction to Currying and Partial Application",
+      "description": [
+        "The <code>arity</code> of a function is the number of arguments it requires. <code>Currying</code> a function means to convert a function of N <code>arity</code> into N functions of <code>arity</code> 1.",
+        "In other words, it restructures a function so it takes one argument, then returns another function that takes the next argument, and so on.",
+        "Here's an example:",
+        "<blockquote>//Un-curried function<br>function unCurried(x, y, z) {<br>&nbsp;&nbsp;return x + y + z;<br>}<br><br>//Curried function<br>function curried(x) {<br>&nbsp;&nbsp;return function(y) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return x + y;<br>&nbsp;&nbsp;}<br>}<br>curried(1)(2) // Returns 3</blockquote>",
+        "This is useful in your program if you can't supply all the arguments to a function at one time. You can save each function call into a variable, which will hold the returned function reference that takes the next argument when it's available. Here's an example using the <code>curried</code> function in the example above:",
+        "<blockquote>// Call a curried function in parts:<br>var funcForY = curried(1);<br>var funcForZ = funcForY(2);<br>console.log(funcForZ(3)); // Prints 6</blockquote>",
+        "Similarly, <code>partial application</code> can be described as applying a few arguments to a function at a time and returning another function that is applied to more arguments.",
+        "Here's an example:",
+        "<blockquote>//Impartial function<br>function impartial(x, y, z) {<br>&nbsp;&nbsp;return x + y + z;<br>}<br>var partialFn = impartial.bind(this, 1, 2);<br>partialFn(10); // Returns 13</blockquote>",
+        "<h4>Instructions</h4>",
+        "Fill in the body of the <code>add</code> function so it uses currying to add parameters <code>x</code>, <code>y</code>, and <code>z</code>."
+      ],
+      "challengeSeed": [
+        "function add(x) {",
+        "  // Add your code below this line",
+        "  ",
+        "  ",
+        "  // Add your code above this line",
+        "}",
+        "add(10)(20)(30);"
+      ],
+      "tests": [
+        "assert(add(10)(20)(30) === 60, 'message: <code>add(10)(20)(30)</code> should return <code>60</code>.');",
+        "assert(add(1)(2)(3) === 6, 'message: <code>add(1)(2)(3)</code> should return <code>6</code>.');",
+        "assert(add(11)(22)(33) === 66, 'message: <code>add(11)(22)(33)</code> should return <code>66</code>.');",
+        "assert(code.match(/[xyz]\\s*?\\+\\s*?[xyz]\\s*?\\+\\s*?[xyz]/g), 'message: Your code should include a final statement that returns <code>x + y + z</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    }
+  ]
+}
diff --git a/seed/challenges/01-front-end-development-certification/intermediate-bonfires.json b/seed/challenges/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting.json
similarity index 76%
rename from seed/challenges/01-front-end-development-certification/intermediate-bonfires.json
rename to seed/challenges/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting.json
index 59cd3ed5db444f..12f9aed9606c9c 100644
--- a/seed/challenges/01-front-end-development-certification/intermediate-bonfires.json
+++ b/seed/challenges/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting.json
@@ -1,6 +1,6 @@
 {
   "name": "Intermediate Algorithm Scripting",
-  "order": 11.5,
+  "order": 8,
   "time": "50 hours",
   "helpRoom": "HelpJavaScript",
   "challenges": [
@@ -126,75 +126,124 @@
       }
     },
     {
-      "id": "a7f4d8f2483413a6ce226cac",
-      "title": "Roman Numeral Converter",
+      "id": "aaa48de84e1ecc7c742e1124",
+      "title": "Check for Palindromes",
       "description": [
-        "Convert the given number into a roman numeral.",
-        "All <a href=\"http://www.mathsisfun.com/roman-numerals.html\" target=\"_blank\">roman numerals</a> answers should be provided in upper-case.",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
+        "Return <code>true</code> if the given string is a palindrome. Otherwise, return <code>false</code>.",
+        "A <dfn>palindrome</dfn> is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.",
+        "<strong>Note</strong><br>You'll need to remove <strong>all non-alphanumeric characters</strong> (punctuation, spaces and symbols) and turn everything into the same case (lower or upper case) in order to check for palindromes.",
+        "We'll pass strings with varying formats, such as <code>\"racecar\"</code>, <code>\"RaceCar\"</code>, and <code>\"race CAR\"</code> among others.",
+        "We'll also pass strings with special symbols, such as <code>\"2A3*3a2\"</code>, <code>\"2A3  3a2\"</code>, and <code>\"2_A3*3#A2\"</code>.",
+        "Remember to use <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
       ],
       "challengeSeed": [
-        "function convertToRoman(num) {",
-        " return num;",
+        "function palindrome(str) {",
+        "  // Good luck!",
+        "  return true;",
         "}",
         "",
-        "convertToRoman(36);"
+        "",
+        "",
+        "palindrome(\"eye\");"
+      ],
+      "tests": [
+        "assert(typeof palindrome(\"eye\") === \"boolean\", 'message: <code>palindrome(\"eye\")</code> should return a boolean.');",
+        "assert(palindrome(\"eye\") === true, 'message: <code>palindrome(\"eye\")</code> should return true.');",
+        "assert(palindrome(\"_eye\") === true, 'message: <code>palindrome(\"_eye\")</code> should return true.');",
+        "assert(palindrome(\"race car\") === true, 'message: <code>palindrome(\"race car\")</code> should return true.');",
+        "assert(palindrome(\"not a palindrome\") === false, 'message: <code>palindrome(\"not a palindrome\")</code> should return false.');",
+        "assert(palindrome(\"A man, a plan, a canal. Panama\") === true, 'message: <code>palindrome(\"A man, a plan, a canal. Panama\")</code> should return true.');",
+        "assert(palindrome(\"never odd or even\") === true, 'message: <code>palindrome(\"never odd or even\")</code> should return true.');",
+        "assert(palindrome(\"nope\") === false, 'message: <code>palindrome(\"nope\")</code> should return false.');",
+        "assert(palindrome(\"almostomla\") === false, 'message: <code>palindrome(\"almostomla\")</code> should return false.');",
+        "assert(palindrome(\"My age is 0, 0 si ega ym.\") === true, 'message: <code>palindrome(\"My age is 0, 0 si ega ym.\")</code> should return true.');",
+        "assert(palindrome(\"1 eye for of 1 eye.\") === false, 'message: <code>palindrome(\"1 eye for of 1 eye.\")</code> should return false.');",
+        "assert(palindrome(\"0_0 (: /-\\ :) 0-0\") === true, 'message: <code>palindrome(\"0_0 (: /-\\ :) 0-0\")</code> should return true.');",
+        "assert(palindrome(\"five|\\_/|four\") === false, 'message: <code>palindrome(\"five|\\_/|four\")</code> should return false.');"
       ],
+      "type": "bonfire",
+      "isRequired": true,
       "solutions": [
-        "function convertToRoman(num) {\n  var ref = [['M', 1000], ['CM', 900], ['D', 500], ['CD', 400], ['C', 100], ['XC', 90], ['L', 50], ['XL', 40], ['X', 10], ['IX', 9], ['V', 5], ['IV', 4], ['I', 1]];\n  var res = [];\n  ref.forEach(function(p) {\n    while (num >= p[1]) {\n      res.push(p[0]);\n      num -= p[1];\n    }\n  });\n  return res.join('');\n}"
+        "function palindrome(str) {\n  var string = str.toLowerCase().split(/[^A-Za-z0-9]/gi).join('');\n  var aux = string.split('');\n  if (aux.join('') === aux.reverse().join('')){\n    return true;\n  }\n\n  return false;\n}"
+      ],
+      "MDNlinks": [
+        "String.prototype.replace()",
+        "String.prototype.toLowerCase()"
+      ],
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Verifica si es palíndromo",
+          "description": [
+            "Crea una función que devuelva <code>true</code> si una cadena de texto dada es un palíndromo, y que devuelva <code>false</code> en caso contrario",
+            "Un palíndromo es una palabra u oración que se escribe de la misma forma en ambos sentidos, sin tomar en cuenta signos de puntuación, espacios y sin distinguir entre mayúsculas y minúsculas.",
+            "Tendrás que quitar los caracteres no alfanuméricos (signos de puntuación, espacioes y símbolos) y transformar las letras a minúsculas para poder verificar si el texto es palíndromo.",
+            "Te proveeremos textos en varios formatos, como \"racecar\", \"RaceCar\", and \"race CAR\" entre otros.",
+            "También vamos a pasar cadenas con símbolos especiales, tales como <code>\"2A3*3a2\"</code>, <code>\"2A3 3a2\"</code>, y <code>\"2_A3*3#A2\"</code>.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
+          ]
+        },
+        "pt-br": {
+          "title": "Procure por Palíndromos",
+          "description": [
+            "Retorne <code>true</code> se o texto fornecida é um palíndromo. Caso contrário, retorne <code>false</code>.",
+            "Um <dfn>palíndromo</dfn> é uma palavra ou sentença que é soletrada da mesma maneira tanto para a frente quanto para trás, ignorando pontuação, maiúsculas e minúsculas, e espaçamento.",
+            "<strong>Nota</strong><br>Você precisará remover <strong>todos caracteres não alfanuméricos</strong> (pontuação, espaços e símbolos) e transformar todas as letras em maiúsculas ou minúsculas para procurar por palíndromos.",
+            "Nós vamos passar textos de vários formatos, tais como <code>\"racecar\"</code>, <code>\"RaceCar\"</code> e <code>\"race CAR\"</code> entre outras.",
+            "Nós também vamos passar textos com símbolos especiais, tais como <code>\"2A3*3a2\"</code>, <code>\"2A3  3a2\"</code> e <code>\"2_A3*3#A2\"</code>.",
+            "Lembre-se de usar <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se você ficar travado. Escreva seu próprio código."
+          ]
+        }
+      }
+    },
+    {
+      "id": "a39963a4c10bc8b4d4f06d7e",
+      "title": "Seek and Destroy",
+      "description": [
+        "You will be provided with an initial array (the first argument in the destroyer function), followed by one or more arguments. Remove all elements from the initial array that are of the same value as these arguments.",
+        "<strong>Note</strong><br> You have to use the <code>arguments</code> object.",
+        "Remember to use <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Read-Search-Ask</a> if you get stuck. Write your own code."
+      ],
+      "challengeSeed": [
+        "function destroyer(arr) {",
+        "  // Remove all the values",
+        "  return arr;",
+        "}",
+        "",
+        "destroyer([1, 2, 3, 1, 2, 3], 2, 3);"
       ],
       "tests": [
-        "assert.deepEqual(convertToRoman(2), \"II\", 'message: <code>convertToRoman(2)</code> should return \"II\".');",
-        "assert.deepEqual(convertToRoman(3), \"III\", 'message: <code>convertToRoman(3)</code> should return \"III\".');",
-        "assert.deepEqual(convertToRoman(4), \"IV\", 'message: <code>convertToRoman(4)</code> should return \"IV\".');",
-        "assert.deepEqual(convertToRoman(5), \"V\", 'message: <code>convertToRoman(5)</code> should return \"V\".');",
-        "assert.deepEqual(convertToRoman(9), \"IX\", 'message: <code>convertToRoman(9)</code> should return \"IX\".');",
-        "assert.deepEqual(convertToRoman(12), \"XII\", 'message: <code>convertToRoman(12)</code> should return \"XII\".');",
-        "assert.deepEqual(convertToRoman(16), \"XVI\", 'message: <code>convertToRoman(16)</code> should return \"XVI\".');",
-        "assert.deepEqual(convertToRoman(29), \"XXIX\", 'message: <code>convertToRoman(29)</code> should return \"XXIX\".');",
-        "assert.deepEqual(convertToRoman(44), \"XLIV\", 'message: <code>convertToRoman(44)</code> should return \"XLIV\".');",
-        "assert.deepEqual(convertToRoman(45), \"XLV\", 'message: <code>convertToRoman(45)</code> should return \"XLV\"');",
-        "assert.deepEqual(convertToRoman(68), \"LXVIII\", 'message: <code>convertToRoman(68)</code> should return \"LXVIII\"');",
-        "assert.deepEqual(convertToRoman(83), \"LXXXIII\", 'message: <code>convertToRoman(83)</code> should return \"LXXXIII\"');",
-        "assert.deepEqual(convertToRoman(97), \"XCVII\", 'message: <code>convertToRoman(97)</code> should return \"XCVII\"');",
-        "assert.deepEqual(convertToRoman(99), \"XCIX\", 'message: <code>convertToRoman(99)</code> should return \"XCIX\"');",
-        "assert.deepEqual(convertToRoman(400), \"CD\", 'message: <code>convertToRoman(400)</code> should return \"CD\"');",
-        "assert.deepEqual(convertToRoman(500), \"D\", 'message: <code>convertToRoman(500)</code> should return \"D\"');",
-        "assert.deepEqual(convertToRoman(501), \"DI\", 'message: <code>convertToRoman(501)</code> should return \"DI\"');",
-        "assert.deepEqual(convertToRoman(649), \"DCXLIX\", 'message: <code>convertToRoman(649)</code> should return \"DCXLIX\"');",
-        "assert.deepEqual(convertToRoman(798), \"DCCXCVIII\", 'message: <code>convertToRoman(798)</code> should return \"DCCXCVIII\"');",
-        "assert.deepEqual(convertToRoman(891), \"DCCCXCI\", 'message: <code>convertToRoman(891)</code> should return \"DCCCXCI\"');",
-        "assert.deepEqual(convertToRoman(1000), \"M\", 'message: <code>convertToRoman(1000)</code> should return \"M\"');",
-        "assert.deepEqual(convertToRoman(1004), \"MIV\", 'message: <code>convertToRoman(1004)</code> should return \"MIV\"');",
-        "assert.deepEqual(convertToRoman(1006), \"MVI\", 'message: <code>convertToRoman(1006)</code> should return \"MVI\"');",
-        "assert.deepEqual(convertToRoman(1023), \"MXXIII\", 'message: <code>convertToRoman(1023)</code> should return \"MXXIII\"');",
-        "assert.deepEqual(convertToRoman(2014), \"MMXIV\", 'message: <code>convertToRoman(2014)</code> should return \"MMXIV\"');",
-        "assert.deepEqual(convertToRoman(3999), \"MMMCMXCIX\", 'message: <code>convertToRoman(3999)</code> should return \"MMMCMXCIX\"');"
+        "assert.deepEqual(destroyer([1, 2, 3, 1, 2, 3], 2, 3), [1, 1], 'message: <code>destroyer([1, 2, 3, 1, 2, 3], 2, 3)</code> should return <code>[1, 1]</code>.');",
+        "assert.deepEqual(destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3), [1, 5, 1], 'message: <code>destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3)</code> should return <code>[1, 5, 1]</code>.');",
+        "assert.deepEqual(destroyer([3, 5, 1, 2, 2], 2, 3, 5), [1], 'message: <code>destroyer([3, 5, 1, 2, 2], 2, 3, 5)</code> should return <code>[1]</code>.');",
+        "assert.deepEqual(destroyer([2, 3, 2, 3], 2, 3), [], 'message: <code>destroyer([2, 3, 2, 3], 2, 3)</code> should return <code>[]</code>.');",
+        "assert.deepEqual(destroyer([\"tree\", \"hamburger\", 53], \"tree\", 53), [\"hamburger\"], 'message: <code>destroyer([\"tree\", \"hamburger\", 53], \"tree\", 53)</code> should return <code>[\"hamburger\"]</code>.');",
+        "assert.deepEqual(destroyer([\"possum\", \"trollo\", 12, \"safari\", \"hotdog\", 92, 65, \"grandma\", \"bugati\", \"trojan\", \"yacht\"], \"yacht\", \"possum\", \"trollo\", \"safari\", \"hotdog\", \"grandma\", \"bugati\", \"trojan\"), [12,92,65], 'message: <code>destroyer([\"possum\", \"trollo\", 12, \"safari\", \"hotdog\", 92, 65, \"grandma\", \"bugati\", \"trojan\", \"yacht\"], \"yacht\", \"possum\", \"trollo\", \"safari\", \"hotdog\", \"grandma\", \"bugati\", \"trojan\")</code> should return <code>[12,92,65]</code>.');"
       ],
       "type": "bonfire",
+      "isRequired": true,
+      "solutions": [
+        "function destroyer(arr) {\n  var hash = Object.create(null);\n  [].slice.call(arguments, 1).forEach(function(e) {\n    hash[e] = true;\n  });\n  // Remove all the values\n  return arr.filter(function(e) { return !(e in hash);});\n}\n\ndestroyer([1, 2, 3, 1, 2, 3], 2, 3);\n"
+      ],
       "MDNlinks": [
-        "Roman Numerals",
-        "Array.prototype.splice()",
-        "Array.prototype.indexOf()",
-        "Array.prototype.join()"
+        "Arguments object",
+        "Array.prototype.filter()"
       ],
-      "isRequired": true,
       "challengeType": 5,
       "translations": {
         "es": {
-          "title": "Convertior de números romanos",
+          "title": "Buscar y Destruir",
           "description": [
-            "Convierte el número dado en numeral romano.",
-            "Todos los <a href=\"http://www.mathsisfun.com/roman-numerals.html\" target=\"_blank\">numerales romanos</a> en las respuestas deben estar en mayúsculas.",
+            "Se te proveerá un arreglo inicial (el primer argumento en la función <code>destroyer</code>), seguido por uno o más argumentos. Elimina todos los elementos del arreglo inicial que tengan el mismo valor que el resto de argumentos.",
             "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
           ]
         },
-        "fr": {
-          "title": "Convertir en chiffres romains",
+        "pt-br": {
+          "title": "Buscar e Destruir",
           "description": [
-            "Convertis le nombre donné en chiffres romains.",
-            "Tous les <a href=\"http://www.mathsisfun.com/roman-numerals.html\" target=\"_blank\">chiffres romains</a> doivent être en lettres capitales.",
-            "N'oublie pas d'utiliser <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
+            "Será fornecido a você uma matriz inicial (o primeiro argumento da função destroyer), seguido por um ou mais argumentos. Remova todos os elementos da matriz inicial que possuem o mesmo valor desses argumentos.",
+            "<strong>Nota</strong><br> Você precisa usar o objeto <code>arguments</code>.",
+            "Lembre-se de usar <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se você ficar travado. Escreva seu próprio código."
           ]
         }
       }
@@ -229,7 +278,7 @@
         "assert.deepEqual(whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], { \"apple\": 1, \"bat\": 2 }), [{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], 'message: <code>whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], { \"apple\": 1, \"bat\": 2 })</code> should return <code>[{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }]</code>.');",
         "assert.deepEqual(whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], { \"apple\": 1, \"cookie\": 2 }), [{ \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], 'message: <code>whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }], { \"apple\": 1, \"cookie\": 2 })</code> should return <code>[{ \"apple\": 1, \"bat\": 2, \"cookie\": 2 }]</code>.');",
         "assert.deepEqual(whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }, {\"bat\":2}], { \"apple\": 1, \"bat\": 2 }), [{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\":2 }], 'message: <code>whatIsInAName([{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1 }, { \"apple\": 1, \"bat\": 2, \"cookie\": 2 }, { \"bat\":2 }], { \"apple\": 1, \"bat\": 2 })</code> should return <code>[{ \"apple\": 1, \"bat\": 2 }, { \"apple\": 1, \"bat\": 2, \"cookie\":2 }]</code>.');"
-	  ],
+      ],
       "type": "bonfire",
       "MDNlinks": [
         "Global Object",
@@ -258,66 +307,191 @@
       }
     },
     {
-      "id": "a0b5010f579e69b815e7c5d6",
-      "title": "Search and Replace",
+      "id": "a103376db3ba46b2d50db289",
+      "title": "Spinal Tap Case",
       "description": [
-        "Perform a search and replace on the sentence using the arguments provided and return the new sentence.",
-        "First argument is the sentence to perform the search and replace on.",
-        "Second argument is the word that you will be replacing (before).",
-        "Third argument is what you will be replacing the second argument with (after).",
-        "<strong>Note</strong><br> Preserve the case of the first character in the original word when you are replacing it. For example if you mean to replace the word \"Book\" with the word \"dog\", it should be replaced as \"Dog\"",
+        "Convert a string to spinal case. Spinal case is all-lowercase-words-joined-by-dashes.",
         "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
       ],
       "challengeSeed": [
-        "function myReplace(str, before, after) {",
+        "function spinalCase(str) {",
+        "  // \"It's such a fine line between stupid, and clever.\"",
+        "  // --David St. Hubbins",
         "  return str;",
         "}",
         "",
-        "myReplace(\"A quick brown fox jumped over the lazy dog\", \"jumped\", \"leaped\");"
+        "spinalCase('This Is Spinal Tap');"
       ],
       "solutions": [
-        "function myReplace(str, before, after) {\n  if (before.charAt(0) === before.charAt(0).toUpperCase()) {\n    after = after.charAt(0).toUpperCase() + after.substring(1);\n  } else {\n    after = after.charAt(0).toLowerCase() + after.substring(1);\n  }\n  return str.replace(before, after);\n}"
+        "function spinalCase(str) {\n  // \"It's such a fine line between stupid, and clever.\"\n  // --David St. Hubbins\n  str = str.replace(/([a-z](?=[A-Z]))/g, '$1 ');\n  return str.toLowerCase().replace(/\\ |\\_/g, '-');\n}"
       ],
       "tests": [
-        "assert.deepEqual(myReplace(\"Let us go to the store\", \"store\", \"mall\"), \"Let us go to the mall\", 'message: <code>myReplace(\"Let us go to the store\", \"store\", \"mall\")</code> should return \"Let us go to the mall\".');",
-        "assert.deepEqual(myReplace(\"He is Sleeping on the couch\", \"Sleeping\", \"sitting\"), \"He is Sitting on the couch\", 'message: <code>myReplace(\"He is Sleeping on the couch\", \"Sleeping\", \"sitting\")</code> should return \"He is Sitting on the couch\".');",
-        "assert.deepEqual(myReplace(\"This has a spellngi error\", \"spellngi\", \"spelling\"), \"This has a spelling error\", 'message: <code>myReplace(\"This has a spellngi error\", \"spellngi\", \"spelling\")</code> should return \"This has a spelling error\".');",
-        "assert.deepEqual(myReplace(\"His name is Tom\", \"Tom\", \"john\"), \"His name is John\", 'message: <code>myReplace(\"His name is Tom\", \"Tom\", \"john\")</code> should return \"His name is John\".');",
-        "assert.deepEqual(myReplace(\"Let us get back to more Coding\", \"Coding\", \"algorithms\"), \"Let us get back to more Algorithms\", 'message: <code>myReplace(\"Let us get back to more Coding\", \"Coding\", \"algorithms\")</code> should return \"Let us get back to more Algorithms\".');"
+        "assert.deepEqual(spinalCase(\"This Is Spinal Tap\"), \"this-is-spinal-tap\", 'message: <code>spinalCase(\"This Is Spinal Tap\")</code> should return <code>\"this-is-spinal-tap\"</code>.');",
+        "assert.strictEqual(spinalCase('thisIsSpinalTap'), \"this-is-spinal-tap\", 'message: <code>spinalCase(\"thisIsSpinal<wbr>Tap\")</code> should return <code>\"this-is-spinal-tap\"</code>.');",
+        "assert.strictEqual(spinalCase(\"The_Andy_Griffith_Show\"), \"the-andy-griffith-show\", 'message: <code>spinalCase(\"The_Andy_<wbr>Griffith_Show\")</code> should return <code>\"the-andy-griffith-show\"</code>.');",
+        "assert.strictEqual(spinalCase(\"Teletubbies say Eh-oh\"), \"teletubbies-say-eh-oh\", 'message: <code>spinalCase(\"Teletubbies say Eh-oh\")</code> should return <code>\"teletubbies-say-eh-oh\"</code>.');",
+        "assert.strictEqual(spinalCase(\"AllThe-small Things\"), \"all-the-small-things\", 'message: <code>spinalCase(\"AllThe-small Things\")</code> should return <code>\"all-the-small-things\"</code>.');"
+      ],
+      "type": "bonfire",
+      "MDNlinks": [
+        "RegExp",
+        "String.prototype.replace()"
+      ],
+      "isRequired": true,
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "separado-por-guiones",
+          "description": [
+            "Convierte la cadena de texto que se te pasa al formato spinal case. Spinal case es cuando escribes todas las palabras en-minúsculas-unidas-por-guiones.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
+          ]
+        },
+        "fr": {
+          "title": "Trait d'union",
+          "description": [
+            "Convertis la chaîne de caractères en spinal case. Spinal case correspond au bas-de-casse-séparé-par-des-tirets.",
+            "N'oublie pas d'utiliser <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
+          ]
+        }
+      }
+    },
+    {
+      "id": "a7f4d8f2483413a6ce226cac",
+      "title": "Roman Numeral Converter",
+      "description": [
+        "Convert the given number into a roman numeral.",
+        "All <a href=\"http://www.mathsisfun.com/roman-numerals.html\" target=\"_blank\">roman numerals</a> answers should be provided in upper-case.",
+        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
+      ],
+      "challengeSeed": [
+        "function convertToRoman(num) {",
+        " return num;",
+        "}",
+        "",
+        "convertToRoman(36);"
+      ],
+      "solutions": [
+        "function convertToRoman(num) {\n  var ref = [['M', 1000], ['CM', 900], ['D', 500], ['CD', 400], ['C', 100], ['XC', 90], ['L', 50], ['XL', 40], ['X', 10], ['IX', 9], ['V', 5], ['IV', 4], ['I', 1]];\n  var res = [];\n  ref.forEach(function(p) {\n    while (num >= p[1]) {\n      res.push(p[0]);\n      num -= p[1];\n    }\n  });\n  return res.join('');\n}"
+      ],
+      "tests": [
+        "assert.deepEqual(convertToRoman(2), \"II\", 'message: <code>convertToRoman(2)</code> should return \"II\".');",
+        "assert.deepEqual(convertToRoman(3), \"III\", 'message: <code>convertToRoman(3)</code> should return \"III\".');",
+        "assert.deepEqual(convertToRoman(4), \"IV\", 'message: <code>convertToRoman(4)</code> should return \"IV\".');",
+        "assert.deepEqual(convertToRoman(5), \"V\", 'message: <code>convertToRoman(5)</code> should return \"V\".');",
+        "assert.deepEqual(convertToRoman(9), \"IX\", 'message: <code>convertToRoman(9)</code> should return \"IX\".');",
+        "assert.deepEqual(convertToRoman(12), \"XII\", 'message: <code>convertToRoman(12)</code> should return \"XII\".');",
+        "assert.deepEqual(convertToRoman(16), \"XVI\", 'message: <code>convertToRoman(16)</code> should return \"XVI\".');",
+        "assert.deepEqual(convertToRoman(29), \"XXIX\", 'message: <code>convertToRoman(29)</code> should return \"XXIX\".');",
+        "assert.deepEqual(convertToRoman(44), \"XLIV\", 'message: <code>convertToRoman(44)</code> should return \"XLIV\".');",
+        "assert.deepEqual(convertToRoman(45), \"XLV\", 'message: <code>convertToRoman(45)</code> should return \"XLV\"');",
+        "assert.deepEqual(convertToRoman(68), \"LXVIII\", 'message: <code>convertToRoman(68)</code> should return \"LXVIII\"');",
+        "assert.deepEqual(convertToRoman(83), \"LXXXIII\", 'message: <code>convertToRoman(83)</code> should return \"LXXXIII\"');",
+        "assert.deepEqual(convertToRoman(97), \"XCVII\", 'message: <code>convertToRoman(97)</code> should return \"XCVII\"');",
+        "assert.deepEqual(convertToRoman(99), \"XCIX\", 'message: <code>convertToRoman(99)</code> should return \"XCIX\"');",
+        "assert.deepEqual(convertToRoman(400), \"CD\", 'message: <code>convertToRoman(400)</code> should return \"CD\"');",
+        "assert.deepEqual(convertToRoman(500), \"D\", 'message: <code>convertToRoman(500)</code> should return \"D\"');",
+        "assert.deepEqual(convertToRoman(501), \"DI\", 'message: <code>convertToRoman(501)</code> should return \"DI\"');",
+        "assert.deepEqual(convertToRoman(649), \"DCXLIX\", 'message: <code>convertToRoman(649)</code> should return \"DCXLIX\"');",
+        "assert.deepEqual(convertToRoman(798), \"DCCXCVIII\", 'message: <code>convertToRoman(798)</code> should return \"DCCXCVIII\"');",
+        "assert.deepEqual(convertToRoman(891), \"DCCCXCI\", 'message: <code>convertToRoman(891)</code> should return \"DCCCXCI\"');",
+        "assert.deepEqual(convertToRoman(1000), \"M\", 'message: <code>convertToRoman(1000)</code> should return \"M\"');",
+        "assert.deepEqual(convertToRoman(1004), \"MIV\", 'message: <code>convertToRoman(1004)</code> should return \"MIV\"');",
+        "assert.deepEqual(convertToRoman(1006), \"MVI\", 'message: <code>convertToRoman(1006)</code> should return \"MVI\"');",
+        "assert.deepEqual(convertToRoman(1023), \"MXXIII\", 'message: <code>convertToRoman(1023)</code> should return \"MXXIII\"');",
+        "assert.deepEqual(convertToRoman(2014), \"MMXIV\", 'message: <code>convertToRoman(2014)</code> should return \"MMXIV\"');",
+        "assert.deepEqual(convertToRoman(3999), \"MMMCMXCIX\", 'message: <code>convertToRoman(3999)</code> should return \"MMMCMXCIX\"');"
       ],
       "type": "bonfire",
       "MDNlinks": [
+        "Roman Numerals",
         "Array.prototype.splice()",
-        "String.prototype.replace()",
+        "Array.prototype.indexOf()",
         "Array.prototype.join()"
       ],
       "isRequired": true,
       "challengeType": 5,
       "translations": {
         "es": {
-          "title": "Buscar y reemplazar",
+          "title": "Convertior de números romanos",
           "description": [
-            "Crea una función que busque un fragmento en una frase dada y lo reemplace por otro fragmento, devolviendo la nueva frase.",
-            "El primer argumento es la frase en la que se ejecutará la búsqueda y el reemplazo",
-            "El segundo argumento es la palabra que se va a reemplazar",
-            "El tercer argumento es lo que reemplazará a la palabra indicada en el segundo argumento",
-            "NOTA: Debes respetar mayúsculas y minúsculas de la palabra original cuando ejecutes el reemplazo. Por ejemplo, si quisieras reemplazar la palabra \"Libro\" con la palabra \"perro\", deberías insertar en vez la palabra \"Perro\"",
+            "Convierte el número dado en numeral romano.",
+            "Todos los <a href=\"http://www.mathsisfun.com/roman-numerals.html\" target=\"_blank\">numerales romanos</a> en las respuestas deben estar en mayúsculas.",
             "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
           ]
         },
         "fr": {
-          "title": "Cherche et remplace",
+          "title": "Convertir en chiffres romains",
           "description": [
-            "Crée une fonction qui cherche et remplace une partie de la phrase en utilisant les arguments et renvoie la nouvelle phrase.",
-            "Le premier argument est la phrase à modifier.",
-            "Le deuxième argument est le mot à remplacer (avant).",
-            "Le troisième argument est le mot qui doit remplacer le deuxième argument (après).",
-            "NB: Tu dois respecter les majuscules ou miniscules du mot originel que tu remplaces. Par exemple, si tu veux remplacer le mot \"Livre\" par \"chien\", tu devras le remplacer par \"Chien\"",
+            "Convertis le nombre donné en chiffres romains.",
+            "Tous les <a href=\"http://www.mathsisfun.com/roman-numerals.html\" target=\"_blank\">chiffres romains</a> doivent être en lettres capitales.",
             "N'oublie pas d'utiliser <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
           ]
         }
       }
     },
+    {
+      "id": "56533eb9ac21ba0edf2244e2",
+      "title": "Caesars Cipher",
+      "description": [
+        "One of the simplest and most widely known <dfn>ciphers</dfn> is a <code>Caesar cipher</code>, also known as a <code>shift cipher</code>. In a <code>shift cipher</code> the meanings of the letters are shifted by some set amount.",
+        "A common modern use is the <a href=\"https://en.wikipedia.org/wiki/ROT13\" target='_blank'>ROT13</a> cipher, where the values of the letters are shifted by 13 places. Thus 'A' &harr; 'N', 'B' &harr;  'O' and so on.",
+        "Write a function which takes a <a href=\"https://en.wikipedia.org/wiki/ROT13\" target='_blank'>ROT13</a> encoded string as input and returns a decoded string.",
+        "All letters will be uppercase. Do not transform any non-alphabetic character (i.e. spaces, punctuation), but do pass them on.",
+        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
+      ],
+      "challengeSeed": [
+        "function rot13(str) { // LBH QVQ VG!",
+        "  ",
+        "  return str;",
+        "}",
+        "",
+        "// Change the inputs below to test",
+        "rot13(\"SERR PBQR PNZC\");"
+      ],
+      "tail": [
+        ""
+      ],
+      "solutions": [
+        "var lookup = {\n  'A': 'N','B': 'O','C': 'P','D': 'Q',\n  'E': 'R','F': 'S','G': 'T','H': 'U',\n  'I': 'V','J': 'W','K': 'X','L': 'Y',\n  'M': 'Z','N': 'A','O': 'B','P': 'C',\n  'Q': 'D','R': 'E','S': 'F','T': 'G',\n  'U': 'H','V': 'I','W': 'J','X': 'K',\n  'Y': 'L','Z': 'M' \n};\n\nfunction rot13(encodedStr) {\n  var codeArr = encodedStr.split(\"\");  // String to Array\n  var decodedArr = []; // Your Result goes here\n  // Only change code below this line\n  \n  decodedArr = codeArr.map(function(letter) {\n    if(lookup.hasOwnProperty(letter)) {\n      letter = lookup[letter];\n    }\n    return letter;\n  });\n\n  // Only change code above this line\n  return decodedArr.join(\"\"); // Array to String\n}"
+      ],
+      "tests": [
+        "assert(rot13(\"SERR PBQR PNZC\") === \"FREE CODE CAMP\", 'message: <code>rot13(\"SERR PBQR PNZC\")</code> should decode to <code>FREE CODE CAMP</code>');",
+        "assert(rot13(\"SERR CVMMN!\") === \"FREE PIZZA!\", 'message: <code>rot13(\"SERR CVMMN!\")</code> should decode to <code>FREE PIZZA!</code>');",
+        "assert(rot13(\"SERR YBIR?\") === \"FREE LOVE?\", 'message: <code>rot13(\"SERR YBIR?\")</code> should decode to <code>FREE LOVE?</code>');",
+        "assert(rot13(\"GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.\") === \"THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.\", 'message: <code>rot13(\"GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.\")</code> should decode to <code>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.</code>');"
+      ],
+      "type": "bonfire",
+      "MDNlinks": [
+        "String.prototype.charCodeAt()",
+        "String.fromCharCode()"
+      ],
+      "challengeType": 5,
+      "isRequired": true,
+      "releasedOn": "January 1, 2016",
+      "translations": {
+        "es": {
+          "title": "Cifrado César",
+          "description": [
+            "Uno de los <dfn>cifrados</dfn> más simples y ampliamente conocidos es el <code>cifrado César</code>, también llamado <code>cifrado por desplazamiento</code>. En un <code>cifrado por desplazamiento</code> los significados de las letras se desplazan por una cierta cantidad.",
+            "Un uso moderno común es el cifrado <a href=\"https://es.wikipedia.org/wiki/ROT13\" target='_blank'>ROT13</a> , donde los valores de las letras se desplazan 13 espacios. De esta forma 'A' &harr; 'N', 'B' &harr;  'O' y así.",
+            "Crea una función que tome una cadena de texto cifrada en <a href=\"https://es.wikipedia.org/wiki/ROT13\" target='_blank'>ROT13</a> como argumento y que devuelva la cadena de texto decodificada.",
+            "Todas las letras que se te pasen van a estar en mayúsculas. No transformes ningún caracter no-alfabético (por ejemplo: espacios, puntuación). Simplemente pásalos intactos.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
+          ]
+        },
+        "pt-br": {
+          "title": "Cifra de César",
+          "description": [
+            "Uma das mais simples e mais conhecidas <dfn>cifras</dfn> é a <code>cifra de César</code>, também conhecida como <code>cifra de troca</code>. Em uma <code>cifra de troca</code> os significados das letras são deslocados por um determinado valor.",
+            "Um uso moderno comum é a cifra <a href=\"https://en.wikipedia.org/wiki/ROT13\" target='_blank'>ROT13</a>, aonde os valores das letras são deslocados por 13 lugares. Logo 'A' &harr; 'N', 'B' &harr;  'O' e assim por diante.",
+            "Escreva uma função que recebe um texto criptografado com <a href=\"https://en.wikipedia.org/wiki/ROT13\" target='_blank'>ROT13</a> como entrada e retorna o texto desencriptado.",
+            "Todas as letras serão maiúsculas. Não transforme nenhum caracter não alfanuméricos (como espaços, pontuação), mas passe-os adiante.",
+            "Lembre-se de usar <a href=\"http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514\" target=\"_blank\">Ler-Pesquisar-Perguntar</a> se você ficar travado. Escreva seu próprio código."
+          ]
+        }
+      }
+    },
     {
       "id": "aa7697ea2477d1316795783b",
       "title": "Pig Latin",
@@ -378,6 +552,67 @@
         }
       }
     },
+    {
+      "id": "a0b5010f579e69b815e7c5d6",
+      "title": "Search and Replace",
+      "description": [
+        "Perform a search and replace on the sentence using the arguments provided and return the new sentence.",
+        "First argument is the sentence to perform the search and replace on.",
+        "Second argument is the word that you will be replacing (before).",
+        "Third argument is what you will be replacing the second argument with (after).",
+        "<strong>Note</strong><br> Preserve the case of the first character in the original word when you are replacing it. For example if you mean to replace the word \"Book\" with the word \"dog\", it should be replaced as \"Dog\"",
+        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
+      ],
+      "challengeSeed": [
+        "function myReplace(str, before, after) {",
+        "  return str;",
+        "}",
+        "",
+        "myReplace(\"A quick brown fox jumped over the lazy dog\", \"jumped\", \"leaped\");"
+      ],
+      "solutions": [
+        "function myReplace(str, before, after) {\n  if (before.charAt(0) === before.charAt(0).toUpperCase()) {\n    after = after.charAt(0).toUpperCase() + after.substring(1);\n  } else {\n    after = after.charAt(0).toLowerCase() + after.substring(1);\n  }\n  return str.replace(before, after);\n}"
+      ],
+      "tests": [
+        "assert.deepEqual(myReplace(\"Let us go to the store\", \"store\", \"mall\"), \"Let us go to the mall\", 'message: <code>myReplace(\"Let us go to the store\", \"store\", \"mall\")</code> should return \"Let us go to the mall\".');",
+        "assert.deepEqual(myReplace(\"He is Sleeping on the couch\", \"Sleeping\", \"sitting\"), \"He is Sitting on the couch\", 'message: <code>myReplace(\"He is Sleeping on the couch\", \"Sleeping\", \"sitting\")</code> should return \"He is Sitting on the couch\".');",
+        "assert.deepEqual(myReplace(\"This has a spellngi error\", \"spellngi\", \"spelling\"), \"This has a spelling error\", 'message: <code>myReplace(\"This has a spellngi error\", \"spellngi\", \"spelling\")</code> should return \"This has a spelling error\".');",
+        "assert.deepEqual(myReplace(\"His name is Tom\", \"Tom\", \"john\"), \"His name is John\", 'message: <code>myReplace(\"His name is Tom\", \"Tom\", \"john\")</code> should return \"His name is John\".');",
+        "assert.deepEqual(myReplace(\"Let us get back to more Coding\", \"Coding\", \"algorithms\"), \"Let us get back to more Algorithms\", 'message: <code>myReplace(\"Let us get back to more Coding\", \"Coding\", \"algorithms\")</code> should return \"Let us get back to more Algorithms\".');"
+      ],
+      "type": "bonfire",
+      "MDNlinks": [
+        "Array.prototype.splice()",
+        "String.prototype.replace()",
+        "Array.prototype.join()"
+      ],
+      "isRequired": true,
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Buscar y reemplazar",
+          "description": [
+            "Crea una función que busque un fragmento en una frase dada y lo reemplace por otro fragmento, devolviendo la nueva frase.",
+            "El primer argumento es la frase en la que se ejecutará la búsqueda y el reemplazo",
+            "El segundo argumento es la palabra que se va a reemplazar",
+            "El tercer argumento es lo que reemplazará a la palabra indicada en el segundo argumento",
+            "NOTA: Debes respetar mayúsculas y minúsculas de la palabra original cuando ejecutes el reemplazo. Por ejemplo, si quisieras reemplazar la palabra \"Libro\" con la palabra \"perro\", deberías insertar en vez la palabra \"Perro\"",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
+          ]
+        },
+        "fr": {
+          "title": "Cherche et remplace",
+          "description": [
+            "Crée une fonction qui cherche et remplace une partie de la phrase en utilisant les arguments et renvoie la nouvelle phrase.",
+            "Le premier argument est la phrase à modifier.",
+            "Le deuxième argument est le mot à remplacer (avant).",
+            "Le troisième argument est le mot qui doit remplacer le deuxième argument (après).",
+            "NB: Tu dois respecter les majuscules ou miniscules du mot originel que tu remplaces. Par exemple, si tu veux remplacer le mot \"Livre\" par \"chien\", tu devras le remplacer par \"Chien\"",
+            "N'oublie pas d'utiliser <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
+          ]
+        }
+      }
+    },
     {
       "id": "afd15382cdfb22c9efe8b7de",
       "title": "DNA Pairing",
@@ -487,62 +722,6 @@
         }
       }
     },
-    {
-      "id": "a77dbc43c33f39daa4429b4f",
-      "title": "Boo who",
-      "description": [
-        "Check if a value is classified as a boolean primitive. Return true or false.",
-        "Boolean primitives are true and false.",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
-      ],
-      "challengeSeed": [
-        "function booWho(bool) {",
-        "  // What is the new fad diet for ghost developers? The Boolean.",
-        "  return bool;",
-        "}",
-        "",
-        "booWho(null);"
-      ],
-      "solutions": [
-        "function booWho(bool) {\n  // What is the new fad diet for ghost developers? The Boolean.\n  return typeof bool === \"boolean\";\n}\n\nbooWho(null);"
-      ],
-      "tests": [
-        "assert.strictEqual(booWho(true), true, 'message: <code>booWho(true)</code> should return true.');",
-        "assert.strictEqual(booWho(false), true, 'message: <code>booWho(false)</code> should return true.');",
-        "assert.strictEqual(booWho([1, 2, 3]), false, 'message: <code>booWho([1, 2, 3])</code> should return false.');",
-        "assert.strictEqual(booWho([].slice), false, 'message: <code>booWho([].slice)</code> should return false.');",
-        "assert.strictEqual(booWho({ \"a\": 1 }), false, 'message: <code>booWho({ \"a\": 1 })</code> should return false.');",
-        "assert.strictEqual(booWho(1), false, 'message: <code>booWho(1)</code> should return false.');",
-        "assert.strictEqual(booWho(NaN), false, 'message: <code>booWho(NaN)</code> should return false.');",
-        "assert.strictEqual(booWho(\"a\"), false, 'message: <code>booWho(\"a\")</code> should return false.');",
-        "assert.strictEqual(booWho(\"true\"), false, 'message: <code>booWho(\"true\")</code> should return false.');",
-        "assert.strictEqual(booWho(\"false\"), false, 'message: <code>booWho(\"false\")</code> should return false.');"
-      ],
-      "type": "bonfire",
-      "MDNlinks": [
-        "Boolean Objects"
-      ],
-      "isRequired": true,
-      "challengeType": 5,
-      "translations": {
-        "es": {
-          "title": "¡Bu!",
-          "description": [
-            "Crea una función que verifique si el valor que se le pasa es de tipo booleano. Haz que la función devuelva true o false según corresponda.",
-            "Los primitivos booleanos primitivos son: true y false",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
-          ]
-        },
-        "fr": {
-          "title": "Boo !",
-          "description": [
-            "Crée une fonction qui vérifie qu'une valeur est de type booléen. Renvoie true ou false.",
-            "Les primitives booléennes sont true ou false.",
-            "N'oublie pas d'utiliser <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
-          ]
-        }
-      }
-    },
     {
       "id": "a105e963526e7de52b219be9",
       "title": "Sorted Union",
@@ -651,56 +830,6 @@
         }
       }
     },
-    {
-      "id": "a103376db3ba46b2d50db289",
-      "title": "Spinal Tap Case",
-      "description": [
-        "Convert a string to spinal case. Spinal case is all-lowercase-words-joined-by-dashes.",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
-      ],
-      "challengeSeed": [
-        "function spinalCase(str) {",
-        "  // \"It's such a fine line between stupid, and clever.\"",
-        "  // --David St. Hubbins",
-        "  return str;",
-        "}",
-        "",
-        "spinalCase('This Is Spinal Tap');"
-      ],
-      "solutions": [
-        "function spinalCase(str) {\n  // \"It's such a fine line between stupid, and clever.\"\n  // --David St. Hubbins\n  str = str.replace(/([a-z](?=[A-Z]))/g, '$1 ');\n  return str.toLowerCase().replace(/\\ |\\_/g, '-');\n}"
-      ],
-      "tests": [
-        "assert.deepEqual(spinalCase(\"This Is Spinal Tap\"), \"this-is-spinal-tap\", 'message: <code>spinalCase(\"This Is Spinal Tap\")</code> should return <code>\"this-is-spinal-tap\"</code>.');",
-        "assert.strictEqual(spinalCase('thisIsSpinalTap'), \"this-is-spinal-tap\", 'message: <code>spinalCase(\"thisIsSpinal<wbr>Tap\")</code> should return <code>\"this-is-spinal-tap\"</code>.');",
-        "assert.strictEqual(spinalCase(\"The_Andy_Griffith_Show\"), \"the-andy-griffith-show\", 'message: <code>spinalCase(\"The_Andy_<wbr>Griffith_Show\")</code> should return <code>\"the-andy-griffith-show\"</code>.');",
-        "assert.strictEqual(spinalCase(\"Teletubbies say Eh-oh\"), \"teletubbies-say-eh-oh\", 'message: <code>spinalCase(\"Teletubbies say Eh-oh\")</code> should return <code>\"teletubbies-say-eh-oh\"</code>.');",
-        "assert.strictEqual(spinalCase(\"AllThe-small Things\"), \"all-the-small-things\", 'message: <code>spinalCase(\"AllThe-small Things\")</code> should return <code>\"all-the-small-things\"</code>.');"
-      ],
-      "type": "bonfire",
-      "MDNlinks": [
-        "RegExp",
-        "String.prototype.replace()"
-      ],
-      "isRequired": true,
-      "challengeType": 5,
-      "translations": {
-        "es": {
-          "title": "separado-por-guiones",
-          "description": [
-            "Convierte la cadena de texto que se te pasa al formato spinal case. Spinal case es cuando escribes todas las palabras en-minúsculas-unidas-por-guiones.",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
-          ]
-        },
-        "fr": {
-          "title": "Trait d'union",
-          "description": [
-            "Convertis la chaîne de caractères en spinal case. Spinal case correspond au bas-de-casse-séparé-par-des-tirets.",
-            "N'oublie pas d'utiliser <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
-          ]
-        }
-      }
-    },
     {
       "id": "a5229172f011153519423690",
       "title": "Sum All Odd Fibonacci Numbers",
@@ -862,51 +991,6 @@
         }
       }
     },
-    {
-      "id": "a6e40f1041b06c996f7b2406",
-      "title": "Finders Keepers",
-      "description": [
-        "Create a function that looks through an array (first argument) and returns the first element in the array that passes a truth test (second argument). If no element passes the test, return undefined.",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
-      ],
-      "challengeSeed": [
-        "function findElement(arr, func) {",
-        "  var num = 0;",
-        "  return num;",
-        "}",
-        "",
-        "findElement([1, 2, 3, 4], function(num){ return num % 2 === 0; });"
-      ],
-      "solutions": [
-        "function findElement(arr, func) {\n  var num;\n  arr.some(function(e) {\n    if (func(e)) {\n      num = e;\n      return true;\n    }\n  });\n  return num;\n}"
-      ],
-      "tests": [
-        "assert.strictEqual(findElement([1, 3, 5, 8, 9, 10], function(num) { return num % 2 === 0; }), 8, 'message: <code>findElement([1, 3, 5, 8, 9, 10], function(num) { return num % 2 === 0; })</code> should return 8.');",
-        "assert.strictEqual(findElement([1, 3, 5, 9], function(num) { return num % 2 === 0; }), undefined, 'message: <code>findElement([1, 3, 5, 9], function(num) { return num % 2 === 0; })</code> should return undefined.');"
-      ],
-      "type": "bonfire",
-      "MDNlinks": [
-        "Array.prototype.filter()"
-      ],
-      "isRequired": true,
-      "challengeType": 5,
-      "translations": {
-        "es": {
-          "title": "Buscando la verdad",
-          "description": [
-            "Crea una función que busque dentro de un vector (primer argumento) y que devuelva el primer elemento que pase una prueba de verdad (segundo argumento).",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
-          ]
-        },
-        "fr": {
-          "title": "Détecteur de mensonges",
-          "description": [
-            "Crée une fonction qui parcourt un tableau (premier argument) et renvoie le premier élément du tableau qui passe le test (second argument).",
-            "N'oublie pas d'utiliser <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Lire-Chercher-Demander</a> si tu es bloqué. Essaye de trouver un partenaire. Écris ton propre code."
-          ]
-        }
-      }
-    },
     {
       "id": "a5deed1811a43193f9f1c841",
       "title": "Drop it",
@@ -1177,6 +1261,152 @@
           ]
         }
       }
+    },
+    {
+      "id": "a2f1d72d9b908d0bd72bb9f6",
+      "title": "Make a Person",
+      "description": [
+        "Fill in the object constructor with the following methods below:",
+        "<blockquote>getFirstName()\ngetLastName()\ngetFullName()\nsetFirstName(first)\nsetLastName(last)\nsetFullName(firstAndLast)</blockquote>",
+        "Run the tests to see the expected output for each method.",
+        "The methods that take an argument must accept only one argument and it has to be a string.",
+        "These methods must be the only available means of interacting with the object.",
+        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
+      ],
+      "challengeSeed": [
+        "var Person = function(firstAndLast) {",
+        "    return firstAndLast;",
+        "};",
+        "",
+        "var bob = new Person('Bob Ross');",
+        "bob.getFullName();"
+      ],
+      "solutions": [
+        "var Person = function(firstAndLast) {\n\n  var firstName, lastName;\n\n  function updateName(str) {    \n    firstName = str.split(\" \")[0];\n    lastName = str.split(\" \")[1];    \n  }\n\n  updateName(firstAndLast);\n\n  this.getFirstName = function(){\n    return firstName;\n  };\n  \n  this.getLastName = function(){\n    return lastName;\n  };\n  \n  this.getFullName = function(){\n    return firstName + \" \" + lastName;\n  };\n  \n  this.setFirstName = function(str){\n    firstName = str;\n  };\n  \n\n  this.setLastName = function(str){\n    lastName = str;\n  };\n  \n  this.setFullName = function(str){\n    updateName(str);\n  };\n};\n\nvar bob = new Person('Bob Ross');\nbob.getFullName();"
+      ],
+      "tests": [
+        "assert.deepEqual(Object.keys(bob).length, 6, 'message: <code>Object.keys(bob).length</code> should return 6.');",
+        "assert.deepEqual(bob instanceof Person, true, 'message: <code>bob instanceof Person</code> should return true.');",
+        "assert.deepEqual(bob.firstName, undefined, 'message: <code>bob.firstName</code> should return undefined.');",
+        "assert.deepEqual(bob.lastName, undefined, 'message: <code>bob.lastName</code> should return undefined.');",
+        "assert.deepEqual(bob.getFirstName(), 'Bob', 'message: <code>bob.getFirstName()</code> should return \"Bob\".');",
+        "assert.deepEqual(bob.getLastName(), 'Ross', 'message: <code>bob.getLastName()</code> should return \"Ross\".');",
+        "assert.deepEqual(bob.getFullName(), 'Bob Ross', 'message: <code>bob.getFullName()</code> should return \"Bob Ross\".');",
+        "assert.strictEqual((function () { bob.setFirstName(\"Haskell\"); return bob.getFullName(); })(), 'Haskell Ross', 'message: <code>bob.getFullName()</code> should return \"Haskell Ross\" after <code>bob.setFirstName(\"Haskell\")</code>.');",
+        "assert.strictEqual((function () { var _bob=new Person('Haskell Ross'); _bob.setLastName(\"Curry\"); return _bob.getFullName(); })(), 'Haskell Curry', 'message: <code>bob.getFullName()</code> should return \"Haskell Curry\" after <code>bob.setLastName(\"Curry\")</code>.');",
+        "assert.strictEqual((function () { bob.setFullName(\"Haskell Curry\"); return bob.getFullName(); })(), 'Haskell Curry', 'message: <code>bob.getFullName()</code> should return \"Haskell Curry\" after <code>bob.setFullName(\"Haskell Curry\")</code>.');",
+        "assert.strictEqual((function () { bob.setFullName(\"Haskell Curry\"); return bob.getFirstName(); })(), 'Haskell', 'message: <code>bob.getFirstName()</code> should return \"Haskell\" after <code>bob.setFullName(\"Haskell Curry\")</code>.');",
+        "assert.strictEqual((function () { bob.setFullName(\"Haskell Curry\"); return bob.getLastName(); })(), 'Curry', 'message: <code>bob.getLastName()</code> should return \"Curry\" after <code>bob.setFullName(\"Haskell Curry\")</code>.');"
+      ],
+      "type": "bonfire",
+      "MDNlinks": [
+        "Closures",
+        "Details of the Object Model"
+      ],
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Crea una Persona",
+          "description": [
+            "Completa el constructor de objetos con los métodos especificados a continuación:",
+            "<blockquote>getFirstName()\ngetLastName()\ngetFullName()\nsetFirstName(first)\nsetLastName(last)\nsetFullName(firstAndLast)</blockquote>",
+            "Ejecuta las pruebas para ver el resultado esperado de cada método.",
+            "Las funciones que aceptan argumentos deben aceptar sólo uno, y este tiene que ser una cadena.",
+            "Estos métodos deben ser el único medio para interactuar con el objeto.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
+          ]
+        },
+        "it": {
+          "title": "Crea una Persona",
+          "description": [
+            "Completa il costruttore dell'oggetto con i metodi specificati qui sotto:",
+            "<blockquote>getFirstName()\ngetLastName()\ngetFullName()\nsetFirstName(first)\nsetLastName(last)\nsetFullName(firstAndLast)</blockquote>",
+            "Esegui i test per vedere il risultato atteso per ogni metodo.",
+            "I metodi che richiedono un argomento devono accettarne solo uno e questo deve essere una stringa.",
+            "Questi metodi devono essere l'unica maniera possibile di interagire con l'oggetto.",
+            "Ricorda di usare <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leggi-Cerca-Chiedi</a> se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te."
+          ]
+        },
+        "pt-br": {
+          "title": "Faça uma Pessoa",
+          "description": [
+            "Preencha o contrutor do objeto com seguintes métodos:",
+            "<blockquote>getFirstName()\ngetLastName()\ngetFullName()\nsetFirstName(first)\nsetLastName(last)\nsetFullName(firstAndLast)</blockquote>",
+            "Rode os testes para ver o resultado esperado de cada método.",
+            "Os métodos que recebem um argumento deve aceitar somente um argumento e deve ser uma string.",
+            "Esses métodos devem ser o único meio de interação com o objeto.",
+            "Lembre-se de usar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Ler-Procurar-Perguntar</a> se você ficar preso. Tente programar em par. Escreva seu próprio código."
+          ]
+        }
+      }
+    },
+    {
+      "id": "af4afb223120f7348cdfc9fd",
+      "title": "Map the Debris",
+      "description": [
+        "Return a new array that transforms the element's average altitude into their orbital periods.",
+        "The array will contain objects in the format <code>{name: 'name', avgAlt: avgAlt}</code>.",
+        "You can read about orbital periods <a href=\"http://en.wikipedia.org/wiki/Orbital_period\" target='_blank'>on wikipedia</a>.",
+        "The values should be rounded to the nearest whole number. The body being orbited is Earth.",
+        "The radius of the earth is 6367.4447 kilometers, and the GM value of earth is 398600.4418 km<sup>3</sup>s<sup>-2</sup>.",
+        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
+      ],
+      "challengeSeed": [
+        "function orbitalPeriod(arr) {",
+        "  var GM = 398600.4418;",
+        "  var earthRadius = 6367.4447;",
+        "  return arr;",
+        "}",
+        "",
+        "orbitalPeriod([{name : \"sputnik\", avgAlt : 35873.5553}]);"
+      ],
+      "solutions": [
+        "function orbitalPeriod(arr) {\n  var GM = 398600.4418;\n  var earthRadius = 6367.4447;\n  var TAU = 2 * Math.PI; \n  return arr.map(function(obj) {\n    return {\n      name: obj.name,\n      orbitalPeriod: Math.round(TAU * Math.sqrt(Math.pow(obj.avgAlt+earthRadius, 3)/GM))\n    };\n  });\n}\n\norbitalPeriod([{name : \"sputkin\", avgAlt : 35873.5553}]);\n"
+      ],
+      "tests": [
+        "assert.deepEqual(orbitalPeriod([{name : \"sputnik\", avgAlt : 35873.5553}]), [{name: \"sputnik\", orbitalPeriod: 86400}], 'message: <code>orbitalPeriod([{name : \"sputnik\", avgAlt : 35873.5553}])</code> should return <code>[{name: \"sputnik\", orbitalPeriod: 86400}]</code>.');",
+        "assert.deepEqual(orbitalPeriod([{name: \"iss\", avgAlt: 413.6}, {name: \"hubble\", avgAlt: 556.7}, {name: \"moon\", avgAlt: 378632.553}]), [{name : \"iss\", orbitalPeriod: 5557}, {name: \"hubble\", orbitalPeriod: 5734}, {name: \"moon\", orbitalPeriod: 2377399}], 'message: <code>orbitalPeriod([{name: \"iss\", avgAlt: 413.6}, {name: \"hubble\", avgAlt: 556.7}, {name: \"moon\", avgAlt: 378632.553}])</code> should return <code>[{name : \"iss\", orbitalPeriod: 5557}, {name: \"hubble\", orbitalPeriod: 5734}, {name: \"moon\", orbitalPeriod: 2377399}]</code>.');"
+      ],
+      "type": "bonfire",
+      "MDNlinks": [
+        "Math.pow()"
+      ],
+      "challengeType": 5,
+      "translations": {
+        "es": {
+          "title": "Ubica los Escombros",
+          "description": [
+            "Crea una función que devuelva un nuevo arreglo que transforme la altitud promedio del elemento en su período orbital.",
+            "El arreglo debe contener objetos en el formato <code>{name: 'name', avgAlt: avgAlt}</code>.",
+            "Puedes leer acerca de períodos orbitales <a href=\"http://en.wikipedia.org/wiki/Orbital_period\" target='_blank'>en wikipedia</a>.",
+            "Los valores deben estar redondeados al número entero más próximo. El cuerpo orbitado es la Tierra",
+            "El radio de la Tierra es 6367.4447 kilómetros, y el valor GM del planeta es de 398600.4418 km<sup>3</sup>s<sup>-2</sup>.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
+          ]
+        },
+        "it": {
+          "title": "Mappa i Detriti",
+          "description": [
+            "Ritorna un nuovo array che trasformi l'altitudine media degli elementi nel loro periodo orbitale.",
+            "L'array conterrà oggetti in formato <code>{name: 'name', avgAlt: avgAlt}</code>.",
+            "Puoi leggere riguardo i periodi orbitali <a href=\"http://en.wikipedia.org/wiki/Orbital_period\" target='_blank'>su wikipedia</a>.",
+            "I valori devono essere arrotondati al numero intero più vicino. Il corpo attorno a cui orbitano gli elementi è la Terra.",
+            "Il raggio della Terra è di 6367.4447 kilometri, e il valore GM della Terra è di 398600.4418 km<sup>3</sup>s<sup>-2</sup>.",
+            "Ricorda di usare <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leggi-Cerca-Chiedi</a> se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te."
+          ]
+        },
+        "pt-br": {
+          "title": "Mapeie o Lixo espacial",
+          "description": [
+            "Retorne uma nova matriz que transforma a altitude média do elemento em seu período orbital.",
+            "A matriz vai conter objetos no formato <code>{name: 'name', avgAlt: avgAlt}</code>.",
+            "Você pode ler sobre período orbital <a href=\"https://pt.wikipedia.org/wiki/Per%C3%ADodo_orbital\" target='_blank'>na wikipedia</a>.",
+            "Os valores devem ser arredondados para número inteiro mais próximo. O corpe sendo orbitado é a Terra.",
+            "O raio da terra é 6367.4447 quilômetros, e o valor GM da terra é 398600.4418 km<sup>3</sup>s<sup>-2</sup>.",
+            "Lembre-se de usar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Ler-Procurar-Perguntar</a> se você ficar preso. Tente programar em par. Escreva seu próprio código."
+          ]
+        }
+      }
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/seed/challenges/01-front-end-development-certification/front-end-development-certificate.json b/seed/challenges/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-certificate.json
similarity index 78%
rename from seed/challenges/01-front-end-development-certification/front-end-development-certificate.json
rename to seed/challenges/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-certificate.json
index c7c9362b594578..59ebe53f9f5d7a 100644
--- a/seed/challenges/01-front-end-development-certification/front-end-development-certificate.json
+++ b/seed/challenges/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-certificate.json
@@ -1,16 +1,16 @@
 {
-  "name": "Claim Your Front End Development Certificate",
+  "name": "Claim Your JavaScript Algorithms and Data Structures Certificate",
   "order": 13,
   "time": "5 minutes",
   "challenges": [
     {
-      "id": "561add10cb82ac38a17513be",
-      "title": "Claim Your Front End Development Certificate",
+      "id": "587d7dac367417b2b2512b71",
+      "title": "Claim Your JavaScript Algorithms and Data Structures Certificate",
       "description": [
         [
           "//i.imgur.com/k8btNUB.jpg",
-          "An image of our Front End Development Certificate",
-          "This challenge will give you your verified Front End Development Certificate. Before we issue your certificate, we must verify that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
+          "An image of our JavaScript Algorithms and Data Structures Certificate",
+          "This challenge will give you your verified JavaScript Algorithms and Data Structures Certificate. Before we issue your certificate, we must verify that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
           ""
         ],
         [
@@ -28,7 +28,7 @@
         [
           "//i.imgur.com/Q5Za9U6.jpg",
           "An image of the word \"Congratulations\"",
-          "Congratulations! We've added your Front End Development Certificate to your portfolio page. Unless you choose to hide your solutions, this certificate will remain publicly visible and verifiable.",
+          "Congratulations! We've added your JavaScript Algorithms and Data Structures Certificate to your portfolio page. Unless you choose to hide your solutions, this certificate will remain publicly visible and verifiable.",
           ""
         ]
       ],
@@ -192,50 +192,6 @@
         {
           "id": "a97fd23d9b809dac9921074f",
           "title": "Arguments Optional"
-        },
-        {
-          "id": "bd7158d8c442eddfbeb5bd1f",
-          "title": "Get Set for Ziplines"
-        },
-        {
-          "id": "bd7158d8c242eddfaeb5bd13",
-          "title": "Build a Personal Portfolio Webpage"
-        },
-        {
-          "id": "bd7158d8c442eddfaeb5bd13",
-          "title": "Build a Random Quote Machine"
-        },
-        {
-          "id": "bd7158d8c442eddfaeb5bd0f",
-          "title": "Build a Pomodoro Clock"
-        },
-        {
-          "id": "bd7158d8c442eddfaeb5bd17",
-          "title": "Build a JavaScript Calculator"
-        },
-        {
-          "id": "bd7158d8c442eddfaeb5bd10",
-          "title": "Show the Local Weather"
-        },
-        {
-          "id": "bd7158d8c442eddfaeb5bd1f",
-          "title": "Use the Twitch.tv JSON API"
-        },
-        {
-          "id": "bd7158d8c442eddfaeb5bd18",
-          "title": "Stylize Stories on Camper News"
-        },
-        {
-          "id": "bd7158d8c442eddfaeb5bd19",
-          "title": "Build a Wikipedia Viewer"
-        },
-        {
-          "id": "bd7158d8c442eedfaeb5bd1c",
-          "title": "Build a Tic Tac Toe Game"
-        },
-        {
-          "id": "bd7158d8c442eddfaeb5bd1c",
-          "title": "Build a Simon Game"
         }
       ],
       "type": "Waypoint",
@@ -273,4 +229,4 @@
       }
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/seed/challenges/02-javascript-algorithms-and-data-structures/object-oriented-programming.json b/seed/challenges/02-javascript-algorithms-and-data-structures/object-oriented-programming.json
new file mode 100644
index 00000000000000..5ef6159d29c9a8
--- /dev/null
+++ b/seed/challenges/02-javascript-algorithms-and-data-structures/object-oriented-programming.json
@@ -0,0 +1,1437 @@
+{
+  "name": "Object Oriented Programming",
+  "order": 6,
+  "time": "5 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "587d7dac367417b2b2512b72",
+      "title": "Introduction to the Object Oriented Programming Challenges",
+      "description": [
+        [
+          "",
+          "",
+          "At its core, software development solves a problem or achieves a result with computation. The software development process first defines a problem, then presents a solution. Object oriented programming is one of several major approaches to the software development process.<br><br>As its name implies, object oriented programming organizes code into object definitions. These are sometimes called classes, and they group together data with related behavior. The data is an object's attributes, and the behavior (or functions) are methods.<br><br>The object structure makes it flexible within a program. Objects can transfer information by calling and passing data to another object's methods. Also, new classes can receive, or inherit, all the features from a base or parent class. This helps to reduce repeated code.<br><br>Your choice of programming approach depends on a few factors. These include the type of problem, as well as how you want to structure your data and algorithms. This section covers object oriented programming principles in JavaScript.",
+          ""
+        ]
+      ],
+      "releasedOn": "",
+      "challengeSeed": [],
+      "tests": [],
+      "type": "Waypoint",
+      "challengeType": 7,
+      "isRequired": false,
+      "titleEs": "",
+      "descriptionEs": [
+        []
+      ],
+      "titleFr": "",
+      "descriptionFr": [
+        []
+      ],
+      "titleDe": "",
+      "descriptionDe": [
+        []
+      ]
+    },
+    {
+      "id": "587d7dac367417b2b2512b73",
+      "title": "Create a Basic JavaScript Object",
+      "description": [
+        "Think about things people see everyday, like cars, shops, and birds. These are all <code>objects</code>: tangible things people can observe and interact with.",
+        "What are some qualities of these <code>objects</code>? A car has wheels. Shops sell items. Birds have wings.",
+        "These qualities, or <code>properties</code>, define what makes up an <code>object</code>. Note that similar <code>objects</code> share the same <code>properties</code>, but may have different values for those <code>properties</code>. For example, all cars have wheels, but not all cars have the same number of wheels.",
+        "<code>Objects</code> in JavaScript are used to model real-world objects, giving them <code>properties</code> and behavior just like their real-world counterparts. Here's an example using these concepts to create a <code>duck</code> <code>object</code>:",
+        "<blockquote>let duck = {<br>&nbsp;&nbsp;name: \"Aflac\",<br>&nbsp;&nbsp;numLegs: 2<br>};</blockquote>",
+        "This <code>duck</code> <code>object</code> has two property/value pairs: a <code>name</code> of \"Aflac\" and a <code>numLegs</code> of 2.",
+        "<h4>Instructions</h4>",
+        "Create a <code>dog</code> <code>object</code> with <code>name</code> and <code>numLegs</code> properties, and set them to a string and a number, respectively."
+      ],
+      "challengeSeed": [
+        "let dog = {",
+        "  ",
+        "};"
+      ],
+      "tests": [
+        "assert(typeof(dog) === 'object', 'message: <code>dog</code> should be an <code>object</code>.');",
+        "assert(typeof(dog.name) === 'string', 'message: <code>dog</code> should have a <code>name</code> property set to a <code>string</code>.');",
+        "assert(typeof(dog.numLegs) === 'number', 'message: <code>dog</code> should have a <code>numLegs</code> property set to a <code>number</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7dac367417b2b2512b74",
+      "title": "Use Dot Notation to Access the Properties of an Object",
+      "description": [
+        "The last challenge created an <code>object</code> with various <code>properties</code>, now you'll see how to access the values of those <code>properties</code>. Here's an example:",
+        "<blockquote>let duck = {<br>&nbsp;&nbsp;name: \"Aflac\",<br>&nbsp;&nbsp;numLegs: 2<br>};<br>console.log(duck.name);<br>// This prints \"Aflac\" to the console</blockquote>",
+        "Dot notation is used on the <code>object</code> name, <code>duck</code>, followed by the name of the <code>property</code>, <code>name</code>, to access the value of \"Aflac\".",
+        "<h4>Instructions</h4>",
+        "Print both <code>properties</code> of the <code>dog</code> object below to your console."
+      ],
+      "challengeSeed": [
+        "let dog = {",
+        "  name: \"Spot\",",
+        "  numLegs: 4",
+        "};",
+        "// Add your code below this line",
+        "",
+        ""
+      ],
+      "tests": [
+        "assert(code.match(/console\\.log\\(dog\\.name\\)/g), 'message: Your code should use a <code>console.log</code> statement to print the value for the <code>name</code> property of the <code>dog</code> object.');",
+        "assert(code.match(/console\\.log\\(dog\\.numLegs\\)/g), 'message: Your code should use a <code>console.log</code> statement to print the value for the <code>numLegs</code> property of the <code>dog</code> object.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7dad367417b2b2512b75",
+      "title": "Create a Method on an Object",
+      "description": [
+        "<code>Objects</code> can have a special type of <code>property</code>, called a <code>method</code>.",
+        "<code>Methods</code> are <code>properties</code> that are functions. This adds different behavior to an <code>object</code>. Here is the <code>duck</code> example with a method:",
+        "<blockquote>let duck = {<br>&nbsp;&nbsp;name: \"Aflac\",<br>&nbsp;&nbsp;numLegs: 2,<br>&nbsp;&nbsp;sayName: function() {return \"The name of this duck is \" + duck.name + \".\";}<br>};<br>duck.sayName();<br>// Returns \"The name of this duck is Aflac.\"</blockquote>",
+        "The example adds the <code>sayName</code> <code>method</code>, which is a function that returns a sentence giving the name of the <code>duck</code>.",
+        "Notice that the <code>method</code> accessed the <code>name</code> property in the return statement using <code>duck.name</code>. The next challenge will cover another way to do this.",
+        "<h4>Instructions</h4>",
+        "Using the <code>dog</code> <code>object</code>, give it a method called <code>sayLegs</code>. The method should return the sentence \"This dog has 4 legs.\""
+      ],
+      "challengeSeed": [
+        "let dog = {",
+        "  name: \"Spot\",",
+        "  numLegs: 4,",
+        "  ",
+        "};",
+        "",
+        "dog.sayLegs();"
+      ],
+      "tests": [
+        "assert(typeof(dog.sayLegs) === 'function', 'message: <code>dog.sayLegs()</code> should be a function.');",
+        "assert(dog.sayLegs() === 'This dog has 4 legs.', 'message: <code>dog.sayLegs()</code> should return the given string - note that punctuation and spacing matter.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7dad367417b2b2512b76",
+      "title": "Make Code More Reusable with This",
+      "description": [
+        "The last challenge introduced a <code>method</code> to the <code>duck</code> object. It used <code>duck.name</code> dot notation to access the value for the <code>name</code> property within the return statement:",
+        "<code>sayName: function() {return \"The name of this duck is \" + duck.name + \".\";}</code>",
+        "While this is a valid way to access the object's property, there is a pitfall here. If the variable name changes, any code referencing the original name would need to be updated as well. In a short object definition, it isn't a problem, but if an object has many references to its properties there is a greater chance for error.",
+        "A way to avoid these issues is with the <code>this</code> keyword:",
+        "<blockquote>let duck = {<br>&nbsp;&nbsp;name: \"Aflac\",<br>&nbsp;&nbsp;numLegs: 2,<br>&nbsp;&nbsp;sayName: function() {return \"The name of this duck is \" + this.name + \".\";}<br>};</blockquote>",
+        "<code>This</code> is a deep topic, and the above example is only one way to use it. In the current context, <code>this</code> refers to the object that the method is associated with: <code>duck</code>.",
+        "If the object's name is changed to <code>mallard</code>, it is not necessary to find all the references to <code>duck</code> in the code. It makes the code reusable and easier to read.",
+        "<h4>Instructions</h4>",
+        "Modify the <code>dog.sayLegs</code> method to remove any references to <code>dog</code>. Use the <code>duck</code> example for guidance."
+      ],
+      "challengeSeed": [
+        "",
+        "let dog = {",
+        "  name: \"Spot\",",
+        "  numLegs: 4,",
+        "  sayLegs: function() {return \"This dog has \" + dog.numLegs + \" legs.\";}",
+        "};",
+        "",
+        "dog.sayLegs();"
+      ],
+      "tests": [
+        "assert(dog.sayLegs() === 'This dog has 4 legs.', 'message: <code>dog.sayLegs()</code> should return the given string.');",
+        "assert(code.match(/this\\.numLegs/g), 'message: Your code should use the <code>this</code> keyword to access the <code>numLegs</code> property of <code>dog</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7dad367417b2b2512b77",
+      "title": "Define a Constructor Function",
+      "description": [
+        "<code>Constructors</code> are functions that create new objects. They define properties and behaviors that will belong to the new object. Think of them as a blueprint for the creation of new objects.",
+        "Here is an example of a <code>constructor</code>:",
+        "<blockquote>function Bird() {<br>&nbsp;&nbsp;this.name = \"Albert\";<br>&nbsp;&nbsp;this.color = \"blue\";<br>&nbsp;&nbsp;this.numLegs = 2;<br>}</blockquote>",
+        "This <code>constructor</code> defines a <code>Bird</code> object with properties <code>name</code>, <code>color</code>, and <code>numLegs</code> set to Albert, blue, and 2, respectively.",
+        "<code>Constructors</code> follow a few conventions:",
+        "<ul>",
+        "<li><code>Constructors</code> are defined with a capitalized name to distinguish them from other functions that are not <code>constructors</code>.</li>",
+        "<li><code>Constructors</code> use the keyword <code>this</code> to set properties of the object they will create. Inside the <code>constructor</code>, <code>this</code> refers to the new object it will create.</li>",
+        "<li><code>Constructors</code> define properties and behaviors instead of returning a value as other functions might.</li>",
+        "</ul>",
+        "<h4>Instructions</h4>",
+        "Create a <code>constructor</code>, <code>Dog</code>, with properties <code>name</code>, <code>color</code>, and <code>numLegs</code> that are set to a string, a string, and a number, respectively."
+      ],
+      "challengeSeed": [
+        "",
+        "",
+        ""
+      ],
+      "tests": [
+        "assert(typeof (new Dog()).name === 'string', 'message: <code>Dog</code> should have a <code>name</code> property set to a string.');",
+        "assert(typeof (new Dog()).color === 'string', 'message: <code>Dog</code> should have a <code>color</code> property set to a string.');",
+        "assert(typeof (new Dog()).numLegs === 'number', 'message: <code>Dog</code> should have a <code>numLegs</code> property set to a number.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7dad367417b2b2512b78",
+      "title": "Use a Constructor to Create Objects",
+      "description": [
+        "Here's the <code>Bird</code> constructor from the previous challenge:",
+        "<blockquote>function Bird() {<br>&nbsp;&nbsp;this.name = \"Albert\";<br>&nbsp;&nbsp;this.color  = \"blue\";<br>&nbsp;&nbsp;this.numLegs = 2;<br>&nbsp;&nbsp;// \"this\" inside the constructor always refers to the object being created<br>}<br><br>let blueBird = new Bird();</blockquote>",
+        "Notice that the <code>new</code> operator is used when calling a constructor. This tells JavaScript to create a new <code>instance</code> of <code>Bird</code> called <code>blueBird</code>. Without the <code>new</code> operator, <code>this</code> inside the constructor would not point to the newly created object, giving unexpected results.",
+        "Now <code>blueBird</code> has all the properties defined inside the <code>Bird</code> constructor:",
+        "<blockquote>blueBird.name; // => Albert<br>blueBird.color; // => blue<br>blueBird.numLegs; // => 2</blockquote>",
+        "Just like any other object, its properties can be accessed and modified:",
+        "<blockquote>blueBird.name = 'Elvira';<br>blueBird.name; // => Elvira</blockquote>",
+        "<h4>Instructions</h4>",
+        "Use the <code>Dog</code> constructor from the last lesson to create a new instance of <code>Dog</code>, assigning it to a variable <code>hound</code>."
+      ],
+      "challengeSeed": [
+        "function Dog() {",
+        "  this.name = \"Rupert\";",
+        "  this.color = \"brown\";",
+        "  this.numLegs = 4;",
+        "}",
+        "// Add your code below this line",
+        "",
+        ""
+      ],
+      "tests": [
+        "assert(hound instanceof Dog, 'message: <code>hound</code> should be created using the <code>Dog</code> constructor.');",
+        "assert(code.match(/new/g), 'message: Your code should use the <code>new</code> operator to create an <code>instance</code> of <code>Dog</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7dae367417b2b2512b79",
+      "title": "Extend Constructors to Receive Arguments",
+      "description": [
+        "The <code>Bird</code> and <code>Dog</code> constructors from last challenge worked well. However, notice that all <code>Birds</code> that are created with the <code>Bird</code> constructor are automatically named Albert, are blue in color, and have two legs. What if you want birds with different values for name and color? It's possible to change the properties of each bird manually but that would be a lot of work:",
+        "<blockquote>let swan = new Bird();<br>swan.name = \"Carlos\";<br>swan.color = \"white\";</blockquote>",
+        "Suppose you were writing a program to keep track of hundreds or even thousands of different birds in an aviary. It would take a lot of time to create all the birds, then change the properties to different values for every one.",
+        "To more easily create different <code>Bird</code> objects, you can design your Bird constructor to accept parameters:",
+        "<blockquote>function Bird(name, color) {<br>&nbsp;&nbsp;this.name = name;<br>&nbsp;&nbsp;this.color = color;<br>&nbsp;&nbsp;this.numLegs = 2;<br>}</blockquote>",
+        "Then pass in the values as arguments to define each unique bird into the <code>Bird</code> constructor:",
+        "<code>let cardinal = new Bird(\"Bruce\", \"red\");</code>",
+        "This gives a new instance of <code>Bird</code> with name and color properties set to Bruce and red, respectively. The <code>numLegs</code> property is still set to 2.",
+        "The <code>cardinal</code> has these properties:",
+        "<blockquote>cardinal.name // => Bruce<br>cardinal.color // => red<br>cardinal.numLegs // => 2</blockquote>",
+        "The constructor is more flexible. It's now possible to define the properties for each <code>Bird</code> at the time it is created, which is one way that JavaScript constructors are so useful. They group objects together based on shared characteristics and behavior and define a blueprint that automates their creation.",
+        "<h4>Instructions</h4>",
+        "Create another <code>Dog</code> constructor. This time, set it up to take the parameters <code>name</code> and <code>color</code>, and have the property <code>numLegs</code> fixed at 4. Then create a new <code>Dog</code> saved in a variable <code>terrier</code>. Pass it two strings as arguments for the <code>name</code> and <code>color</code> properties."
+      ],
+      "challengeSeed": [
+        "function Dog() {",
+        "  ",
+        "}",
+        "",
+        ""
+      ],
+      "tests": [
+        "assert((new Dog('Clifford')).name === 'Clifford', 'message: <code>Dog</code> should receive an argument for <code>name</code>.');",
+        "assert((new Dog('Clifford', 'yellow')).color === 'yellow', 'message: <code>Dog</code> should receive an argument for <code>color</code>.');",
+        "assert((new Dog('Clifford')).numLegs === 4, 'message: <code>Dog</code> should have property <code>numLegs</code> set to 4.');",
+        "assert(terrier instanceof Dog, 'message: <code>terrier</code> should be created using the <code>Dog</code> constructor.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7dae367417b2b2512b7a",
+      "title": "Verify an Object's Constructor with instanceof",
+      "description": [
+        "Anytime a constructor function creates a new object, that object is said to be an <code>instance</code> of its constructor. JavaScript gives a convenient way to verify this with the <code>instanceof</code> operator. <code>instanceof</code> allows you to compare an object to a constructor, returning <code>true</code> or <code>false</code> based on whether or not that object was created with the constructor. Here's an example:",
+        "<blockquote>let Bird = function(name, color) {<br>&nbsp;&nbsp;this.name = name;<br>&nbsp;&nbsp;this.color = color;<br>&nbsp;&nbsp;this.numLegs = 2;<br>}<br><br>let crow = new Bird(\"Alexis\", \"black\");<br><br>crow instanceof Bird; // => true</blockquote>",
+        "If an object is created without using a constructor, <code>instanceof</code> will verify that it is not an instance of that constructor:",
+        "<blockquote>let canary = {<br>&nbsp;&nbsp;name: \"Mildred\",<br>&nbsp;&nbsp;color: \"Yellow\",<br>&nbsp;&nbsp;numLegs: 2<br>};<br><br>canary instanceof Bird; // => false</blockquote>",
+        "<h4>Instructions</h4>",
+        "Create a new instance of the <code>House</code> constructor, calling it <code>myHouse</code> and passing a number of bedrooms. Then, use <code>instanceof</code> to verify that it is an instance of <code>House</code>."
+      ],
+      "challengeSeed": [
+        "let House = function(numBedrooms) {",
+        "  this.numBedrooms = numBedrooms;",
+        "}",
+        "// Add your code below this line",
+        "",
+        "",
+        ""
+      ],
+      "tests": [
+        "assert(typeof myHouse.numBedrooms === 'number', 'message: <code>myHouse</code> should have a <code>numBedrooms</code> attribute set to a number.');",
+        "assert(editor.getValue().match(/(myHouse instanceof House)/), 'message: Be sure to verify that <code>myHouse</code> is an instance of <code>House</code> using the <code>instanceof</code> operator.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7dae367417b2b2512b7b",
+      "title": "Understand Own Properties",
+      "description": [
+        "In the following example, the <code>Bird</code> constructor defines two properties: <code>name</code> and <code>numLegs</code>:",
+        "<blockquote>function Bird(name) {<br>&nbsp;&nbsp;this.name  = name;<br>&nbsp;&nbsp;this.numLegs = 2;<br>}<br><br>let duck = new Bird(\"Donald\");<br>let canary = new Bird(\"Tweety\");</blockquote>",
+        "<code>name</code> and <code>numLegs</code> are called <code>own</code> properties, because they are defined directly on the instance object. That means that <code>duck</code> and <code>canary</code> each has its own separate copy of these properties.",
+        "In fact every instance of <code>Bird</code> will have its own copy of these properties.",
+        "The following code adds all of the <code>own</code> properties of <code>duck</code> to the array <code>ownProps</code>:",
+        "<blockquote>let ownProps = [];<br><br>for (let property in duck) {<br>&nbsp;&nbsp;if(duck.hasOwnProperty(property)) {<br>&nbsp;&nbsp;&nbsp;&nbsp;ownProps.push(property);<br>&nbsp;&nbsp;}<br>}<br><br>console.log(ownProps); // prints [ \"name\", \"numLegs\" ]</blockquote>",
+        "<h4>Instructions</h4>",
+        "Add the <code>own</code> properties of <code>canary</code> to the array <code>ownProps</code>."
+      ],
+      "challengeSeed": [
+        "function Bird(name) {",
+        "  this.name = name;",
+        "  this.numLegs = 2;",
+        "}",
+        "",
+        "let canary = new Bird(\"Tweety\");",
+        "let ownProps = [];",
+        "// Add your code below this line",
+        "",
+        "",
+        ""
+      ],
+      "tests": [
+        "assert(ownProps.includes('name') && ownProps.includes('numLegs'), 'message: <code>ownProps</code> should include the values <code>\"numLegs\"</code> and <code>\"name\"</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7dae367417b2b2512b7c",
+      "title": "Use Prototype Properties to Reduce Duplicate Code",
+      "description": [
+        "Since <code>numLegs</code> will probably have the same value for all instances of <code>Bird</code>, you essentially have a duplicated variable <code>numLegs</code> inside each <code>Bird</code> instance.",
+        "This may not be an issue when there are only two instances, but imagine if there are millions of instances. That would be a lot of duplicated variables.",
+        "A better way is to use <code>Bird’s</code> <code>prototype</code>. The <code>prototype</code> is an object that is shared among ALL instances of <code>Bird</code>. Here's how to add <code>numLegs</code> to the <code>Bird prototype</code>:",
+        "<blockquote>Bird.prototype.numLegs = 2;</blockquote>",
+        "Now all instances of <code>Bird</code> have the <code>numLegs</code> property.",
+        "<blockquote>console.log(duck.numLegs);  // prints 2<br>console.log(canary.numLegs);  // prints 2</blockquote>",
+        "Since all instances automatically have the properties on the <code>prototype</code>, think of a <code>prototype</code> as a \"recipe\" for creating objects.",
+        "Note that the <code>prototype</code> for <code>duck</code> and <code>canary</code> is part of the <code>Bird</code> constructor as <code>Bird.prototype</code>. Nearly every object in JavaScript has a <code>prototype</code> property which is part of the constructor function that created it.",
+        "<h4>Instructions</h4>",
+        "Add a <code>numLegs</code> property to the <code>prototype</code> of <code>Dog</code>"
+      ],
+      "challengeSeed": [
+        "function Dog(name) {",
+        "  this.name = name;",
+        "}",
+        "",
+        "let beagle = new Dog(\"Snoopy\");",
+        "// Add your code below this line",
+        "",
+        "",
+        ""
+      ],
+      "tests": [
+        "assert(beagle.numLegs !== undefined, 'message: <code>beagle</code> should have a <code>numLegs</code> property.');",
+        "assert(typeof(beagle.numLegs) === 'number' , 'message: <code>beagle.numLegs</code> should be a number.');",
+        "assert(beagle.hasOwnProperty('numLegs') === false, 'message: <code>numLegs</code> should be a <code>prototype</code> property not an <code>own</code> property.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7daf367417b2b2512b7d",
+      "title": "Iterate Over All Properties",
+      "description": [
+        "You have now seen two kinds of properties: <code>own</code> properties and <code>prototype</code> properties. <code>Own</code> properties are defined directly on the object instance itself. And <code>prototype</code> properties are defined on the <code>prototype</code>.",
+        "<blockquote>function Bird(name) {<br>&nbsp;&nbsp;this.name = name;  //own property<br>}<br><br>Bird.prototype.numLegs = 2; // prototype property<br><br>let duck = new Bird(\"Donald\");</blockquote>",
+        "Here is how you add <code>duck’s</code> <code>own</code> properties to the array <code>ownProps</code> and <code>prototype</code> properties to the array <code>prototypeProps</code>:",
+        "<blockquote>let ownProps = [];<br>let prototypeProps = [];<br><br>for (let property in duck) {<br>&nbsp;&nbsp;if(duck.hasOwnProperty(property)) {<br>&nbsp;&nbsp;&nbsp;&nbsp;ownProps.push(property);<br>&nbsp;&nbsp;} else {<br>&nbsp;&nbsp;&nbsp;&nbsp;prototypeProps.push(property);<br>&nbsp;&nbsp;}<br>}<br><br>console.log(ownProps); // prints [\"name\"]<br>console.log(prototypeProps); // prints [\"numLegs\"]</blockquote>",
+        "<h4>Instructions</h4>",
+        "Add all of the <code>own</code> properties of <code>beagle</code> to the array <code>ownProps</code>. Add all of the <code>prototype</code> properties of <code>Dog</code> to the array <code>prototypeProps</code>."
+      ],
+      "challengeSeed": [
+        "function Dog(name) {",
+        "  this.name = name;",
+        "}",
+        "",
+        "Dog.prototype.numLegs = 4;",
+        "",
+        "let beagle = new Dog(\"Snoopy\");",
+        "",
+        "let ownProps = [];",
+        "let prototypeProps = [];",
+        "",
+        "// Add your code below this line ",
+        "",
+        "",
+        ""
+      ],
+      "tests": [
+        "assert(ownProps.includes('name'), 'message: The <code>ownProps</code> array should include <code>\"name\"</code>.');",
+        "assert(prototypeProps.includes('numLegs'), 'message: The <code>prototypeProps</code> array should include <code>\"numLegs\"</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7daf367417b2b2512b7e",
+      "title": "Understand the Constructor Property",
+      "description": [
+        "There is a special <code>constructor</code> property located on the object instances <code>duck</code> and <code>beagle</code> that were created in the previous challenges:",
+        "<blockquote>let duck = new Bird();<br>let beagle = new Dog();<br><br>console.log(duck.constructor === Bird);  //prints true<br>console.log(beagle.constructor === Dog);  //prints true</blockquote>",
+        "Note that the <code>constructor</code> property is the name of the constructor function that created the instance.",
+        "The advantage of the <code>constructor</code> property is that it's possible to check for this property to find out what kind of object it is. Here's an example of how this could be used:",
+        "<blockquote>function joinBirdFraternity(candidate) {<br>&nbsp;&nbsp;if (candidate.constructor === Bird) {<br>&nbsp;&nbsp;&nbsp;&nbsp;return true;<br>&nbsp;&nbsp;} else {<br>&nbsp;&nbsp;&nbsp;&nbsp;return false;<br>&nbsp;&nbsp;}<br>}</blockquote>",
+        "<strong>Note</strong><br>Since the <code>constructor</code> property can be overwritten (which will be covered in the next two challenges) it’s generally better to use the <code>instanceof</code> method to check the type of an object.",
+        "<h4>Instructions</h4>",
+        "Write a <code>joinDogFraternity</code> function that takes a <code>candidate</code> parameter and returns <code>true</code> if the candidate is a <code>Dog</code> and returns <code>false</code> otherwise."
+      ],
+      "challengeSeed": [
+        "function Dog(name) {",
+        "  this.name = name;",
+        "}",
+        "",
+        "// Add your code below this line",
+        "function joinDogFraternity(candidate) {",
+        "  ",
+        "}",
+        ""
+      ],
+      "tests": [
+        "assert(typeof(joinDogFraternity) === 'function', 'message: <code>joinDogFraternity</code> should be defined as a function.');",
+        "assert(joinDogFraternity(new Dog(\"\")) === true, 'message: <code>joinDogFraternity</code> should return true if<code>candidate</code> is an instance of <code>Dog</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7daf367417b2b2512b7f",
+      "title": "Change the Prototype to a New Object",
+      "description": [
+        "Up until now you have been adding properties to the <code>prototype</code> individually:",
+        "<blockquote>Bird.prototype.numLegs = 2;</blockquote>",
+        "This becomes tedious after more than a few properties.",
+        "<blockquote>Bird.prototype.eat = function() {<br>&nbsp;&nbsp;console.log(\"nom nom nom\");<br>}<br><br>Bird.prototype.describe = function() {<br>&nbsp;&nbsp;console.log(\"My name is \" + this.name);<br>}</blockquote>",
+        "A more efficient way is to set the <code>prototype</code> to a new object that already contains the properties. This way, the properties are added all at once:",
+        "<blockquote>Bird.prototype = {<br>&nbsp;&nbsp;numLegs: 2, <br>&nbsp;&nbsp;eat: function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"nom nom nom\");<br>&nbsp;&nbsp;},<br>&nbsp;&nbsp;describe = function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"My name is \" + this.name);<br>&nbsp;&nbsp;}<br>};</blockquote>",
+        "<h4>Instructions</h4>",
+        "Add three properties <code>numLegs</code>, <code>eat</code>, and <code>describe</code> to the <code>prototype</code> of <code>Dog</code> by setting the <code>prototype</code> to a new object. The properties can be set to any values."
+      ],
+      "challengeSeed": [
+        "function Dog(name) {",
+        "  this.name = name; ",
+        "}",
+        "",
+        "Dog.prototype = {",
+        "  // Add your code below this line",
+        "  ",
+        "};"
+      ],
+      "tests": [
+        "assert((/Dog\\.prototype\\s*?=\\s*?{/).test(code), 'message: <code>Dog.prototype</code> should be set to a new object.');",
+        "assert(Dog.prototype.numLegs !== undefined, 'message: <code>Dog.prototype</code> should have the property <code>numLegs</code>.');",
+        "assert(Dog.prototype.eat !== undefined, 'message: <code>Dog.prototype</code> should have the property <code>eat</code>.'); ",
+        "assert(Dog.prototype.describe !== undefined, 'message: <code>Dog.prototype</code> should have the property <code>describe</code>.'); "
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7daf367417b2b2512b80",
+      "title": "Remember to Set the Constructor Property when Changing the Prototype",
+      "description": [
+        "There is one crucial side effect of manually setting the <code>prototype</code> to a new object. It erased the constructor property! The code in the previous challenge would print the following for <code>duck</code>:",
+        "<blockquote>console.log(duck.constructor)<br>// prints ‘undefined’ - Oops!</blockquote>",
+        "To fix this, whenever a prototype is manually set to a new object, remember to define the constructor property:",
+        "<blockquote>Bird.prototype = {<br>&nbsp;&nbsp;constructor: Bird, // define the constructor property<br>&nbsp;&nbsp;numLegs: 2,<br>&nbsp;&nbsp;eat: function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"nom nom nom\");<br>&nbsp;&nbsp;},<br>&nbsp;&nbsp;describe: function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"My name is \" + this.name); <br>&nbsp;&nbsp;}<br>};</blockquote>",
+        "<h4>Instructions</h4>",
+        "Define the constructor property on the <code>Dog</code> <code>prototype</code>."
+      ],
+      "challengeSeed": [
+        "function Dog(name) {",
+        "  this.name = name; ",
+        "}",
+        "",
+        "// Modify the code below this line",
+        "Dog.prototype = {",
+        "  ",
+        "  numLegs: 2, ",
+        "  eat: function() {",
+        "    console.log(\"nom nom nom\"); ",
+        "  }, ",
+        "  describe: function() {",
+        "    console.log(\"My name is \" + this.name); ",
+        "  }",
+        "};"
+      ],
+      "tests": [
+        "assert(Dog.prototype.constructor === Dog, 'message: <code>Dog.prototype</code> should set the <code>constructor</code> property.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db0367417b2b2512b81",
+      "title": "Understand Where an Object’s Prototype Comes From",
+      "description": [
+        "Just like people inherit genes from their parents, an object inherits its <code>prototype</code> directly from the constructor function that created it. For example, here the <code>Bird</code> constructor creates the <code>duck</code> object:",
+        "<blockquote>function Bird(name) {<br>&nbsp;&nbsp;this.name = name;<br>}<br><br>let duck = new Bird(\"Donald\");</blockquote>",
+        "<code>duck</code> inherits its <code>prototype</code> from the <code>Bird</code> constructor function. You can show this relationship with the <code>isPrototypeOf</code> method:",
+        "<blockquote>Bird.prototype.isPrototypeOf(duck);<br>// returns true</blockquote>",
+        "<h4>Instructions</h4>",
+        "Use <code>isPrototypeOf</code> to check the <code>prototype</code> of <code>beagle</code>."
+      ],
+      "challengeSeed": [
+        "function Dog(name) {",
+        "  this.name = name;",
+        "}",
+        "",
+        "let beagle = new Dog(\"Snoopy\");",
+        "",
+        "// Add your code below this line",
+        "",
+        ""
+      ],
+      "tests": [
+        "assert(/Dog\\.prototype\\.isPrototypeOf\\(beagle\\)/.test(code), 'message: Show that <code>Dog.prototype</code> is the <code>prototype</code> of <code>beagle</code>');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db0367417b2b2512b82",
+      "title": "Understand the Prototype Chain",
+      "description": [
+        "All objects in JavaScript (with a few exceptions) have a <code>prototype</code>. Also, an object’s <code>prototype</code> itself is an object.",
+        "<blockquote>function Bird(name) {<br>&nbsp;&nbsp;this.name = name;<br>}<br><br>typeof Bird.prototype; // => object</blockquote>",
+        "Because a <code>prototype</code> is an object, a <code>prototype</code> can have its own <code>prototype</code>! In this case, the <code>prototype</code> of <code>Bird.prototype</code> is <code>Object.prototype</code>:",
+        "<blockquote>Object.prototype.isPrototypeOf(Bird.prototype);<br>// returns true</blockquote>",
+        "How is this useful? You may recall the <code>hasOwnProperty</code> method from a previous challenge:",
+        "<blockquote>let duck = new Bird(\"Donald\");<br>duck.hasOwnProperty(\"name\"); // => true</blockquote>",
+        "The <code>hasOwnProperty</code> method is defined in <code>Object.prototype</code>, which can be accessed by <code>Bird.prototype</code>, which can then be accessed by <code>duck</code>. This is an example of the <code>prototype</code> chain.",
+        "In this <code>prototype</code> chain, <code>Bird</code> is the <code>supertype</code> for <code>duck</code>, while <code>duck</code> is the <code>subtype</code>. <code>Object</code> is a <code>supertype</code> for both <code>Bird</code> and <code>duck</code>.",
+        "<code>Object</code> is a <code>supertype</code> for all objects in JavaScript. Therefore, any object can use the <code>hasOwnProperty</code> method.",
+        "<h4>Instructions</h4>",
+        "Modify the code to show the correct prototype chain."
+      ],
+      "challengeSeed": [
+        "function Dog(name) {",
+        "  this.name = name;",
+        "}",
+        "",
+        "let beagle = new Dog(\"Snoopy\");",
+        "",
+        "Dog.prototype.isPrototypeOf(beagle);  // => true",
+        "",
+        "// Fix the code below so that it evaluates to true",
+        "???.isPrototypeOf(Dog.prototype);",
+        ""
+      ],
+      "tests": [
+        "assert(/Object\\.prototype\\.isPrototypeOf/.test(code), \"message: Your code should show that <code>Object.prototype</code> is the prototype of <code>Dog.prototype</code>\");"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db0367417b2b2512b83",
+      "title": "Use Inheritance So You Don't Repeat Yourself",
+      "description": [
+        "There's a principle in programming called <code>Don't Repeat Yourself (DRY)</code>. The reason repeated code is a problem is because any change requires fixing code in multiple places. This usually means more work for programmers and more room for errors.",
+        "Notice in the example below that the <code>describe</code> method is shared by <code>Bird</code> and <code>Dog</code>:",
+        "<blockquote>Bird.prototype = {<br>&nbsp;&nbsp;constructor: Bird,<br>&nbsp;&nbsp;describe: function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"My name is \" + this.name);<br>&nbsp;&nbsp;}<br>};<br><br>Dog.prototype = {<br>&nbsp;&nbsp;constructor: Dog,<br>&nbsp;&nbsp;describe: function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"My name is \" + this.name);<br>&nbsp;&nbsp;}<br>};</blockquote>",
+        "The <code>describe</code> method is repeated in two places. The code can be edited to follow the <code>DRY</code> principle by creating a <code>supertype</code> (or parent) called <code>Animal</code>:",
+        "<blockquote>function Animal() { };<br><br>Animal.prototype = {<br>&nbsp;&nbsp;constructor: Animal, <br>&nbsp;&nbsp;describe: function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"My name is \" + this.name);<br>&nbsp;&nbsp;}<br>};</blockquote>",
+        "Since <code>Animal</code> includes the <code>describe</code> method, you can remove it from <code>Bird</code> and <code>Dog</code>:",
+        "<blockquote>Bird.prototype = {<br>&nbsp;&nbsp;constructor: Bird<br>};<br><br>Dog.prototype = {<br>&nbsp;&nbsp;constructor: Dog<br>};</blockquote>",
+        "<h4>Instructions</h4>",
+        "The <code>eat</code> method is repeated in both <code>Cat</code> and <code>Bear</code>. Edit the code in the spirit of <code>DRY</code> by moving the <code>eat</code> method to the <code>Animal</code> <code>supertype</code>."
+      ],
+      "challengeSeed": [
+        "function Cat(name) {",
+        "  this.name = name; ",
+        "}",
+        "",
+        "Cat.prototype = {",
+        "  constructor: Cat, ",
+        "  eat: function() {",
+        "    console.log(\"nom nom nom\");",
+        "  }",
+        "};",
+        "",
+        "function Bear(name) {",
+        "  this.name = name; ",
+        "}",
+        "",
+        "Bear.prototype = {",
+        "  constructor: Bear, ",
+        "  eat: function() {",
+        "    console.log(\"nom nom nom\");",
+        "  }",
+        "};",
+        "",
+        "function Animal() { }",
+        "",
+        "Animal.prototype = {",
+        "  constructor: Animal,",
+        "  ",
+        "};"
+      ],
+      "tests": [
+        "assert(Animal.prototype.hasOwnProperty('eat'), 'message: <code>Animal.prototype</code> should have the <code>eat</code> property.');",
+        "assert(!(Bear.prototype.hasOwnProperty('eat')), 'message: <code>Bear.prototype</code> should not have the <code>eat</code> property.');",
+        "assert(!(Cat.prototype.hasOwnProperty('eat')), 'message: <code>Cat.prototype</code> should not have the <code>eat</code> property.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db0367417b2b2512b84",
+      "title": "Inherit Behaviors from a Supertype",
+      "description": [
+        "In the previous challenge, you created a <code>supertype</code> called <code>Animal</code> that defined behaviors shared by all animals:",
+        "<blockquote>function Animal() { }<br>Animal.prototype.eat = function() {<br>&nbsp;&nbsp;console.log(\"nom nom nom\");<br>};</blockquote>",
+        "This and the next challenge will cover how to reuse <code>Animal's</code> methods inside <code>Bird</code> and <code>Dog</code> without defining them again. It uses a technique called <code>inheritance</code>.",
+        "This challenge covers the first step: make an instance of the <code>supertype</code> (or parent).",
+        "You already know one way to create an instance of <code>Animal</code> using the <code>new</code> operator:",
+        "<blockquote>let animal = new Animal();</blockquote>",
+        "There are some disadvantages when using this syntax for <code>inheritance</code>, which are too complex for the scope of this challenge. Instead, here's an alternative approach without those disadvantages:",
+        "<blockquote>let animal = Object.create(Animal.prototype);</blockquote>",
+        "<code>Object.create(obj)</code> creates a new object, and sets <code>obj</code> as the new object's <code>prototype</code>. Recall that the <code>prototype</code> is like the \"recipe\" for creating an object. By setting the <code>prototype</code> of <code>animal</code> to be <code>Animal's</code> <code>prototype</code>, you are effectively giving the <code>animal</code> instance the same \"recipe\" as any other instance of <code>Animal</code>.",
+        "<blockquote>animal.eat(); // prints \"nom nom nom\"<br>animal instanceof Animal; // => true</blockquote>",
+        "<h4>Instructions</h4>",
+        "Use <code>Object.create</code> to make two instances of <code>Animal</code> named <code>duck</code> and <code>beagle</code>."
+      ],
+      "challengeSeed": [
+        "function Animal() { }",
+        "",
+        "Animal.prototype = {",
+        "  constructor: Animal, ",
+        "  eat: function() {",
+        "    console.log(\"nom nom nom\");",
+        "  }",
+        "};",
+        "",
+        "// Add your code below this line",
+        "",
+        "let duck",
+        "let beagle",
+        "",
+        "duck.eat(); // Should print \"nom nom nom\"",
+        "beagle.eat(); // Should print \"nom nom nom\" "
+      ],
+      "tests": [
+        "assert(typeof duck !== \"undefined\", 'message: The <code>duck</code> variable should be defined.');",
+        "assert(typeof beagle !== \"undefined\", 'message: The <code>beagle</code> variable should be defined.');",
+        "assert(duck instanceof Animal, 'message: <code>duck</code> should have a <code>prototype</code> of <code>Animal</code>.');",
+        "assert(beagle instanceof Animal, 'message: <code>beagle</code> should have a <code>prototype</code> of <code>Animal</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db1367417b2b2512b85",
+      "title": "Set the Child's Prototype to an Instance of the Parent",
+      "description": [
+        "In the previous challenge you saw the first step for inheriting behavior from the <code>supertype</code> (or parent) <code>Animal</code>: making a new instance of <code>Animal</code>.",
+        "This challenge covers the next step: set the <code>prototype</code> of the <code>subtype</code> (or child) -- in this case, <code>Bird</code> -- to be an instance of <code>Animal</code>.",
+        "<blockquote>Bird.prototype = Object.create(Animal.prototype);</blockquote>",
+        "Remember that the <code>prototype</code> is like the \"recipe\" for creating an object. In a way, the recipe for <code>Bird</code> now includes all the key \"ingredients\" from <code>Animal</code>.",
+        "<blockquote>let duck = new Bird(\"Donald\");<br>duck.eat(); // prints \"nom nom nom\"</blockquote>",
+        "<code>duck</code> inherits all of <code>Animal's</code> properties, including the <code>eat</code> method.",
+        "<h4>Instructions</h4>",
+        "Modify the code so that instances of <code>Dog</code> inherit from <code>Animal</code>."
+      ],
+      "challengeSeed": [
+        "function Animal() { }",
+        "",
+        "Animal.prototype = {",
+        "  constructor: Animal,",
+        "  eat: function() {",
+        "    console.log(\"nom nom nom\");",
+        "  }",
+        "};",
+        "",
+        "function Dog() { }",
+        "",
+        "// Add your code below this line",
+        "",
+        "",
+        "let beagle = new Dog();",
+        "beagle.eat();  // Should print \"nom nom nom\""
+      ],
+      "tests": [
+        "assert(Animal.prototype.isPrototypeOf(Dog.prototype), 'message: <code>Dog.prototype</code> should be an instance of <code>Animal</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db1367417b2b2512b86",
+      "title": "Reset an Inherited Constructor Property",
+      "description": [
+        "When an object inherits its <code>prototype</code> from another object, it also inherits the <code>supertype’s</code> constructor property.",
+        "Here's an example:",
+        "<blockquote>function Bird() { }<br>Bird.prototype = Object.create(Animal.prototype);<br>let duck = new Bird();<br>duck.constructor // function Animal(){...}</blockquote>",
+        "But <code>duck</code> and all instances of <code>Bird</code> should show that they were constructed by <code>Bird</code> and not <code>Animal</code>. To do so, you can manually set <code>Bird's</code> constructor property to the <code>Bird</code> object:",
+        "<blockquote>Bird.prototype.constructor = Bird;<br>duck.constructor // function Bird(){...}</blockquote>",
+        "<h4>Instructions</h4>",
+        "Fix the code so <code>duck.constructor</code> and <code>beagle.constructor</code> return their respective constructors."
+      ],
+      "challengeSeed": [
+        "function Animal() { }",
+        "function Bird() { }",
+        "function Dog() { }",
+        "",
+        "Bird.prototype = Object.create(Animal.prototype);",
+        "Dog.prototype = Object.create(Animal.prototype);",
+        "",
+        "// Add your code below this line",
+        "",
+        "",
+        "",
+        "let duck = new Bird();",
+        "let beagle = new Dog();"
+      ],
+      "tests": [
+        "assert(Animal.prototype.isPrototypeOf(Bird.prototype), 'message: <code>Bird.prototype</code> should be an instance of <code>Animal</code>.');",
+        "assert(duck.constructor === Bird, 'message: <code>duck.constructor</code> should return <code>Bird</code>.');",
+        "assert(Animal.prototype.isPrototypeOf(Dog.prototype), 'message: <code>Dog.prototype</code> should be an instance of <code>Animal</code>.');",
+        "assert(beagle.constructor === Dog, 'message: <code>beagle.constructor</code> should return <code>Dog</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db1367417b2b2512b87",
+      "title": "Add Methods After Inheritance",
+      "description": [
+        "A constructor function that inherits its <code>prototype</code> object from a <code>supertype</code> constructor function can still have its own methods in addition to inherited methods.",
+        "For example, <code>Bird</code> is a constructor that inherits its <code>prototype</code> from <code>Animal</code>:",
+        "<blockquote>function Animal() { }<br>Animal.prototype.eat = function() {<br>&nbsp;&nbsp;console.log(\"nom nom nom\");<br>};<br>function Bird() { }<br>Bird.prototype = Object.create(Animal.prototype);<br>Bird.prototype.constructor = Bird;</blockquote>",
+        "In addition to what is inherited from <code>Animal</code>, you want to add behavior that is unique to <code>Bird</code> objects. Here, <code>Bird</code> will get a <code>fly()</code> function. Functions are added to <code>Bird's</code> <code>prototype</code> the same way as any constructor function:",
+        "<blockquote>Bird.prototype.fly = function() {<br>&nbsp;&nbsp;console.log(\"I'm flying!\");<br>};</blockquote>",
+        "Now instances of <code>Bird</code> will have both <code>eat()</code> and <code>fly()</code> methods:",
+        "<blockquote>let duck = new Bird();<br>duck.eat(); // prints \"nom nom nom\"<br>duck.fly(); // prints \"I'm flying!\"</blockquote>",
+        "<h4>Instructions</h4>",
+        "Add all necessary code so the <code>Dog</code> object inherits from <code>Animal</code> and the <code>Dog's</code> <code>prototype</code> constructor is set to Dog. Then add a <code>bark()</code> method to the <code>Dog</code> object so that <code>beagle</code> can both <code>eat()</code> and <code>bark()</code>. The <code>bark()</code> method should print \"Woof!\" to the console."
+      ],
+      "challengeSeed": [
+        "function Animal() { }",
+        "Animal.prototype.eat = function() { console.log(\"nom nom nom\"); };",
+        "",
+        "function Dog() { }",
+        "",
+        "// Add your code below this line",
+        "",
+        "",
+        "",
+        "",
+        "// Add your code above this line",
+        "",
+        "let beagle = new Dog();",
+        "",
+        "beagle.eat(); // Should print \"nom nom nom\"",
+        "beagle.bark(); // Should print \"Woof!\""
+      ],
+      "tests": [
+        "assert(typeof Animal.prototype.bark == \"undefined\", 'message: <code>Animal</code> should not respond to the <code>bark()</code> method.');",
+        "assert(typeof Dog.prototype.eat == \"function\", 'message: <code>Dog</code> should inherit the <code>eat()</code> method from <code>Animal</code>.');",
+        "assert(Dog.prototype.hasOwnProperty('bark'), 'message: <code>Dog</code> should have the <code>bark()</code> method as an <code>own</code> property.');",
+        "assert(beagle instanceof Animal, 'message: <code>beagle</code> should be an <code>instanceof</code> <code>Animal</code>.');",
+        "assert(beagle.constructor === Dog, 'message: The constructor for <code>beagle</code> should be set to <code>Dog</code>.');"
+      ],
+      "solutions": [],
+      "hints": [
+        "Objects inherit methods from other objects by cloning their prototype. The Object.create method will come in handy, and don't forget to reset the constructor property afterward!"
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db1367417b2b2512b88",
+      "title": "Override Inherited Methods",
+      "description": [
+        "In previous lessons, you learned that an object can inherit its behavior (methods) from another object by cloning its <code>prototype</code> object:",
+        "<blockquote>ChildObject.prototype = Object.create(ParentObject.prototype);</blockquote>",
+        "Then the <code>ChildObject</code> received its own methods by chaining them onto its <code>prototype</code>:",
+        "<blockquote>ChildObject.prototype.methodName = function() {...};</blockquote>",
+        "It's possible to override an inherited method. It's done the same way - by adding a method to <code>ChildObject.prototype</code> using the same method name as the one to override.",
+        "Here's an example of <code>Bird</code> overriding the <code>eat()</code> method inherited from <code>Animal</code>:",
+        "<blockquote>function Animal() { }<br>Animal.prototype.eat = function() {<br>&nbsp;&nbsp;return \"nom nom nom\";<br>};<br>function Bird() { }<br><br>// Inherit all methods from Animal<br>Bird.prototype = Object.create(Animal.prototype);<br><br>// Bird.eat() overrides Animal.eat()<br>Bird.prototype.eat = function() {<br>&nbsp;&nbsp;return \"peck peck peck\";<br>};</blockquote>",
+        "If you have an instance <code>let duck = new Bird();</code> and you call <code>duck.eat()</code>, this is how JavaScript looks for the method on <code>duck’s</code> <code>prototype</code> chain:",
+        "1. duck => Is eat() defined here? No.",
+        "2. Bird => Is eat() defined here? => Yes. Execute it and stop searching.",
+        "3. Animal => eat() is also defined, but JavaScript stopped searching before reaching this level.",
+        "4. Object => JavaScript stopped searching before reaching this level.",
+        "<h4>Instructions</h4>",
+        "Override the <code>fly()</code> method for <code>Penguin</code> so that it returns \"Alas, this is a flightless bird.\""
+      ],
+      "challengeSeed": [
+        "function Bird() { }",
+        "",
+        "Bird.prototype.fly = function() { return \"I am flying!\"; };",
+        "",
+        "function Penguin() { }",
+        "Penguin.prototype = Object.create(Bird.prototype);",
+        "Penguin.prototype.constructor = Penguin;",
+        "",
+        "// Add your code below this line",
+        "",
+        "",
+        "",
+        "// Add your code above this line",
+        "",
+        "let penguin = new Penguin();",
+        "console.log(penguin.fly());"
+      ],
+      "tests": [
+        "assert(penguin.fly() === \"Alas, this is a flightless bird.\", 'message: <code>penguin.fly()</code> should return the string \"Alas, this is a flightless bird.\"');",
+        "assert((new Bird()).fly() === \"I am flying!\", 'message: The <code>bird.fly()</code> method should return \"I am flying!\"');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db2367417b2b2512b89",
+      "title": "Use a Mixin to Add Common Behavior Between Unrelated Objects",
+      "description": [
+        "As you have seen, behavior is shared through inheritance. However, there are cases when inheritance is not the best solution. Inheritance does not work well for unrelated objects like <code>Bird</code> and <code>Airplane</code>. They can both fly, but a <code>Bird</code> is not a type of <code>Airplane</code> and vice versa.",
+        "For unrelated objects, it's better to use <code>mixins</code>. A <code>mixin</code> allows other objects to use a collection of functions.",
+        "<blockquote>let flyMixin = function(obj) {<br>&nbsp;&nbsp;obj.fly = function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Flying, wooosh!\");<br>&nbsp;&nbsp;}<br>};</blockquote>",
+        "The <code>flyMixin</code> takes any object and gives it the <code>fly</code> method.",
+        "<blockquote>let bird = {<br>&nbsp;&nbsp;name: \"Donald\",<br>&nbsp;&nbsp;numLegs: 2<br>};<br><br>let plane = {<br>&nbsp;&nbsp;model: \"777\",<br>&nbsp;&nbsp;numPassengers: 524<br>};<br><br>flyMixin(bird);<br>flyMixin(plane);</blockquote>",
+        "Here <code>bird</code> and <code>plane</code> are passed into <code>flyMixin</code>, which then assigns the <code>fly</code> function to each object. Now <code>bird</code> and <code>plane</code> can both fly:",
+        "<blockquote>bird.fly(); // prints \"Flying, wooosh!\"<br>plane.fly(); // prints \"Flying, wooosh!\"</blockquote>",
+        "Note how the <code>mixin</code> allows for the same <code>fly</code> method to be reused by unrelated objects <code>bird</code> and <code>plane</code>.",
+        "<h4>Instructions</h4>",
+        "Create a <code>mixin</code> named <code>glideMixin</code> that defines a method named <code>glide</code>. Then use the <code>glideMixin</code> to give both <code>bird</code> and <code>boat</code> the ability to glide."
+      ],
+      "challengeSeed": [
+        "let bird = {",
+        "  name: \"Donald\",",
+        "  numLegs: 2",
+        "};",
+        "",
+        "let boat = {",
+        "  name: \"Warrior\",",
+        "  type: \"race-boat\"",
+        "};",
+        "",
+        "// Add your code below this line",
+        "",
+        "",
+        "",
+        "",
+        "",
+        ""
+      ],
+      "tests": [
+        "assert(typeof glideMixin === \"function\", 'message: Your code should declare a <code>glideMixin</code> variable that is a function.');",
+        "assert(typeof bird.glide === \"function\", 'message: Your code should use the <code>glideMixin</code> on the <code>bird</code> object to give it the <code>glide</code> method.');",
+        "assert(typeof boat.glide === \"function\", 'message: Your code should use the <code>glideMixin</code> on the <code>boat</code> object to give it the <code>glide</code> method.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db2367417b2b2512b8a",
+      "title": "Use Closure to Protect Properties Within an Object from Being Modified Externally",
+      "description": [
+        "In the previous challenge, <code>bird</code> had a public property <code>name</code>. It is considered public because it can be accessed and changed outside of <code>bird</code> definition.",
+        "<blockquote>bird.name = \"Duffy\";</blockquote>",
+        "Therefore, any part of your code can easily change the name of <code>bird</code> to any value. Think about things like passwords and bank accounts being easily changeable by any part of your codebase. That could cause a lot of issues.",
+        "The simplest way to make properties private is by creating a variable within the constructor function. This changes the scope of that variable to be within the constructor function versus available globally. This way, the property can only be accessed and changed by methods also within the constructor function.",
+        "<blockquote>function Bird() {<br>&nbsp;&nbsp;let hatchedEgg = 10; // private property<br><br>&nbsp;&nbsp;this.getHatchedEggCount = function() { // publicly available method that a bird object can use<br>&nbsp;&nbsp;&nbsp;&nbsp;return hatchedEgg;<br>&nbsp;&nbsp;};<br>}<br>let ducky = new Bird();<br>ducky.getHatchedEggCount(); // returns 10</blockquote>",
+        "Here <code>getHachedEggCount</code> is a privileged method, because it has access to the private variable <code>hatchedEgg</code>. This is possible because <code>hatchedEgg</code> is declared in the same context as <code>getHachedEggCount</code>. In JavaScript, a function always has access to the context in which it was created. This is called <code>closure</code>.",
+        "<h4>Instructions</h4>",
+        "Change how <code>weight</code> is declared in the <code>Bird</code> function so it is a private variable. Then, create a method <code>getWeight</code> that returns the value of <code>weight</code>."
+      ],
+      "challengeSeed": [
+        "function Bird() {",
+        "  this.weight = 15;",
+        "  ",
+        "  ",
+        "}",
+        ""
+      ],
+      "tests": [
+        "assert(!code.match(/this\\.weight/g), 'message: The <code>weight</code> property should be a private variable.');",
+        "assert((new Bird()).getWeight() === 15, 'message: Your code should create a method in <code>Bird</code> called <code>getWeight</code> that returns the <code>weight</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db2367417b2b2512b8b",
+      "title": "Understand the Immediately Invoked Function Expression (IIFE)",
+      "description": [
+        "A common pattern in JavaScript is to execute a function as soon as it is declared:",
+        "<blockquote>(function () {<br>&nbsp;&nbsp;console.log(\"Chirp, chirp!\")<br>})(); // this is an anonymous function expression that executes right away<br>// Outputs \"Chirp, chirp!\" immediately</blockquote>",
+        "Note that the function has no name and is not stored in a variable. The two parentheses () at the end of the function expression cause it to be immediately executed or invoked. This pattern is known as an <code>immediately invoked function expression</code> or <code>IIFE</code>.",
+        "<h4>Instructions</h4>",
+        "Rewrite the function <code>makeNest</code> and remove its call so instead it's an anonymous <code>immediately invoked function expression</code> (<code>IIFE</code>)."
+      ],
+      "challengeSeed": [
+        "function makeNest() {",
+        "  console.log(\"A cozy nest is ready\");",
+        "}",
+        "",
+        "makeNest(); "
+      ],
+      "tests": [
+        "assert(/\\(\\s*?function\\s*?\\(\\s*?\\)\\s*?{/.test(code), 'message: The function should be anonymous.');",
+        "assert(/}\\s*?\\)\\s*?\\(\\s*?\\)/.test(code), 'message: Your function should have parentheses at the end of the expression to call it immediately.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db2367417b2b2512b8c",
+      "title": "Use an IIFE to Create a Module",
+      "description": [
+        "An <code>immediately invoked function expression</code> (<code>IIFE</code>) is often used to group related functionality into a single object or <code>module</code>. For example, an earlier challenge defined two mixins:",
+        "<blockquote>function glideMixin(obj) {<br>&nbsp;&nbsp;obj.glide = function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Gliding on the water\");<br>&nbsp;&nbsp;};<br>}<br>function flyMixin(obj) {<br>&nbsp;&nbsp;obj.fly = function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Flying, wooosh!\");<br>&nbsp;&nbsp;};<br>}</blockquote>",
+        "We can group these <code>mixins</code> into a module as follows:",
+        "<blockquote>let motionModule = (function () {<br>&nbsp;&nbsp;return {<br>&nbsp;&nbsp;&nbsp;&nbsp;glideMixin: function (obj) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.glide = function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Gliding on the water\");<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};<br>&nbsp;&nbsp;&nbsp;&nbsp;},<br>&nbsp;&nbsp;&nbsp;&nbsp;flyMixin: function(obj) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;obj.fly = function() {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(\"Flying, wooosh!\");<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;}<br>}) (); // The two parentheses cause the function to be immediately invoked</blockquote>",
+        "Note that you have an <code>immediately invoked function expression</code> (<code>IIFE</code>) that returns an object <code>motionModule</code>. This returned object contains all of the <code>mixin</code> behaviors as properties of the object.",
+        "The advantage of the <code>module</code> pattern is that all of the motion behaviors can be packaged into a single object that can then be used by other parts of your code. Here is a example using it:",
+        "<blockquote>motionModule.glideMixin(duck);<br>duck.glide();</blockquote>",
+        "<h4>Instructions</h4>",
+        "Create a <code>module</code> named <code>funModule</code> to wrap the two <code>mixins</code> <code>isCuteMixin</code> and <code>singMixin</code>. <code>funModule</code> should return an object."
+      ],
+      "challengeSeed": [
+        "let isCuteMixin = function(obj) {",
+        "  obj.isCute = function() {",
+        "    return true;",
+        "  };",
+        "};",
+        "let singMixin = function(obj) {",
+        "  obj.sing = function() {",
+        "    console.log(\"Singing to an awesome tune\");",
+        "  };",
+        "};"
+      ],
+      "tests": [
+        "assert(typeof funModule === \"object\", 'message: <code>funModule</code> should be defined and return an object.');",
+        "assert(typeof funModule.isCuteMixin === \"function\", 'message: <code>funModule.isCuteMixin</code> should access a function.');",
+        "assert(typeof funModule.singMixin === \"function\", 'message: <code>funModule.singMixin</code> should access a function.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/02-javascript-algorithms-and-data-structures/regular-expressions.json b/seed/challenges/02-javascript-algorithms-and-data-structures/regular-expressions.json
new file mode 100644
index 00000000000000..a1d1f074d10915
--- /dev/null
+++ b/seed/challenges/02-javascript-algorithms-and-data-structures/regular-expressions.json
@@ -0,0 +1,1774 @@
+{
+  "name": "Regular Expressions",
+  "order": 3,
+  "time": "5 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "587d7db3367417b2b2512b8d",
+        "title": "Introduction to the Regular Expression Challenges",
+        "description": [
+          [
+            "https://camo.githubusercontent.com/85ac1a6783961ce77add6b2e8630dbf6521d33b2/687474703a2f2f696d67732e786b63642e636f6d2f636f6d6963732f726567756c61725f65787072657373696f6e732e706e67",
+            "XKCD web comic showing how regular expressions can save the day",
+            "Regular expressions are special strings that represent a search pattern. Also known as \"regex\" or \"regexp\", they help programmers match, search, and replace text. Regular expressions can appear cryptic because a few characters have special meaning. The goal is to combine the symbols and text into a pattern that matches what you want, but only what you want. This section will cover the characters, a few shortcuts, and the common uses for writing regular expressions.",
+            ""
+          ]
+        ],
+        "releasedOn": "",
+        "challengeSeed": [],
+        "tests": [],
+        "type": "Waypoint",
+        "challengeType": 7,
+        "isRequired": false,
+        "titleEs": "",
+        "descriptionEs": [
+          []
+        ],
+        "titleFr": "",
+        "descriptionFr": [
+          []
+        ],
+        "titleDe": "",
+        "descriptionDe": [
+          []
+        ]
+    },
+    {
+      "id": "587d7db3367417b2b2512b8e",
+      "title": "Using the Test Method",
+      "description": [
+        "Regular expressions are used in programming languages to match parts of strings. You create patterns to help you do that matching.",
+        "If you want to find the word <code>\"the\"</code> in the string <code>\"The dog chased the cat\"</code>, you could use the following regular expression: <code>/the/</code>. Notice that quote marks are not required within the regular expression.",
+        "JavaScript has multiple ways to use regexes. One way to test a regex is using the <code>.test()</code> method. The <code>.test()</code> method takes the regex, applies it to a string (which is placed inside the parentheses), and returns <code>true</code> or <code>false</code> if your pattern finds something or not.",
+        "<blockquote>let testStr = \"FreeCodeCamp\";<br>let testRegex = /Code/;<br>testRegex.test(testStr);<br>// Returns true</blockquote>",
+        "<h4>Instructions</h4>",
+        "Apply the regex <code>myRegex</code> on the string <code>myString</code> using the <code>.test()</code> method."
+      ],
+      "challengeSeed": [
+        "let myString = \"Hello, World!\";",
+        "let myRegex = /Hello/;",
+        "let result = myRegex; // Change this line"
+      ],
+      "tests": [
+        "assert(code.match(/myRegex.test\\(\\s*myString\\s*\\)/), 'message: You should use <code>.test()</code> to test the regex.');",
+        "assert(result === true, 'message: Your result should return <code>true</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db3367417b2b2512b8f",
+      "title": "Match Literal Strings",
+      "description": [
+        "In the last challenge, you searched for the word <code>\"the\"</code> using the regular expression <code>/the/</code>. This regex is searching for a literal match of the string <code>\"the\"</code>. Here's another example:",
+        "<blockquote>let testStr = \"Hello, my name is Kevin.\";<br>let testRegex = /Kevin/;<br>testRegex.test(testStr);<br>// Returns true</blockquote>",
+        "Any other forms of <code>\"the\"</code> will not match. For example, the regex <code>/the/</code> will not match <code>\"The\"</code> or <code>\"THE\"</code>. A future challenge shows how to match these versions as well.",
+        "<blockquote>let wrongRegex = /kevin/;<br>wrongRegex.test(testStr);<br>// Returns false</blockquote>",
+        "<h4>Instructions</h4>",
+        "Complete the regex <code>waldoRegex</code> to find <code>\"Waldo\"</code> in the string <code>waldoIsHiding</code> with a literal match."
+      ],
+      "challengeSeed": [
+        "let waldoIsHiding = \"Somewhere Waldo is hiding in this text.\";",
+        "let waldoRegex = /search/; // Change this line",
+        "let result = waldoRegex.test(waldoIsHiding);"
+      ],
+      "tests": [
+        "assert(waldoRegex.test(waldoIsHiding), 'message: Your regex <code>waldoRegex</code> should find <code>\"Waldo\"</code>');",
+        "assert(!waldoRegex.test('Somewhere is hiding in this text.'), 'message: Your regex <code>waldoRegex</code> should not search for anything else.');",
+        "assert(!/\\/.*\\/i/.test(code), 'message: You should perform a literal string match with your regex.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db4367417b2b2512b90",
+      "title": "Match a Literal String with Different Possibilities",
+      "description": [
+        "Using regexes like <code>/coding/</code>, you can look for the pattern <code>\"coding\"</code> in another string.",
+        "This is powerful to search single strings, but it's limited to only one pattern. You can search for multiple patterns using the <code>alternation</code> or <code>OR</code> operator: <code>|</code>.",
+        "This operator matches patterns either before or after it. For example, if you wanted to match <code>\"yes\"</code> or <code>\"no\"</code>, the regex you want is <code>/yes|no/</code>.",
+        "You can also search for more than just two patterns. You can do this by adding more patterns with more <code>OR</code> operators separating them, like <code>/yes|no|maybe/</code>.",
+        "<h4>Instructions</h4>",
+        "Complete the regex <code>petRegex</code> to match the pets <code>\"dog\"</code>, <code>\"cat\"</code>, <code>\"bird\"</code>, or <code>\"fish\"</code>."
+      ],
+      "challengeSeed": [
+        "let petString = \"James has a pet cat.\";",
+        "let petRegex = /change/; // Change this line",
+        "let result = petRegex.test(petString);"
+      ],
+      "tests": [
+        "assert(petRegex.test('John has a pet dog.'), 'message: Your regex <code>petRegex</code> should return <code>true</code> for the string <code>\"John has a pet dog.\"</code>');",
+        "assert(!petRegex.test('Emma has a pet rock.'), 'message: Your regex <code>petRegex</code> should return <code>false</code> for the string <code>\"Emma has a pet rock.\"</code>');",
+        "assert(petRegex.test('Emma has a pet bird.'), 'message: Your regex <code>petRegex</code> should return <code>true</code> for the string <code>\"Emma has a pet bird.\"</code>');",
+        "assert(petRegex.test('Liz has a pet cat.'), 'message: Your regex <code>petRegex</code> should return <code>true</code> for the string <code>\"Liz has a pet cat.\"</code>');",
+        "assert(!petRegex.test('Kara has a pet dolphin.'), 'message: Your regex <code>petRegex</code> should return <code>false</code> for the string <code>\"Kara has a pet dolphin.\"</code>');",
+        "assert(petRegex.test('Alice has a pet fish.'), 'message: Your regex <code>petRegex</code> should return <code>true</code> for the string <code>\"Alice has a pet fish.\"</code>');",
+        "assert(!petRegex.test('Jimmy has a pet computer.'), 'message: Your regex <code>petRegex</code> should return <code>false</code> for the string <code>\"Jimmy has a pet computer.\"</code>');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db4367417b2b2512b91",
+      "title": "Ignore Case While Matching",
+      "description": [
+        "Up until now, you've looked at regexes to do literal matches of strings. But sometimes, you might want to also match case differences.",
+        "Case (or sometimes letter case) is the difference between uppercase letters and lowercase letters. Examples of uppercase are <code>\"A\"</code>, <code>\"B\"</code>, and <code>\"C\"</code>. Examples of lowercase are <code>\"a\"</code>, <code>\"b\"</code>, and <code>\"c\"</code>.",
+        "You can match both cases using what is called a flag. There are other flags but here you'll focus on the flag that ignores case.",
+        "The flag that ignores case is the <code>i</code> flag. You can use it by appending it to the regex. An example of using this flag is <code>/ignorecase/i</code>. This regex can match the strings <code>\"ignorecase\"</code>, <code>\"igNoreCase\"</code>, and <code>\"IgnoreCase\"</code>.",
+        "<h4>Instructions</h4>",
+        "Write a regex <code>fccRegex</code> to match <code>\"FreeCodeCamp\"</code>, no matter its case. Your regex should not match any abbreviations or variations with spaces."
+      ],
+      "challengeSeed": [
+        "let myString = \"FreeCodeCamp\";",
+        "let fccRegex = /change/; // Change this line",
+        "let result = fccRegex.test(myString);"
+      ],
+      "tests": [
+        "assert(fccRegex.test('freecodecamp'), 'message: Your regex should match <code>freecodecamp</code>');",
+        "assert(fccRegex.test('FreeCodeCamp'), 'message: Your regex should match <code>FreeCodeCamp</code>');",
+        "assert(fccRegex.test('FreecodeCamp'), 'message: Your regex should match <code>FreecodeCamp</code>');",
+        "assert(fccRegex.test('FreeCodecamp'), 'message: Your regex should match <code>FreeCodecamp</code>');",
+        "assert(!fccRegex.test('Free Code Camp'), 'message: Your regex should not match <code>Free Code Camp</code>');",
+        "assert(fccRegex.test('FreeCOdeCamp'), 'message: Your regex should match <code>FreeCOdeCamp</code>');",
+        "assert(!fccRegex.test('FCC'), 'message: Your regex should not match <code>FCC</code>');",
+        "assert(fccRegex.test('FrEeCoDeCamp'), 'message: Your regex should match <code>FrEeCoDeCamp</code>');",
+        "assert(fccRegex.test('FrEeCodECamp'), 'message: Your regex should match <code>FrEeCodECamp</code>');",
+        "assert(fccRegex.test('FReeCodeCAmp'), 'message: Your regex should match <code>FReeCodeCAmp</code>');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db4367417b2b2512b92",
+      "title": "Extract Matches",
+      "description": [
+        "So far, you have only been checking if a pattern exists or not within a string. You can also extract the actual matches you found with the <code>.match()</code> method.",
+        "To use the <code>.match()</code> method, apply the method on a string and pass in the regex inside the parentheses. Here's an example:",
+        "<blockquote>\"Hello, World!\".match(/Hello/);<br>// Returns [\"Hello\"]<br>let ourStr = \"Regular expressions\";<br>let ourRegex = /expressions/;<br>ourStr.match(ourRegex);<br>// Returns [\"expressions\"]</blockquote>",
+        "<h4>Instructions</h4>",
+        "Apply the <code>.match()</code> method to extract the word <code>coding</code>."
+      ],
+      "challengeSeed": [
+        "let extractStr = \"Extract the word 'coding' from this string.\";",
+        "let codingRegex = /change/; // Change this line",
+        "let result = extractStr; // Change this line"
+      ],
+      "tests": [
+        "assert(result.join() === \"coding\", 'message: The <code>result</code> should have the word <code>coding</code>');",
+        "assert(codingRegex.source === \"coding\", 'message: Your regex <code>codingRegex</code> should search for <code>coding</code>');",
+        "assert(code.match(/\\.match\\(.*\\)/), 'message: You should use the <code>.match()</code> method.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db4367417b2b2512b93",
+      "title": "Find More Than the First Match",
+      "description": [
+        "So far, you have only been able to extract or search a pattern once.",
+        "<blockquote>let testStr = \"Repeat, Repeat, Repeat\";<br>let ourRegex = /Repeat/;<br>testStr.match(ourRegex);<br>// Returns [\"Repeat\"]</blockquote>",
+        "To search or extract a pattern more than once, you can use the <code>g</code> flag.",
+        "<blockquote>let repeatRegex = /Repeat/g;<br>testStr.match(repeatRegex);<br>// Returns [\"Repeat\", \"Repeat\", \"Repeat\"]</blockquote>",
+        "<h4>Instructions</h4>",
+        "Using the regex <code>starRegex</code>, find and extract both <code>\"Twinkle\"</code> words from the string <code>twinkleStar</code>.",
+        "<strong>Note</strong><br>You can have multiple flags on your regex like <code>/search/gi</code>"
+      ],
+      "challengeSeed": [
+        "let twinkleStar = \"Twinkle, twinkle, little star\";",
+        "let starRegex = /change/; // Change this line",
+        "let result = twinkleStar; // Change this line"
+      ],
+      "tests": [
+        "assert(starRegex.flags.match(/g/).length == 1, 'message: Your regex <code>starRegex</code> should use the global flag <code>g</code>');",
+        "assert(starRegex.flags.match(/i/).length == 1, 'message: Your regex <code>starRegex</code> should use the case insensitive flag <code>i</code>');",
+        "assert(result.sort().join() == twinkleStar.match(/twinkle/gi).sort().join(), 'message: Your match should match both occurrences of the word <code>\"Twinkle\"</code>');",
+        "assert(result.length == 2, 'message: Your match <code>result</code> should have two elements in it.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db5367417b2b2512b94",
+      "title": "Match Anything with Wildcard Period",
+      "description": [
+        "Sometimes you won't (or don't need to) know the exact characters in your patterns. Thinking of all words that match, say, a misspelling would take a long time. Luckily, you can save time using the wildcard character: <code>.</code>",
+        "The wildcard character <code>.</code> will match any one character. The wildcard is also called <code>dot</code> and <code>period</code>. You can use the wildcard character just like any other character in the regex. For example, if you wanted to match <code>\"hug\"</code>, <code>\"huh\"</code>, <code>\"hut\"</code>, and <code>\"hum\"</code>, you can use the regex <code>/hu./</code> to match all four words.",
+        "<blockquote>let humStr = \"I'll hum a song\";<br>let hugStr = \"Bear hug\";<br>let huRegex = /hu./;<br>humStr.match(huRegex); // Returns [\"hum\"]<br>hugStr.match(huRegex); // Returns [\"hug\"]</blockquote>",
+        "<h4>Instructions</h4>",
+        "Complete the regex <code>unRegex</code> so that it matches the strings <code>\"run\"</code>, <code>\"sun\"</code>, <code>\"fun\"</code>, <code>\"pun\"</code>, <code>\"nun\"</code>, and <code>\"bun\"</code>. Your regex should use the wildcard character."
+      ],
+      "challengeSeed": [
+        "let exampleStr = \"Let's have fun with regular expressions!\";",
+        "let unRegex = /change/; // Change this line",
+        "let result = unRegex.test(exampleStr);"
+      ],
+      "tests": [
+        "assert(code.match(/\\.test\\(.*\\)/), 'message: You should use the <code>.test()</code> method.');",
+        "assert(/\\./.test(unRegex.source), 'message: You should use the wildcard character in your regex <code>unRegex</code>');",
+        "assert(unRegex.test(\"Let us go on a run.\"), 'message: Your regex <code>unRegex</code> should match <code>\"run\"</code> in <code>\"Let us go on a run.\"</code>');",
+        "assert(unRegex.test(\"The sun is out today.\"), 'message: Your regex <code>unRegex</code> should match <code>\"sun\"</code> in <code>\"The sun is out today.\"</code>');",
+        "assert(unRegex.test(\"Coding is a lot of fun.\"), 'message: Your regex <code>unRegex</code> should match <code>\"fun\"</code> in <code>\"Coding is a lot of fun.\"</code>');",
+        "assert(unRegex.test(\"Seven days without a pun makes one weak.\"), 'message: Your regex <code>unRegex</code> should match <code>\"pun\"</code> in <code>\"Seven days without a pun makes one weak.\"</code>');",
+        "assert(unRegex.test(\"One takes a vow to be a nun.\"), 'message: Your regex <code>unRegex</code> should match <code>\"nun\"</code> in <code>\"One takes a vow to be a nun.\"</code>');",
+        "assert(unRegex.test(\"She got fired from the hot dog stand for putting her hair in a bun.\"), 'message: Your regex <code>unRegex</code> should match <code>\"bun\"</code> in <code>\"She got fired from the hot dog stand for putting her hair in a bun.\"</code>');",
+        "assert(!unRegex.test(\"There is a bug in my code.\"), 'message: Your regex <code>unRegex</code> should not match <code>\"There is a bug in my code.\"</code>');",
+        "assert(!unRegex.test(\"Can me if you can.\"), 'message: Your regex <code>unRegex</code> should not match <code>\"Catch me if you can.\"</code>');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db5367417b2b2512b95",
+      "title": "Match Single Character with Multiple Possibilities",
+      "description": [
+        "You learned how to match literal patterns (<code>/literal/</code>) and wildcard character (<code>/./</code>). Those are the extremes of regular expressions, where one finds exact matches and the other matches everything. There are options that are a balance between the two extremes.",
+        "You can search for a literal pattern with some flexibility with <code>character classes</code>. Character classes allow you to define a group of characters you wish to match by placing them inside square (<code>[</code> and <code>]</code>) brackets.",
+        "For example, you want to match <code>\"bag\"</code>, <code>\"big\"</code>, and <code>\"bug\"</code> but not <code>\"bog\"</code>. You can create the regex <code>/b[aiu]g/</code> to do this. The <code>[aiu]</code> is the character class that will only match the characters <code>\"a\"</code>, <code>\"i\"</code>, or <code>\"u\"</code>.",
+        "<blockquote>let bigStr = \"big\";<br>let bagStr = \"bag\";<br>let bugStr = \"bug\";<br>let bogStr = \"bog\";<br>let bgRegex = /b[aiu]g/;<br>bigStr.match(bgRegex); // Returns [\"big\"]<br>bagStr.match(bgRegex); // Returns [\"bag\"]<br>bugStr.match(bgRegex); // Returns [\"bug\"]<br>bogStr.match(bgRegex); // Returns null</blockquote>",
+        "<h4>Instructions</h4>",
+        "Use a character class with vowels (<code>a</code>, <code>e</code>, <code>i</code>, <code>o</code>, <code>u</code>) in your regex <code>vowelRegex</code> to count the number of vowels in the string <code>quoteSample</code>.",
+        "<strong>Note</strong><br>Be sure to match both upper- and lowercase vowels."
+      ],
+      "challengeSeed": [
+        "let quoteSample = \"Beware of bugs in the above code; I have only proved it correct, not tried it.\";",
+        "let vowelRegex = /change/; // Change this line",
+        "let result = vowelRegex; // Change this line"
+      ],
+      "tests": [
+        "assert(result.length == 25, 'message: The number of vowels you counted should be 25.');",
+        "assert(/\\[.*\\]/.test(vowelRegex.source), 'message: Your regex <code>vowelRegex</code> should use a character class.');",
+        "assert(vowelRegex.flags.match(/g/).length == 1, 'message: Your regex <code>vowelRegex</code> should use the global flag.');",
+        "assert(vowelRegex.flags.match(/i/).length == 1, 'message: Your regex <code>vowelRegex</code> should use the case insensitive flag.');",
+        "assert(!/[b-df-hj-np-tv-z]/gi.test(result.join()), 'message: Your regex should not match any consonants.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db5367417b2b2512b96",
+      "title": "Match Letters of the Alphabet",
+      "description": [
+        "You saw how you can use <code>character sets</code> to specify a group of characters to match, but that's a lot of typing when you need to match a large range of characters (for example, every letter in the alphabet). Fortunately, there is a built-in feature that makes this short and simple.",
+        "Inside a <code>character set</code>, you can define a range of characters to match using a <code>hyphen</code> character: <code>-</code>.",
+        "For example, to match lowercase letters <code>a</code> through <code>e</code> you would use <code>[a-e]</code>.",
+        "<blockquote>let catStr = \"cat\";<br>let batStr = \"bat\";<br>let matStr = \"mat\";<br>let bgRegex = /[a-e]at/;<br>catStr.match(bgRegex); // Returns [\"cat\"]<br>batStr.match(bgRegex); // Returns [\"bat\"]<br>matStr.match(bgRegex); // Returns null</blockquote>",
+        "<h4>Instructions</h4>",
+        "Match all the letters in the string <code>quoteSample</code>.",
+        "<strong>Note</strong><br>Be sure to match both upper- and lowercase vowels."
+      ],
+      "challengeSeed": [
+        "let quoteSample = \"The quick brown fox jumps over the lazy dog.\";",
+        "let alphabetRegex = /change/; // Change this line",
+        "let result = alphabetRegex; // Change this line"
+      ],
+      "tests": [
+        "assert(result.length == 35, 'message: Your regex <code>alphabetRegex</code> should match 35 items.');",
+        "assert(alphabetRegex.flags.match(/g/).length == 1, 'message: Your regex <code>alphabetRegex</code> should use the global flag.');",
+        "assert(alphabetRegex.flags.match(/i/).length == 1, 'message: Your regex <code>alphabetRegex</code> should use the case insensitive flag.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db5367417b2b2512b97",
+      "title": "Match Numbers and Letters of the Alphabet",
+      "description": [
+        "Using the hyphen (<code>-</code>) to match a range of characters is not limited to letters. It also works to match a range of numbers.",
+        "For example, <code>/[0-5]/</code> matches any number between <code>0</code> and <code>5</code>, including the <code>0</code> and <code>5</code>.",
+        "Also, it is possible to combine a range of letters and numbers in a single character set.",
+        "<blockquote>let jennyStr = \"Jenny8675309\";<br>let myRegex = /[a-z0-9]/ig;<br>jennyStr.match(myRegex); // matches all letters and numbers in jennyStr</blockquote>",
+        "<h4>Instructions</h4>",
+        "Create a single regex that matches a range of letters between <code>h</code> and <code>s</code>, and a range of numbers between <code>2</code> and <code>6</code>. Remember to include the appropriate flags in the regex."
+      ],
+      "challengeSeed": [
+        "let quoteSample = \"Blueberry 3.141592653s are delicious.\";",
+        "let myRegex = /change/; // Change this line",
+        "let result = myRegex; // Change this line"
+      ],
+      "tests": [
+        "assert(result.length == 17, 'message: Your regex <code>myRegex</code> should match 17 items.');",
+        "assert(myRegex.flags.match(/g/).length == 1, 'message: Your regex <code>myRegex</code> should use the global flag.');",
+        "assert(myRegex.flags.match(/i/).length == 1, 'message: Your regex <code>myRegex</code> should use the case insensitive flag.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db6367417b2b2512b98",
+      "title": "Match Single Characters Not Specified",
+      "description": [
+        "So far, you have created a set of characters that you want to match, but you could also create a set of characters that you do not want to match. These types of character sets are called <code>negated character sets</code>.",
+        "To create a <code>negated character set</code>, you place a <code>caret</code> character (<code>^</code>) after the opening bracket and before the characters you do not want to match.",
+        "For example, <code>/[^aeiou]/gi</code> matches all characters that are not a vowel. Note that characters like <code>.</code>, <code>!</code>, <code>[</code>, <code>@</code>, <code>/</code> and white space are matched - the negated vowel character set only excludes the vowel characters.",
+        "<h4>Instructions</h4>",
+        "Create a single regex that matches all characters that are not a number or a vowel. Remember to include the appropriate flags in the regex."
+      ],
+      "challengeSeed": [
+        "let quoteSample = \"3 blind mice.\";",
+        "let myRegex = /change/; // Change this line",
+        "let result = myRegex; // Change this line"
+      ],
+      "tests": [
+        "assert(result.length == 9, 'message: Your regex <code>myRegex</code> should match 9 items.');",
+        "assert(myRegex.flags.match(/g/).length == 1, 'message: Your regex <code>myRegex</code> should use the global flag.');",
+        "assert(myRegex.flags.match(/i/).length == 1, 'message: Your regex <code>myRegex</code> should use the case insensitive flag.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db6367417b2b2512b99",
+      "title": "Match Characters that Occur One or More Times",
+      "description": [
+        "Sometimes, you need to match a character (or group of characters) that appears one or more times in a row. This means it occurs at least once, and may be repeated.",
+        "You can use the <code>+</code> character to check if that is the case. Remember, the character or pattern has to be present consecutively. That is, the character has to repeat one after the other.",
+        "For example, <code>/a+/g</code> would find one match in <code>\"abc\"</code> and return <code>[\"a\"]</code>. It would also find one match in <code>\"aabc\"</code> and return <code>[\"aa\"]</code>. If it were checking the string <code>\"abab\"</code>, it would find two matches and return <code>[\"a\", \"a\"]</code> because the <code>a</code> characters are not in a row - there is a <code>b</code> between them. Finally, since there is no <code>\"a\"</code> in the string <code>\"bcd\"</code>, it wouldn't find a match.",
+        "<h4>Instructions</h4>",
+        "You want to find matches when the letter <code>s</code> occurs one or more times in <code>\"Mississippi\"</code>. Write a regex that uses the <code>+</code> sign."
+      ],
+      "challengeSeed": [
+        "let difficultSpelling = \"Mississippi\";",
+        "let myRegex = /change/; // Change this line",
+        "let result = difficultSpelling.match(myRegex)"
+      ],
+      "tests": [
+        "assert(/\\+/.test(myRegex.source), 'message: Your regex <code>myRegex</code> should use the <code>+</code> sign to match one or more <code>s</code> characters.');",
+        "assert(result.length == 2, 'message: Your regex <code>myRegex</code> should match 2 items.');",
+        "assert(result[0] == 'ss' && result[1] == 'ss', 'message: The <code>result</code> variable should be an array with two matches of <code>\"ss\"</code>');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db6367417b2b2512b9a",
+      "title": "Match Characters that Occur Zero or More Times",
+      "description": [
+        "The last challenge used the plus <code>+</code> sign to look for characters that occur one or more times. There's also an option that matches characters that occur zero or more times.",
+        "The character to do this is the <code>asterisk</code> or <code>star</code>: <code>*</code>.",
+        "<blockquote>let sWord1 = \"seed\";<br>let sWord2 = \"saw\";<br>let kWord = \"kite\";<br>let sRegex = /s.*/; // Searches for words starting with s<br>sRegex.test(sWord1); // Returns true<br>sRegex.test(sWord2); // Returns true<br>sRegex.test(kWord); // Returns false<br></blockquote>",
+        "<h4>Instructions</h4>",
+        "Create a regex <code>starWarsRegex</code> that uses the <code>*</code> character to match all the movie titles that start with <code>\"Star Wars\"</code>. Your regex does not need flags."
+      ],
+      "challengeSeed": [
+        "let starWars = \"Star Wars\";",
+        "let starWarsRegex = /change/; // Change this line",
+        "let result = starWars.match(starWarsRegex);"
+      ],
+      "tests": [
+        "assert(starWarsRegex.test(\"Star Wars: The Phantom Menace\"), 'message: Your regex should match <code>\"Star Wars: The Phantom Menace\"</code>.');",
+        "assert(starWarsRegex.test(\"Star Wars: Attack of the Clones\"), 'message: Your regex should match <code>\"Star Wars: Attack of the Clones\"</code>.');",
+        "assert(starWarsRegex.test(\"Star Wars: Revenge of the Sith\"), 'message: Your regex should match <code>\"Star Wars: Revenge of the Sith\"</code>.');",
+        "assert(starWarsRegex.test(\"Star Wars: A New Hope\"), 'message: Your regex should match <code>\"Star Wars: A New Hope\"</code>.');",
+        "assert(starWarsRegex.test(\"Star Wars: The Empire Strikes Back\"), 'message: Your regex should match <code>\"Star Wars: The Empire Strikes Back\"</code>.');",
+        "assert(starWarsRegex.test(\"Star Wars: Return of the Jedi\"), 'message: Your regex should match <code>\"Star Wars: Return of the Jedi\"</code>.');",
+        "assert(starWarsRegex.test(\"Star Wars: The Force Awakens\"), 'message: Your regex should match <code>\"Star Wars: The Force Awakens\"</code>.');",
+        "assert(!starWarsRegex.test(\"The Clone Wars\"), 'message: Your regex should not match <code>\"The Clone Wars\"</code>');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db6367417b2b2512b9b",
+      "title": "Find Characters with Lazy Matching",
+      "description": [
+        "In regular expressions, a <code>greedy</code> match finds the longest possible part of a string that fits the regex pattern and returns it as a match. The alternative is called a <code>lazy</code> match, which finds the smallest possible part of the string that satisfies the regex pattern.",
+        "You can apply the regex <code>/t[a-z]*i/</code> to the string <code>\"titanic\"</code>. This regex is basically a pattern that starts with <code>t</code>, ends with <code>i</code>, and has some letters in between.",
+        "Regular expressions are by default <code>greedy</code>, so the match would return <code>[\"titani\"]<c/ode>. It finds the largest sub-string possible to fit the pattern.",
+        "However, you can use the <code>?</code> character to change it to <code>lazy</code> matching. <code>\"titanic\"</code> matched against the adjusted regex of <code>/t[a-z]*?i/</code> returns <code>[\"ti\"]</code>.",
+        "<h4>Instructions</h4>",
+        "Fix the regex <code>/&lt;.*&gt;/</code> to return the HTML tag <code>&lt;h1&gt;</code> and not the text <code>\"&lt;h1&gt;Winter is coming&lt;/h1&gt;\"</code>. Remember the wildcard <code>.</code> in a regular expression matches any character."
+      ],
+      "challengeSeed": [
+        "let text = \"<h1>Winter is coming</h1>\"",
+        "let myRegex = /<.*>/; // Change this line",
+        "let result = text.match(myRegex);"
+      ],
+      "tests": [
+        "assert(result[0] == '<h1>', 'message: The <code>result</code> variable should be an array with <code>&lt;h1&gt;</code> in it');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db7367417b2b2512b9c",
+      "title": "Find One or More Criminals in a Hunt",
+      "description": [
+        "Time to pause and test your new regex writing skills. A group of criminals escaped from jail and ran away, but you don't know how many. However, you do know that they stay close together when they are around other people. You are responsible for finding all of the criminals at once.",
+        "Here's an example to review how to do this:",
+        "The regex <code>/z+/</code> matches the letter <code>z</code> when it appears one or more times in a row. It would find matches in all of the following strings:",
+        "<blockquote>\"z\"<br>\"zzzzzz\"<br>\"ABCzzzz\"<br>\"zzzzABC\"<br>\"abczzzzzzzzzzzzzzzzzzzzzabc\"</blockquote>",
+        "But it does not find matches in the following strings since there are no letter <code>z</code> characters:",
+        "<blockquote>\"\"<br>\"ABC\"<br>\"abcabc\"</blockquote>",
+        "<h4>Instructions</h4>",
+        "Write a <code>greedy</code> regex that finds one or more criminals within a group of other people. A criminal is represented by the capital letter <code>C</code>."
+      ],
+      "challengeSeed": [
+        "// example crowd gathering",
+        "let crowd = 'P1P2P3P4P5P6CCCP7P8P9'",
+        "",
+        "let reCriminals = /./ // Change this line",
+        "",
+        "let matchedCriminals = crowd.match(reCriminals)",
+        "console.log(matchedCriminals)"
+      ],
+      "tests": [
+        "assert('C'.match(reCriminals) && 'C'.match(reCriminals)[0] == 'C', 'message: Your regex should match <em>one</em> criminal (\"<code>C</code>\") in <code>\"C\"</code>');",
+        "assert('CC'.match(reCriminals) && 'CC'.match(reCriminals)[0] == 'CC', 'message: Your regex should match <em>two</em> criminals (\"<code>CC</code>\") in <code>\"CC\"</code>');",
+        "assert('P1P5P4CCCP2P6P3'.match(reCriminals) && 'P1P5P4CCCP2P6P3'.match(reCriminals)[0] == 'CCC', 'message: Your regex should match <em>three</em> criminals (\"<code>CCC</code>\") in <code>\"P1P5P4CCCP2P6P3\"</code>');",
+        "assert('P6P2P7P4P5CCCCCP3P1'.match(reCriminals) && 'P6P2P7P4P5CCCCCP3P1'.match(reCriminals)[0] == 'CCCCC', 'message: Your regex should match <em>five</em> criminals (\"<code>CCCCC</code>\") in <code>\"P6P2P7P4P5CCCCCP3P1\"</code>');",
+        "assert(!reCriminals.test(''), 'message: Your regex should not match any criminals in <code>\"\"</code>');",
+        "assert(!reCriminals.test('P1P2P3'), 'message: Your regex should not match any criminals in <code>\"P1P2P3\"</code>');",
+        "assert('P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3'.match(reCriminals) && 'P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3'.match(reCriminals)[0] == \"CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC\", 'message: Your regex should match <em>fifty</em> criminals (\"<code>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</code>\") in <code>\"P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3\"</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db7367417b2b2512b9d",
+      "title": "Match Beginning String Patterns",
+      "description": [
+        "Prior challenges showed that regular expressions can be used to look for a number of matches. They are also used to search for patterns in specific positions in strings.",
+        "In an earlier challenge, you used the <code>caret</code> character (<code>^</code>) inside a <code>character set</code> to create a <code>negated character set</code> in the form <code>[^thingsThatWillNotBeMatched]</code>. Outside of a <code>character set</code>, the <code>caret</code> is used to search for patterns at the beginning of strings.",
+        "<blockquote>let firstString = \"Ricky is first and can be found.\";<br>let firstRegex = /^Ricky/;<br>firstRegex.test(firstString);<br>// Returns true<br>let notFirst = \"You can't find Ricky now.\";<br>firstRegex.test(notFirst);<br>// Returns false</blockquote>",
+        "<h4>Instructions</h4>",
+        "Use the <code>caret</code> character in a regex to find <code>\"Cal\"</code> only in the beginning of the string <code>rickyAndCal</code>."
+      ],
+      "challengeSeed": [
+        "let rickyAndCal = \"Cal and Ricky both like racing.\"",
+        "let calRegex = /change/; // Change this line",
+        "let result = calRegex.test(rickyAndCal);"
+      ],
+      "tests": [
+        "assert(calRegex.source == \"^Cal\", 'message: Your regex should search for <code>\"Cal\"</code> with a capital letter.');",
+        "assert(calRegex.flags == \"\", 'message: Your regex should not use any flags.');",
+        "assert(calRegex.test(\"Cal and Ricky both like racing.\"), 'message: Your regex should match <code>\"Cal\"</code> at the beginning of the string.');",
+        "assert(!calRegex.test(\"Ricky and Cal both like racing.\"), 'message: Your regex should not match <code>\"Cal\"</code> in the middle of a string.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db7367417b2b2512b9e",
+      "title": "Match Ending String Patterns",
+      "description": [
+        "In the last challenge, you learned to use the <code>caret</code> character to search for patterns at the beginning of strings. There is also a way to search for patterns at the end of strings.",
+        "You can search the end of strings using the <code>dollar sign</code> character <code>$</code> at the end of the regex.",
+        "<blockquote>let theEnding = \"This is a never ending story\";<br>let storyRegex = /story$/;<br>storyRegex.test(theEnding);<br>// Returns true<br>let noEnding = \"Sometimes a story will have to end\";<br>storyRegex.test(noEnding);<br>// Returns false<br></blockquote>",
+        "<h4>Instructions</h4>",
+        "Use the anchor character (<code>$</code>) to match the string <code>\"caboose\"</code> at the end of the string <code>caboose</code>."
+      ],
+      "challengeSeed": [
+        "let caboose = \"The last car on a train is the caboose\";",
+        "let lastRegex = /change/; // Change this line",
+        "let result = lastRegex.test(caboose);"
+      ],
+      "tests": [
+        "assert(lastRegex.source == \"caboose$\", 'message: You should search for <code>\"caboose\"</code> with the dollar sign <code>$</code> anchor in your regex.');",
+        "assert(lastRegex.flags == \"\", 'message: Your regex should not use any flags.');",
+        "assert(lastRegex.test(\"The last car on a train is the caboose\"), 'message: You should match <code>\"caboose\"</code> at the end of the string <code>\"The last car on a train is the caboose\"</code>');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db7367417b2b2512b9f",
+      "title": "Match All Letters and Numbers",
+      "description": [
+        "Using character classes, you were able to search for all letters of the alphabet with <code>[a-z]</code>. This kind of character class is common enough that there is a shortcut for it, although it includes a few extra characters as well.",
+        "The closest character class in JavaScript to match the alphabet is <code>\\w</code>. This shortcut is equal to <code>[A-Za-z0-9_]</code>. This character class matches upper and lowercase letters plus numbers. Note, this character class also includes the underscore character (<code>_</code>).",
+        "<blockquote>let longHand = /[A-Za-z0-9_]+/;<br>let shortHand = /\\w+/;<br>let numbers = \"42\";<br>let varNames = \"important_var\";<br>longHand.test(numbers); // Returns true<br>shortHand.test(numbers); // Returns true<br>longHand.test(varNames); // Returns true<br>shortHand.test(varNames); // Returns true</blockquote>",
+        "These shortcut character classes are also known as <code>shorthand character classes</code>.",
+        "<h4>Instructions</h4>",
+        "Use the shorthand character class <code>\\w</code> to count the number of alphanumeric characters in various quotes and strings."
+      ],
+      "challengeSeed": [
+        "let quoteSample = \"The five boxing wizards jump quickly.\";",
+        "let alphabetRegexV2 = /change/; // Change this line",
+        "let result = quoteSample.match(alphabetRegexV2).length;"
+      ],
+      "tests": [
+        "assert(alphabetRegexV2.global, 'message: Your regex should use the global flag.');",
+        "assert(/i/.test(alphabetRegexV2.flags), 'message: Your regex should use the case insensitive flag.');",
+        "assert(\"The five boxing wizards jump quickly.\".match(alphabetRegexV2).length === 31, 'message: Your regex should find 31 alphanumeric characters in <code>\"The five boxing wizards jump quickly.\"</code>');",
+        "assert(\"Pack my box with five dozen liquor jugs.\".match(alphabetRegexV2).length === 32, 'message: Your regex should find 32 alphanumeric characters in <code>\"Pack my box with five dozen liquor jugs.\"</code>');",
+        "assert(\"How vexingly quick daft zebras jump!\".match(alphabetRegexV2).length === 30, 'message: Your regex should find 30 alphanumeric characters in <code>\"How vexingly quick daft zebras jump!\"</code>');",
+        "assert(\"123 456 7890 ABC def GHI jkl MNO pqr STU vwx YZ.\".match(alphabetRegexV2).length === 36, 'message: Your regex should find 36 alphanumeric characters in <code>\"123 456 7890 ABC def GHI jkl MNO pqr STU vwx YZ.\"</code>');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db8367417b2b2512ba0",
+      "title": "Match Everything But Letters and Numbers",
+      "description": [
+        "You've learned that you can use a shortcut to match alphanumerics <code>[A-Za-z0-9_]</code> using <code>\\w</code>. A natural pattern you might want to search for is the opposite of alphanumerics.",
+        "You can search for the opposite of the <code>\\w</code> with <code>\\W</code>. Note, the opposite pattern uses a capital letter. This shortcut is the same as <code>[^A-Za-z0-9_]</code>.",
+        "<blockquote>let shortHand = /\\W/;<br>let numbers = \"42%\";<br>let sentence = \"Coding!\";<br>numbers.match(shortHand); // Returns [\"%\"]<br>sentence.match(shortHand); // Returns [\"!\"]<br></blockquote>",
+        "<h4>Instructions</h4>",
+        "Use the shorthand character class <code>\\W</code> to count the number of non-alphanumeric characters in various quotes and strings."
+      ],
+      "challengeSeed": [
+        "let quoteSample = \"The five boxing wizards jump quickly.\";",
+        "let nonAlphabetRegex = /change/; // Change this line",
+        "let result = quoteSample.match(nonAlphabetRegex).length;"
+      ],
+      "tests": [
+        "assert(nonAlphabetRegex.global, 'message: Your regex should use the global flag.');",
+        "assert(\"The five boxing wizards jump quickly.\".match(nonAlphabetRegex).length == 6, 'message: Your regex should find 6 non-alphanumeric characters in <code>\"The five boxing wizards jump quickly.\"</code>.');",
+        "assert(\"Pack my box with five dozen liquor jugs.\".match(nonAlphabetRegex).length == 8, 'message: Your regex should find 8 non-alphanumeric characters in <code>\"Pack my box with five dozen liquor jugs.\"</code>');",
+        "assert(\"How vexingly quick daft zebras jump!\".match(nonAlphabetRegex).length == 6, 'message: Your regex should find 6 non-alphanumeric characters in <code>\"How vexingly quick daft zebras jump!\"</code>');",
+        "assert(\"123 456 7890 ABC def GHI jkl MNO pqr STU vwx YZ.\".match(nonAlphabetRegex).length == 12, 'message: Your regex should find 12 non-alphanumeric characters in <code>\"123 456 7890 ABC def GHI jkl MNO pqr STU vwx YZ.\"</code>');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "5d712346c441eddfaeb5bdef",
+      "title": "Match All Numbers",
+      "description": [
+        "You've learned shortcuts for common string patterns like alphanumerics. Another common pattern is looking for just digits or numbers.",
+        "The shortcut to look for digit characters is <code>\\d</code>, with a lowercase <code>d</code>. This is equal to the character class <code>[0-9]</code>, which looks for a single character of any number between zero and nine.",
+        "<h4>Instructions</h4>",
+        "Use the shorthand character class <code>\\d</code> to count how many digits are in movie titles. Written out numbers (\"six\" instead of 6) do not count."
+      ],
+      "challengeSeed": [
+        "let numString = \"Your sandwich will be $5.00\";",
+        "let numRegex = /change/; // Change this line",
+        "let result = numString.match(numRegex).length;"
+      ],
+      "tests": [
+        "assert(/\\\\d/.test(numRegex.source), 'message: Your regex should use the shortcut character to match digit characters');",
+        "assert(numRegex.global, 'message: Your regex should use the global flag.');",
+        "assert(\"9\".match(numRegex).length == 1, 'message: Your regex should find 1 digit in <code>\"9\"</code>.');",
+        "assert(\"Catch 22\".match(numRegex).length == 2, 'message: Your regex should find 2 digits in <code>\"Catch 22\"</code>.');",
+        "assert(\"101 Dalmatians\".match(numRegex).length == 3, 'message: Your regex should find 3 digits in <code>\"101 Dalmatians\"</code>.');",
+        "assert(\"One, Two, Three\".match(numRegex) == null, 'message: Your regex should find no digits in <code>\"One, Two, Three\"</code>.');",
+        "assert(\"21 Jump Street\".match(numRegex).length == 2, 'message: Your regex should find 2 digits in <code>\"21 Jump Street\"</code>.');",
+        "assert(\"2001: A Space Odyssey\".match(numRegex).length == 4, 'message: Your regex should find 4 digits in <code>\"2001: A Space Odyssey\"</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db8367417b2b2512ba1",
+      "title": "Match All Non-Numbers",
+      "description": [
+        "The last challenge showed how to search for digits using the shortcut <code>\\d</code> with a lowercase <code>d</code>. You can also search for non-digits using a similar shortcut that uses an uppercase <code>D</code> instead.",
+        "The shortcut to look for non-digit characters is <code>\\D</code>. This is equal to the character class <code>[^0-9]</code>, which looks for a single character that is not a number between zero and nine.",
+        "<h4>Instructions</h4>",
+        "Use the shorthand character class for non-digits <code>\\D</code> to count how many non-digits are in movie titles."
+      ],
+      "challengeSeed": [
+        "let numString = \"Your sandwich will be $5.00\";",
+        "let noNumRegex = /change/; // Change this line",
+        "let result = numString.match(noNumRegex).length;"
+      ],
+      "tests": [
+        "assert(/\\\\D/.test(noNumRegex.source), 'message: Your regex should use the shortcut character to match non-digit characters');",
+        "assert(noNumRegex.global, 'message: Your regex should use the global flag.');",
+        "assert(\"9\".match(noNumRegex) == null, 'message: Your regex should find no non-digits in <code>\"9\"</code>.');",
+        "assert(\"Catch 22\".match(noNumRegex).length == 6, 'message: Your regex should find 6 non-digits in <code>\"Catch 22\"</code>.');",
+        "assert(\"101 Dalmatians\".match(noNumRegex).length == 11, 'message: Your regex should find 11 non-digits in <code>\"101 Dalmatians\"</code>.');",
+        "assert(\"One, Two, Three\".match(noNumRegex).length == 15, 'message: Your regex should find 15 non-digits in <code>\"One, Two, Three\"</code>.');",
+        "assert(\"21 Jump Street\".match(noNumRegex).length == 12, 'message: Your regex should find 12 non-digits in <code>\"21 Jump Street\"</code>.');",
+        "assert(\"2001: A Space Odyssey\".match(noNumRegex).length == 17, 'message: Your regex should find 17 non-digits in <code>\"2001: A Space Odyssey\"</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db8367417b2b2512ba2",
+      "title": "Restrict Possible Usernames",
+      "description": [
+        "Usernames are used everywhere on the internet. They are what give users a unique identity on their favorite sites.",
+        "You need to check all the usernames in a database. Here are some simple rules that users have to follow when creating their username.",
+        "1) The only numbers in the username have to be at the end. There can be zero or more of them at the end.",
+        "2) Username letters can be lowercase and uppercase.",
+        "3) Usernames have to be at least two characters long. A two-letter username can only use alphabet letter characters.",
+        "<h4>Instructions</h4>",
+        "Change the regex <code>userCheck</code> to fit the constraints listed above."
+      ],
+      "challengeSeed": [
+        "let username = \"JackOfAllTrades\";",
+        "let userCheck = /change/; // Change this line",
+        "let result = userCheck.test(username);"
+      ],
+      "tests": [
+        "assert(userCheck.test(\"JACK\"), 'message: Your regex should match <code>JACK</code>');",
+        "assert(!userCheck.test(\"J\"), 'message: Your regex should not match <code>J</code>');",
+        "assert(userCheck.test(\"Oceans11\"), 'message: Your regex should match <code>Oceans11</code>');",
+        "assert(userCheck.test(\"RegexGuru\"), 'message: Your regex should match <code>RegexGuru</code>');",
+        "assert(!userCheck.test(\"007\"), 'message: Your regex should not match <code>007</code>');",
+        "assert(!userCheck.test(\"9\"), 'message: Your regex should not match <code>9</code>');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db8367417b2b2512ba3",
+      "title": "Match Whitespace",
+      "description": [
+        "The challenges so far have covered matching letters of the alphabet and numbers. You can also match the whitespace or spaces between letters.",
+        "You can search for whitespace using <code>\\s</code>, which is a lowercase <code>s</code>. This pattern not only matches whitespace, but also carriage return, tab, form feed, and new line characters. You can think of it as similar to the character class <code>[ \\r\\t\\f\\n\\v]</code>.",
+        "<blockquote>let whiteSpace = \"Whitespace. Whitespace everywhere!\"<br>let spaceRegex = /\\s/g;<br>whiteSpace.match(spaceRegex);<br>// Returns [\" \", \" \"]<br></blockquote>",
+        "<h4>Instructions</h4>",
+        "Change the regex <code>countWhiteSpace</code> to look for multiple whitespace characters in a string."
+      ],
+      "challengeSeed": [
+        "let sample = \"Whitespace is important in separating words\";",
+        "let countWhiteSpace = /change/; // Change this line",
+        "let result = sample.match(countWhiteSpace);"
+      ],
+      "tests": [
+        "assert(countWhiteSpace.global, 'message: Your regex should use the global flag.');",
+        "assert(\"Men are from Mars and women are from Venus.\".match(countWhiteSpace).length == 8, 'message: Your regex should find eight spaces in <code>\"Men are from Mars and women are from Venus.\"</code>');",
+        "assert(\"Space: the final frontier.\".match(countWhiteSpace).length == 3, 'message: Your regex should find three spaces in <code>\"Space: the final frontier.\"</code>');",
+        "assert(\"MindYourPersonalSpace\".match(countWhiteSpace) == null, 'message: Your regex should find no spaces in <code>\"MindYourPersonalSpace\"</code>');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db9367417b2b2512ba4",
+      "title": "Match Non-Whitespace Characters",
+      "description": [
+        "You learned about searching for whitespace using <code>\\s</code>, with a lowercase <code>s</code>. You can also search for everything except whitespace.",
+        "Search for non-whitespace using <code>\\S</code>, which is an uppercase <code>s</code>. This pattern will not match whitespace, carriage return, tab, form feed, and new line characters. You can think of it being similar to the character class <code>[^ \\r\\t\\f\\n\\v]</code>.",
+        "<blockquote>let whiteSpace = \"Whitespace. Whitespace everywhere!\"<br>let nonSpaceRegex = /\\S/g;<br>whiteSpace.match(nonSpaceRegex).length; // Returns 32</blockquote>",
+        "<h4>Instructions</h4>",
+        "Change the regex <code>countNonWhiteSpace</code> to look for multiple non-whitespace characters in a string."
+      ],
+      "challengeSeed": [
+        "let sample = \"Whitespace is important in separating words\";",
+        "let countNonWhiteSpace = /change/; // Change this line",
+        "let result = sample.match(countNonWhiteSpace);"
+      ],
+      "tests": [
+        "assert(countNonWhiteSpace.global, 'message: Your regex should use the global flag.');",
+        "assert(\"Men are from Mars and women are from Venus.\".match(countNonWhiteSpace).length == 35, 'message: Your regex should find 35 non-spaces in <code>\"Men are from Mars and women are from Venus.\"</code>');",
+        "assert(\"Space: the final frontier.\".match(countNonWhiteSpace).length == 23, 'message: Your regex should find 23 non-spaces in <code>\"Space: the final frontier.\"</code>');",
+        "assert(\"MindYourPersonalSpace\".match(countNonWhiteSpace).length == 21, 'message: Your regex should find 21 non-spaces in <code>\"MindYourPersonalSpace\"</code>');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db9367417b2b2512ba5",
+      "title": "Specify Upper and Lower Number of Matches",
+      "description": [
+        "Recall that you use the plus sign <code>+</code> to look for one or more characters and the asterisk <code>*</code> to look for zero or more characters. These are convenient but sometimes you want to match a certain range of patterns.",
+        "You can specify the lower and upper number of patterns with <code>quantity specifiers</code>. Quantity specifiers are used with curly brackets (<code>{</code> and <code>}</code>). You put two numbers between the curly brackets - for the lower and upper number of patterns.",
+        "For example, to match only the letter <code>a</code> appearing between <code>3</code> and <code>5</code> times in the string <code>\"ah\"</code>, your regex would be <code>/a{3,5}h/</code>.",
+        "<blockquote>let A4 = \"aaaah\";<br>let A2 = \"aah\";<br>let multipleA = /a{3,5}h/;<br>multipleA.test(A4); // Returns true<br>multipleA.test(A2); // Returns false</blockquote>",
+        "<h4>Instructions</h4>",
+        "Change the regex <code>ohRegex</code> to match only <code>3</code> to <code>6</code> letter <code>h</code>'s in the word <code>\"Oh no\"</code>."
+      ],
+      "challengeSeed": [
+        "let ohStr = \"Ohhh no\";",
+        "let ohRegex = /change/; // Change this line",
+        "let result = ohRegex.test(ohStr);"
+      ],
+      "tests": [
+        "assert(ohRegex.source.match(/{.*?}/).length > 0, 'message: Your regex should use curly brackets.');",
+        "assert(!ohRegex.test(\"Ohh no\"), 'message: Your regex should not match <code>\"Ohh no\"</code>');",
+        "assert(ohRegex.test(\"Ohhh no\"), 'message: Your regex should match <code>\"Ohhh no\"</code>');",
+        "assert(ohRegex.test(\"Ohhhh no\"), 'message: Your regex should match <code>\"Ohhhh no\"</code>');",
+        "assert(ohRegex.test(\"Ohhhhh no\"), 'message: Your regex should match <code>\"Ohhhhh no\"</code>');",
+        "assert(ohRegex.test(\"Ohhhhhh no\"), 'message: Your regex should match <code>\"Ohhhhhh no\"</code>');",
+        "assert(!ohRegex.test(\"Ohhhhhhh no\"), 'message: Your regex should not match <code>\"Ohhhhhhh no\"</code>');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db9367417b2b2512ba6",
+      "title": "Specify Only the Lower Number of Matches",
+      "description": [
+        "You can specify the lower and upper number of patterns with <code>quantity specifiers</code> using curly brackets. Sometimes you only want to specify the lower number of patterns with no upper limit.",
+        "To only specify the lower number of patterns, keep the first number followed by a comma.",
+        "For example, to match only the string <code>\"hah\"</code> with the letter <code>a</code> appearing at least <code>3</code> times, your regex would be <code>/ha{3,}h/</code>.",
+        "<blockquote>let A4 = \"haaaah\";<br>let A2 = \"haah\";<br>let A100 = \"h\" + \"a\".repeat(100) + \"h\";<br>let multipleA = /ha{3,}h/;<br>multipleA.test(A4); // Returns true<br>multipleA.test(A2); // Returns false<br>multipleA.test(A100); // Returns true</blockquote>",
+        "<h4>Instructions</h4>",
+        "Change the regex <code>haRegex</code> to match the word <code>\"Hazzah\"</code> only when it has four or more letter <code>z</code>'s."
+      ],
+      "challengeSeed": [
+        "let haStr = \"Hazzzzah\";",
+        "let haRegex = /change/; // Change this line",
+        "let result = haRegex.test(haStr);"
+      ],
+      "tests": [
+        "assert(haRegex.source.match(/{.*?}/).length > 0, 'message: Your regex should use curly brackets.');",
+        "assert(!haRegex.test(\"Hazzah\"), 'message: Your regex should not match <code>\"Hazzah\"</code>');",
+        "assert(!haRegex.test(\"Hazzzah\"), 'message: Your regex should not match <code>\"Hazzzah\"</code>');",
+        "assert(haRegex.test(\"Hazzzzah\"), 'message: Your regex should match <code>\"Hazzzzah\"</code>');",
+        "assert(haRegex.test(\"Hazzzzzah\"), 'message: Your regex should match <code>\"Hazzzzzah\"</code>');",
+        "assert(haRegex.test(\"Hazzzzzzah\"), 'message: Your regex should match <code>\"Hazzzzzzah\"</code>');",
+        "assert(haRegex.test(\"Ha\" + \"z\".repeat(30) + \"ah\"), 'message: Your regex should match <code>\"Hazzah\"</code> with 30 <code>z</code>\\'s in it.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7db9367417b2b2512ba7",
+      "title": "Specify Exact Number of Matches",
+      "description": [
+        "You can specify the lower and upper number of patterns with <code>quantity specifiers</code> using curly brackets. Sometimes you only want a specific number of matches.",
+        "To specify a certain number of patterns, just have that one number between the curly brackets.",
+        "For example, to match only the word <code>\"hah\"</code> with the letter <code>a</code> <code>3</code> times, your regex would be <code>/ha{3}h/</code>.",
+        "<blockquote>let A4 = \"haaaah\";<br>let A3 = \"haaah\";<br>let A100 = \"h\" + \"a\".repeat(100) + \"h\";<br>let multipleHA = /a{3}h/;<br>multipleHA.test(A4); // Returns false<br>multipleHA.test(A3); // Returns true<br>multipleHA.test(A100); // Returns false</blockquote>",
+        "<h4>Instructions</h4>",
+        "Change the regex <code>timRegex</code> to match the word <code>\"Timber\"</code> only when it has four letter <code>m</code>'s."
+      ],
+      "challengeSeed": [
+        "let timStr = \"Timmmmber\";",
+        "let timRegex = /change/; // Change this line",
+        "let result = timRegex.test(timStr);"
+      ],
+      "tests": [
+        "assert(timRegex.source.match(/{.*?}/).length > 0, 'message: Your regex should use curly brackets.');",
+        "assert(!timRegex.test(\"Timber\"), 'message: Your regex should not match <code>\"Timber\"</code>');",
+        "assert(!timRegex.test(\"Timmber\"), 'message: Your regex should not match <code>\"Timmber\"</code>');",
+        "assert(!timRegex.test(\"Timmmber\"), 'message: Your regex should not match <code>\"Timmmber\"</code>');",
+        "assert(timRegex.test(\"Timmmmber\"), 'message: Your regex should match <code>\"Timmmmber\"</code>');",
+        "assert(!timRegex.test(\"Ti\" + \"m\".repeat(30) + \"ber\"), 'message: Your regex should match <code>\"Timber\"</code> with 30 <code>m</code>\\'s in it.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7dba367417b2b2512ba8",
+      "title": "Check for All or None",
+      "description": [
+        "Sometimes the patterns you want to search for may have parts of it that may or may not exist. However, it may be important to check for them nonetheless.",
+        "You can specify the possible existence of an element with a question mark, <code>?</code>. This checks for zero or one of the preceding element. You can think of this symbol as saying the previous element is optional.",
+        "For example, there are slight differences in American and British English and you can use the question mark to match both spellings.",
+        "<blockquote>let american = \"color\";<br>let british = \"colour\";<br>let rainbowRegex= /colou?r/;<br>rainbowRegex.test(american); // Returns true<br>rainbowRegex.test(british); // Returns true</blockquote>",
+        "<h4>Instructions</h4>",
+        "Change the regex <code>favRegex</code> to match both the American English (favorite) and the British English (favourite) version of the word."
+      ],
+      "challengeSeed": [
+        "let favWord = \"favorite\";",
+        "let favRegex = /change/; // Change this line",
+        "let result = favRegex.test(favWord);"
+      ],
+      "tests": [
+        "assert(favRegex.source.match(/\\?/).length > 0, 'message: Your regex should use the optional symbol, <code>?</code>.');",
+        "assert(favRegex.test(\"favorite\"), 'message: Your regex should match <code>\"favorite\"</code>');",
+        "assert(favRegex.test(\"favourite\"), 'message: Your regex should match <code>\"favourite\"</code>');",
+        "assert(!favRegex.test(\"fav\"), 'message: Your regex should not match <code>\"fav\"</code>');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7dba367417b2b2512ba9",
+      "title": "Positive and Negative Lookahead",
+      "description": [
+        "<code>Lookaheads</code> are patterns that tell JavaScript to look-ahead in your string to check for patterns further along. This can be useful when you want to search for multiple patterns over the same string.",
+        "There are two kinds of <code>lookaheads</code>: <code>positive lookahead</code> and <code>negative lookahead</code>.",
+        "A <code>positive lookahead</code> will look to make sure the element in the search pattern is there, but won't actually match it. A positive lookahead is used as <code>(?=...)</code> where the <code>...</code> is the required part that is not matched.",
+        "On the other hand, a <code>negative lookahead</code> will look to make sure the element in the search pattern is not there. A negative lookahead is used as <code>(?!...)</code> where the <code>...</code> is the pattern that you do not want to be there. The rest of the pattern is returned if the negative lookahead part is not present.",
+        "Lookaheads are a bit confusing but some examples will help.",
+        "<blockquote>let quit = \"qu\";<br>let noquit = \"qt\";<br>let quRegex= /q(?=u)/;<br>let qRegex = /q(?!u)/;<br>quit.match(quRegex); // Returns [\"q\"]<br>noquit.match(qRegex); // Returns [\"q\"]</blockquote>",
+        "A more practical use of <code>lookaheads</code> is to check two or more patterns in one string. Here is a (naively) simple password checker that looks for between 3 and 6 characters and at least one number:",
+        "<blockquote>let password = \"abc123\";<br>let checkPass = /(?=\\w{3,6})(?=\\D*\\d)/;<br>checkPass.test(password); // Returns true</blockquote>",
+        "<h4>Instructions</h4>",
+        "Use <code>lookaheads</code> in the <code>pwRegex</code> to match passwords that are greater than 5 characters long and have two consecutive digits."
+      ],
+      "challengeSeed": [
+        "let sampleWord = \"astronaut\";",
+        "let pwRegex = /change/; // Change this line",
+        "let result = pwRegex.test(sampleWord);"
+      ],
+      "tests": [
+        "assert(pwRegex.source.match(/\\(\\?=.*?\\)\\(\\?=.*?\\)/) !== null, 'message: Your regex should use two positive <code>lookaheads</code>.');",
+        "assert(!pwRegex.test(\"astronaut\"), 'message: Your regex should not match <code>\"astronaut\"</code>');",
+        "assert(!pwRegex.test(\"airplanes\"), 'message: Your regex should not match <code>\"airplanes\"</code>');",
+        "assert(pwRegex.test(\"bana12\"), 'message: Your regex should match <code>\"bana12\"</code>');",
+        "assert(pwRegex.test(\"abc123\"), 'message: Your regex should match <code>\"abc123\"</code>');",
+        "assert(!pwRegex.test(\"123\"), 'message: Your regex should not match <code>\"123\"</code>');",
+        "assert(!pwRegex.test(\"1234\"), 'message: Your regex should not match <code>\"1234\"</code>');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7dbb367417b2b2512baa",
+      "title": "Reuse Patterns Using Capture Groups",
+      "description": [
+        "Some patterns you search for will occur multiple times in a string. It is wasteful to manually repeat that regex. There is a better way to specify when you have multiple repeat substrings in your string.",
+        "You can search for repeat substrings using <code>capture groups</code>. Parentheses, <code>(</code> and <code>)</code>, are used to find repeat substrings. You put the regex of the pattern that will repeat in between the parentheses.",
+        "To specify where that repeat string will appear, you use a backslash (\\) and then a number. This number starts at 1 and increases with each additional capture group you use. An example would be \\1 to match the first group.",
+        "The example below matches any word that occurs twice separated by a space:",
+        "<blockquote>let repeatStr = \"regex regex\";<br>let repeatRegex = /(\\w+)\\s\\1/;<br>repeatRegex.test(repeatStr); // Returns true<br>repeatStr.match(repeatRegex); // Returns [\"regex regex\", \"regex\"]</blockquote>",
+        "Using the <code>.match()</code> method on a string will return an array with the string it matches, along with its capture group.",
+        "<h4>Instructions</h4>",
+        "Use <code>capture groups</code> in <code>reRegex</code> to match numbers that appear three times in a string each separated by a space."
+      ],
+      "challengeSeed": [
+        "let repeatNum = \"42 42 42\";",
+        "let reRegex = /change/; // Change this line",
+        "let result = reRegex.test(repeatNum);"
+      ],
+      "tests": [
+        "assert(reRegex.source.match(/\\\\d/), 'message: Your regex should use the shorthand character class for digits.');",
+        "assert(reRegex.source.match(/\\\\\\d/g).length === 2, 'message: Your regex should reuse the capture group twice.');",
+        "assert(reRegex.test(\"42 42 42\"), 'message: Your regex should match <code>\"42 42 42\"</code>.');",
+        "assert(reRegex.test(\"100 100 100\"), 'message: Your regex should match <code>\"100 100 100\"</code>.');",
+        "assert(!reRegex.test(\"101 102 103\"), 'message: Your regex should not match <code>\"101 102 103\"</code>.');",
+        "assert(!reRegex.test(\"1 2 3\"), 'message: Your regex should not match <code>\"1 2 3\"</code>.');",
+        "assert(reRegex.test(\"10 10 10\"), 'message: Your regex should match <code>\"10 10 10\"</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7dbb367417b2b2512bab",
+      "title": "Use Capture Groups to Search and Replace",
+      "description": [
+        "Searching is useful. However, you can make searching even more powerful when it also changes (or replaces) the text you match.",
+        "You can search and replace text in a string using <code>.replace()</code> on a string. The inputs for <code>.replace()</code> is first the regex pattern you want to search for. The second parameter is the string to replace the match or a function to do something.",
+        "<blockquote>let wrongText = \"The sky is silver.\";<br>let silverRegex = /silver/;<br>wrongText.replace(silverRegex, \"blue\");<br>// Returns \"The sky is blue.\"</blockquote>",
+        "You can also access capture groups in the replacement string with dollar signs (<code>$</code>).",
+        "<blockquote>\"Code Camp\".replace(/(\\w+)\\s(\\w+)/, '$2 $1');<br>// Returns \"Camp Code\"</blockquote>",
+        "<h4>Instructions</h4>",
+        "Write a regex so that it will search for the string <code>\"good\"</code>. Then update the <code>replaceText</code> variable to replace <code>\"good\"</code> with <code>\"okey-dokey\"</code>."
+      ],
+      "challengeSeed": [
+        "let huhText = \"This sandwich is good.\";",
+        "let fixRegex = /change/; // Change this line",
+        "let replaceText = \"\"; // Change this line",
+        "let result = huhText.replace(fixRegex, replaceText);"
+      ],
+      "tests": [
+        "assert(code.match(/\\.replace\\(.*\\)/), 'message: You should use <code>.replace()</code> to search and replace.');",
+        "assert(result == \"This sandwich is okey-dokey.\" && replaceText === \"okey-dokey\", 'message: Your regex should change <code>\"This sandwich is good.\"</code> to <code>\"This sandwich is okey-dokey.\"</code>');",
+        "assert(code.match(/result\\s*=\\s*huhText\\.replace\\(.*?\\)/), 'message: You should not change the last line.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7dbb367417b2b2512bac",
+      "title": "Remove Whitespace from Start and End",
+      "description": [
+        "Sometimes whitespace characters around strings are not wanted but are there. Typical processing of strings is to remove the whitespace at the start and end of it.",
+        "<h4>Instructions</h4>",
+        "Write a regex and use the appropriate string methods to remove whitespace at the beginning and end of strings.",
+        "<strong>Note</strong><br>The <code>.trim()</code> method would work here, but you'll need to complete this challenge using regular expressions."
+      ],
+      "challengeSeed": [
+        "let hello = \"   Hello, World!  \";",
+        "let wsRegex = /change/; // Change this line",
+        "let result = hello; // Change this line"
+      ],
+      "tests": [
+        "assert(result == \"Hello, World!\", 'message: <code>result</code> should equal to <code>\"Hello, World!\"</code>');",
+        "assert(!code.match(/\\.trim\\(.*?\\)/), 'message: You should not use the <code>.trim()</code> method.');",
+        "assert(!code.match(/result\\s*=\\s*\".*?\"/), 'message: The <code>result</code> variable should not be set equal to a string.');"
+      ],
+      "solutions": [],
+      "hints": [
+        "You can use .replace() to remove the matched items by replacing them with an empty string."
+      ],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    }
+  ]
+}
diff --git a/seed/challenges/03-back-end-development-certification/api-projects.json b/seed/challenges/03-back-end-development-certification/api-projects.json
deleted file mode 100644
index 83ad4a9ab02e31..00000000000000
--- a/seed/challenges/03-back-end-development-certification/api-projects.json
+++ /dev/null
@@ -1,280 +0,0 @@
-{
-  "name": "API Projects",
-  "order": 26,
-  "time": "150 hours",
-  "helpRoom": "HelpBackEnd",
-  "challenges": [
-    {
-      "id": "576d6e1b12fd92c4207a9cbd",
-      "title": "Get Set for our API Development Projects",
-      "description": [
-        [
-          "//i.imgur.com/4IZjWZ3.gif",
-          "A gif showing how to create a c9.io account.",
-          "We recommend building our backend challenges on c9.io, a powerful browser-based development environment. This will save you hours of time that you would spend configuring your local computer to run Node.js and MongoDB - time you could instead spend coding.<br><br>Create a c9.io account by clicking the GitHub symbol in the upper right hand corner of the c9.io page. Click the big plus symbol to create a new workspace. Enter your email address when prompted.",
-          "https://c9.io"
-        ],
-        [
-          "//i.imgur.com/XPSVVdS.gif",
-          "A gif showing you how to create a node.js workspace template.",
-          "Click the + button to create a new c9 workspace.<br><br>Give your workspace a name then scroll down and choose the node.js template.  Then click the \"Create Workspace\" button.",
-          ""
-        ],
-        [
-          "//i.imgur.com/ZKN2G9y.gif",
-          "A gif showing you how to create a directory for your project and navigating to it in the console.",
-          "Create a new directory for the project you'll be working on by right-clicking on the top level folder and selecting \"Add Folder\".<br><br>Name the folder then navigate to that directory in your console window.",
-          ""
-        ],
-        [
-          "//i.imgur.com/GbUOniA.gif",
-          "A gif showing you how to initialize your package.json",
-          "In the console, type <code>npm init</code> to create your package.json file.<br><br>Follow the prompts and press enter to continue for each prompt (you may leave all of the defaults if you wish to do so).",
-          ""
-        ],
-        [
-          "//i.imgur.com/4ZW6es1.gif",
-          "A gif showing you how to initialize a git repository",
-          "You'll want to use git for version control.  First, add a new file titled <code>.gitignore</code><br><br>Open this file and add <code>node_modules</code> on the first line, then save the file<br><br>Next, in your console run the command <code>git init</code> to initialize this directory as a git repository.",
-          ""
-        ],
-        [
-          "//i.imgur.com/tZscE6c.gif",
-          "A gif showing you how to install express",
-          "Install express and save it as a project dependency by running <code>npm install express --save</code> in the console.",
-          ""
-        ],
-        [
-          "//i.imgur.com/ZAjiRLZ.gif",
-          "A gif showing you how to create a server.js file and require express",
-          "Create a new file titled <code>server.js</code> in your project directory.<br><br>Require the express module in this file then save the file.",
-          ""
-        ],
-        [
-          "//i.imgur.com/POEq6n6.gif",
-          "A gif showing you how to set up a hello world example application",
-          "At this point you are ready to begin creating your API project in the server.js file.<br><br>To quickly test your set up you can create a \"hello world\" application and preview it.<br><br>Copy the code from <a href='http://expressjs.com/en/starter/hello-world.html'>the express hello world example</a> into your server.js file with the exception of the port.<br><br>In c9, you'll always want to use port 8080.<br><br>Save the file.",
-          ""
-        ],
-        [
-          "//i.imgur.com/HcKj0MW.gif",
-          "A gif showing you how to run the application",
-          "To run your application run the command <code>node server.js</code> in your console.",
-          ""
-        ],
-        [
-          "//i.imgur.com/uSVY5GX.gif",
-          "A gif showing you how to open c9.io's preview window.",
-          "Open up your application in a preview tab by clicking Window > Share > Application > Open.",
-          ""
-        ],
-        [
-          "//i.imgur.com/zoK7lh6.gif",
-          "A gif showing you how to commit your changes.",
-          "Commit your changes to the git repository.<br><br>Check your git status by entering the command <code>git status</code> into the console.<br><br>Add your files with the command <code>git add .</code>.<br><br>Commit your changes with <code>git commit -m \"initial commit\"</code>.",
-          ""
-        ],
-        [
-          "//imgur.com/idbXyjD.gif",
-          "A gif showing you how to create a new GitHub repository and push your code to it.",
-          "Create a new GitHub repository. Then copy its .git URL.<br><br>Return to c9.io's terminal and set your GitHub remote URL: <code>git remote add origin</code> followed by the URL you copied from GitHub.<br><br>Run <code>git push origin master</code>.<br><br>Now tab back to GitHub and refresh, and you'll see that your code is now on GitHub.<br><br>You can now delete the hello world example code and begin your API project!",
-          "https://github.com/new"
-        ],
-        [
-          "//i.imgur.com/Qn0K65B.gif",
-          "A gif showing you how to add add-ons to Heroku.",
-          "We will soon add instructions for getting your API projects deployed to Heroku. For now, develop your projects right on c9.io.",
-          ""
-        ]
-      ],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "Waypoint",
-      "challengeType": 7,
-      "isRequired": false,
-      "translations": {}
-    },
-    {
-      "id": "bd7158d8c443edefaeb5bdef",
-      "title": "Timestamp Microservice",
-      "description": [
-        "<strong>Objective:</strong> Build a full stack JavaScript app that is functionally similar to this: <a href='https://timestamp-ms.herokuapp.com/' target='_blank'>https://timestamp-ms.herokuapp.com/</a> and deploy it to Heroku.",
-        "Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-our-api-development-projects'>https://freecodecamp.com/challenges/get-set-for-our-api-development-projects</a>.",
-        "Here are the specific user stories you should implement for this project:",
-        "<strong>User Story:</strong> I can pass a string as a parameter, and it will check to see whether that string contains either a Unix timestamp or a natural language date (example: January 1, 2016).",
-        "<strong>User Story:</strong> If it does, it returns both the Unix timestamp and the natural language form of that date.",
-        "<strong>User Story:</strong> If it does not contain a date or Unix timestamp, it returns null for those properties.",
-        "Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku.",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "challengeSeed": [
-        "gj4eL6satjI"
-      ],
-      "tests": [],
-      "isRequired": true,
-      "releasedOn": "January 1, 2016",
-      "type": "basejump",
-      "challengeType": 4,
-      "translations": {
-        "es": {
-          "title": "Microservicio de Marca Temporal",
-          "description": [
-            "<strong>Objetivo:</strong> Desarolla una aplicación de Pila Completa en JavaScript que sea funcionalmente similar a esta: <a href='https://timestamp-ms.herokuapp.com/' target='_blank'>https://timestamp-ms.herokuapp.com/</a> y despliegala en Heroku.",
-            "Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar <a href='/challenges/get-set-for-our-api-development-projects'>https://freecodecamp.com//challenges/get-set-for-our-api-development-projects</a>.",
-            "Aquí están las historias de usuario específicas que debes implementar para este proyecto:",
-            "<strong>Historia de Usuario:</strong> Puedo pasar una cadena como parámetro y comprobará si contiene o no una marca de tiempo para Unix o una fecha en lenguaje natural en inglés (Ejemplo: January 1, 2016).",
-            "<strong>Historia de Usuario:</strong> Si tiene una marca de tiempo para Unix, devuelve tanto la marca de tiempo de Unix como la fecha en lenguaje natural.",
-            "<strong>Historia de Usuario:</strong> Si no contiene una fecha ni una marca de tiempo para Unix, devolverá esas propiedades en <code>null</code>.",
-            "Una vez que hayas terminado de implementar estas historias de usuarios, pulsa el botón \"I've completed this challenge\" e introduce los URLs de tu repositorio en GitHub y de tu aplicación en vivo en Heroku.",
-            "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7158d8c443edefaeb5bdff",
-      "title": "Request Header Parser Microservice",
-      "description": [
-        "<strong>Objective:</strong> Build a full stack JavaScript app that is functionally similar to this: <a href='https://cryptic-ridge-9197.herokuapp.com/api/whoami/' target='_blank'>https://cryptic-ridge-9197.herokuapp.com/api/whoami/</a> and deploy it to Heroku.",
-        "Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-our-api-development-projects'>https://freecodecamp.com/challenges/get-set-for-our-api-development-projects</a>.",
-        "Here's the specific user story you should implement for this project:",
-        "<strong>User Story:</strong> I can get the IP address, language, and operating system for my browser as a JSON object.",
-        "Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku.",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "challengeSeed": [
-        "_0oqjSkGoHg"
-      ],
-      "tests": [],
-      "isRequired": true,
-      "releasedOn": "January 1, 2016",
-      "type": "basejump",
-      "challengeType": 4,
-      "translations": {
-        "es": {
-          "title": "Microservicio para analizar el encabezado de una petición",
-          "description": [
-            "<strong>Objetivo:</strong> Desarrolla una aplicación de Pila Completa en JavaScript que sea funcionalmente similar a esta: <a href='https://cryptic-ridge-9197.herokuapp.com/api/whoami/' target='_blank'>https://cryptic-ridge-9197.herokuapp.com/api/whoami/</a> y despliegala en Heroku.",
-            "Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar <a href='/challenges/get-set-for-our-api-development-projects'>https://freecodecamp.com//challenges/get-set-for-our-api-development-projects</a>.",
-            "Aquí están las historias de usuario específicas que debes implementar para este proyecto:",
-            "<strong>Historia de Usuario:</strong> Puedo obtener la dirección IP, idioma y sistema operativo de mi navegador.",
-            "Una vez que hayas terminado de implementar estas historias de usuarios, pulsa el botón \"I've completed this challenge\" e introduce los URLs de tu repositorio en GitHub y de tu aplicación en vivo en Heroku.",
-            "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7158d8c443edefaeb5bd0e",
-      "title": "URL Shortener Microservice",
-      "description": [
-        "<strong>Objective:</strong> Build a full stack JavaScript app that is functionally similar to this: <a href='https://little-url.herokuapp.com/' target='_blank'>https://little-url.herokuapp.com/</a> and deploy it to Heroku.",
-        "Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-our-api-development-projects'>https://freecodecamp.com/challenges/get-set-for-our-api-development-projects</a>.",
-        "Here are the specific user stories you should implement for this project:",
-        "<strong>User Story:</strong>  I can pass a URL as a parameter and I will receive a shortened URL in the JSON response.",
-        "<strong>User Story:</strong> If I pass an invalid URL that doesn't follow the valid http://www.example.com format, the JSON response will contain an error instead.",
-        "<strong>User Story:</strong> When I visit that shortened URL, it will redirect me to my original link.",
-        "<strong>Pro Tip:</strong> Checkout this <a href='http://forum.freecodecamp.com/t/guide-for-using-mongodb-and-deploying-to-heroku/19347' target='_blank'>wiki article</a> for tips on integrating MongoDB on Heroku.",
-        "Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku.",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "challengeSeed": [
-        "B-gY9nAtPIw"
-      ],
-      "tests": [],
-      "isRequired": true,
-      "releasedOn": "January 1, 2016",
-      "type": "basejump",
-      "challengeType": 4,
-      "translations": {
-        "es": {
-          "title": "Microservicio para acortar URLs",
-          "description": [
-            "<strong>Objetivo:</strong> Desarrolla una aplicación de Pila Completa en JavaScript que sea funcionalmente similar a esta: <a href='https://little-url.herokuapp.com/' target='_blank'>https://little-url.herokuapp.com/</a> y despliegala en Heroku.",
-            "Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar <a href='/challenges/get-set-for-our-api-development-projects'>https://freecodecamp.com//challenges/get-set-for-our-api-development-projects</a>.",
-            "Aquí están las historias de usuario específicas que debes implementar para este proyecto:",
-            "<strong>Historia de Usuario:</strong> Puedo pasar una URL como parámetro y recibiré una URL acortada en la respuesta JSON.",
-            "<strong>Historia de Usuario:</strong> Si paso una URL inválido que no siga el formato válido http://www.exmaple.com, en cambio la respuesta JSON contendrá un mensaje de error.",
-            "<strong>Historia de Usuario:</strong> Cuando visite el URL acortado, me redirigirá a mi enlace original.",
-            "Una vez que hayas terminado de implementar estas historias de usuarios, pulsa el botón \"I've completed this challenge\" e introduce los URLs de tu repositorio en GitHub y de tu aplicación en vivo en Heroku.",
-            "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7158d8c443edefaeb5bdee",
-      "title": "Image Search Abstraction Layer",
-      "description": [
-        "<strong>Objective:</strong> Build a full stack JavaScript app that allows you to search for images like this: <a href='https://cryptic-ridge-9197.herokuapp.com/api/imagesearch/lolcats%20funny?offset=10' target='_blank'>https://cryptic-ridge-9197.herokuapp.com/api/imagesearch/lolcats%20funny?offset=10</a> and browse recent search queries like this: <a href='https://cryptic-ridge-9197.herokuapp.com/api/latest/imagesearch/' target='_blank'>https://cryptic-ridge-9197.herokuapp.com/api/latest/imagesearch/</a>. Then deploy it to Heroku.",
-        "Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-our-api-development-projects'>https://freecodecamp.com/challenges/get-set-for-our-api-development-projects</a>.",
-        "Here are the specific user stories you should implement for this project:",
-        "<strong>User Story:</strong> I can get the image URLs, alt text and page urls for a set of images relating to a given search string.",
-        "<strong>User Story:</strong> I can paginate through the responses by adding a ?offset=2 parameter to the URL.",
-        "<strong>User Story:</strong> I can get a list of the most recently submitted search strings.",
-        "Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku.",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "challengeSeed": [
-        "QIpA1oP8EGQ"
-      ],
-      "tests": [],
-      "isRequired": true,
-      "releasedOn": "January 1, 2016",
-      "type": "basejump",
-      "challengeType": 4,
-      "translations": {
-        "es": {
-          "title": "Capa de abstracción para buscar imágenes",
-          "description": [
-            "<strong>Objetivo:</strong> Desarolla una aplicación de Pila Completa en JavaScript que te permite buscar imágenes como esta: <a href='https://cryptic-ridge-9197.herokuapp.com/api/imagesearch/lolcats%20funny?offset=10' target='_blank'>https://cryptic-ridge-9197.herokuapp.com/api/imagesearch/lolcats%20funny?offset=10</a> y examinar las búsquedas recientes como esta: <a href='https://cryptic-ridge-9197.herokuapp.com/api/latest/imagesearch/' target='_blank'>https://cryptic-ridge-9197.herokuapp.com/api/latest/imagesearch/</a>. Después, despliegala en Heroku.",
-            "Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar <a href='/challenges/get-set-for-our-api-development-projects'>https://freecodecamp.com//challenges/get-set-for-our-api-development-projects</a>.",
-            "Aquí están las historias de usuario específicas que debes implementar para este proyecto:",
-            "<strong>Historia de Usuario:</strong> Puedo obtener la URL de una imagen, texto alternativo y URLs de las páginas de un conjunto de imágenes que se relacionen con una cadena de texto dada.",
-            "<strong>Historia de Usuario:</strong> Puedo examinar página a página las respuestas añadiendo un parámetro del estilo <code>?offset=2</code> al URL.",
-            "<strong>Historia de Usuario:</strong> Puedo obtener una lista de las cadenas búscadas que se enviaron más recientemente.",
-            "Una vez que hayas terminado de implementar estas historias de usuarios, pulsa el botón \"I've completed this challenge\" e introduce los URLs de tu repositorio en GitHub y de tu aplicación en vivo en Heroku.",
-            "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7158d8c443edefaeb5bd0f",
-      "title": "File Metadata Microservice",
-      "description": [
-        "<strong>Objective:</strong> Build a full stack JavaScript app that is functionally similar to this: <a href='https://aryanj-file-size.herokuapp.com/' target='_blank'>https://aryanj-file-size.herokuapp.com/</a> and deploy it to Heroku.",
-        "Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-our-api-development-projects'>https://freecodecamp.com/challenges/get-set-for-our-api-development-projects</a>.",
-        "Here are the specific user stories you should implement for this project:",
-        "<strong>User Story:</strong> I can submit a FormData object that includes a file upload.",
-        "<strong>User Story:</strong> When I submit something, I will receive the file size in bytes within the JSON response",
-        "<strong>Hint:</strong> You may want to use this package: <a href='https://www.npmjs.com/package/multer' target='_blank'>https://www.npmjs.com/package/multer</a>",
-        "Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku.",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "challengeSeed": [
-        "w_W2-VOgy9g"
-      ],
-      "tests": [],
-      "isRequired": true,
-      "releasedOn": "January 1, 2016",
-      "type": "basejump",
-      "challengeType": 4,
-      "translations": {
-        "es": {
-          "title": "Microservicio de metadatos de archivos",
-          "description": [
-            "<strong>Objetivo:</strong> Desarrolla una aplicación de Pila Completa en JavaScript que sea funcionalmente similar a esta: <a href='https://cryptic-ridge-9197.herokuapp.com/' target='_blank'>https://cryptic-ridge-9197.herokuapp.com/</a>  y despliegala en Heroku.",
-            "Ten en cuenta que para cada proyecto, deberías crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas como hacer esto, vuelve a visitar <a href='/challenges/get-set-for-our-api-development-projects'>https://freecodecamp.com//challenges/get-set-for-our-api-development-projects</a>.",
-            "Aquí están las historias de usuario específicas que debes implementar para este proyecto:",
-            "<strong>Historia de Usuario:</strong> Puedo enviar un objeto FormData que incluya una subida de un archivo.",
-            "<strong>Historia de Usuario:</strong> Cuando envío algo, recibiré el tamao del archivo en bytes en la respuesta JSON.",
-            "<strong>Pista:</strong> Puede servirte este paquete: <a href='https://www.npmjs.com/package/multer' target='_blank'>https://www.npmjs.com/package/multer</a>",
-            "Una vez que hayas terminado de implementar estas historias de usuarios, pulsa el botón \"I've completed this challenge\" e introduce los URLs de tu repositorio en GitHub y de tu aplicación en vivo en Heroku.",
-            "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/03-back-end-development-certification/automated-testing-and-debugging.json b/seed/challenges/03-back-end-development-certification/automated-testing-and-debugging.json
deleted file mode 100644
index 1830846ccf3d62..00000000000000
--- a/seed/challenges/03-back-end-development-certification/automated-testing-and-debugging.json
+++ /dev/null
@@ -1,85 +0,0 @@
-{
-  "name": "Automated Testing and Debugging",
-  "order": 20,
-  "time": "15 minutes",
-  "helpRoom": "HelpBackEnd",
-  "challenges": [
-    {
-      "id": "cf1111c1c16feddfaeb6bdef",
-      "title": "Use the JavaScript Console",
-      "description": [
-        "Both Chrome and Firefox have excellent JavaScript consoles, also known as DevTools, for debugging your JavaScript.",
-        "You can find <code>Developer tools</code> in your Chrome's menu or <code>Web Console</code> in FireFox's menu. If you're using a different browser, or a mobile phone, we strongly recommend switching to desktop Firefox or Chrome.",
-        "Let's print to this console using the <code>console.log</code> method.",
-        "<code>console.log('Hello world!');</code>"
-      ],
-      "challengeSeed": [
-        "",
-        "",
-        ""
-      ],
-      "solutions": [
-        "console.log('Hello world!');"
-      ],
-      "tests": [
-        "assert(editor.getValue().match(/console\\.log\\(/gi), 'message: You should use the <code>console.log</code> method to log <code>\"Hello world!\"</code> to your JavaScript console.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 1,
-      "translations": {
-        "es": {
-          "title": "Utiliza la consola de JavaScript",
-          "description": [
-            "Tanto Chrome como Firefox tienen excelentes consolas JavaScript, también conocidas como DevTools, para depurar tu código JavaScript.",
-            "Puedes encontrar las Herramientas para desarrolladores (<code>Developer tools</code>) en el menú de Chrome o la Consola web (<code>Web Console</code>) en el menú de FireFox. Si estás utilizando un navegador diferente, o un dispositivo móvil, nuestra recomendación es que cambies a la versión de escritorio de Firefox o Chrome.",
-            "Vamos a imprimir en esta consola utilizando el método <code>console.log</code>.",
-            "<code>console.log('Hello world!')</code>"
-          ]
-        }
-      }
-    },
-    {
-      "id": "cf1111c1c16feddfaeb7bdef",
-      "title": "Using typeof",
-      "description": [
-        "You can use <code>typeof</code> to check the <code>data structure</code>, or type, of a variable.",
-        "Note that in JavaScript, arrays are technically a type of object.",
-        "Try using <code>typeof</code> on each of the following to see which types they have.",
-        "<code>console.log(typeof \"\");</code>",
-        "<code>console.log(typeof 0);</code>",
-        "<code>console.log(typeof []);</code>",
-        "<code>console.log(typeof {});</code>"
-      ],
-      "challengeSeed": [
-        "",
-        "",
-        ""
-      ],
-      "solutions": [
-        "console.log(typeof \"\");\nconsole.log(typeof 0);\nconsole.log(typeof []);\nconsole.log(typeof {});"
-      ],
-      "tests": [
-        "assert(code.match(/console\\.log\\(typeof[\\( ][\"'].*[\"']\\)?\\);/), 'message: You should <code>console.log</code> the <code>typeof</code> a string.');",
-        "assert(code.match(/console\\.log\\(typeof[\\( ]\\d+\\.?\\d*\\)?\\);/), 'message: You should <code>console.log</code> the <code>typeof</code> a number.');",
-        "assert(code.match(/console\\.log\\(typeof[\\( ]\\[\\]\\)?\\);/), 'message: You should <code>console.log</code> the <code>typeof</code> an array.');",
-        "assert(code.match(/console\\.log\\(typeof[\\( ]\\{\\}\\)?\\);/), 'message: You should <code>console.log</code> the <code>typeof</code> an object.');"
-      ],
-      "type": "waypoint",
-      "challengeType": 1,
-      "translations": {
-        "es": {
-          "title": "Usando typeof",
-          "description": [
-            "Puedes usar <code>typeof</code> para verificar la <code>estructura de datos</code>, o el tipo, de una variable.",
-            "Ten en cuenta que, en JavaScript, los vectores son técnicamente un tipo de objeto.",
-            "Intenta utilizar <code>typeof</code> en cada uno de los siguientes valores para ver de qué tipo son.",
-            "<code>console.log(typeof(\"\"));</code>",
-            "<code>console.log(typeof(0));</code>",
-            "<code>console.log(typeof([]));</code>",
-            "<code>console.log(typeof({}));</code>"
-          ]
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/03-back-end-development-certification/back-end-development-certificate.json b/seed/challenges/03-back-end-development-certification/back-end-development-certificate.json
deleted file mode 100644
index ab6516be2805c5..00000000000000
--- a/seed/challenges/03-back-end-development-certification/back-end-development-certificate.json
+++ /dev/null
@@ -1,157 +0,0 @@
-{
-  "name": "Claim Your Back End Development Certificate",
-  "order": 29,
-  "time": "5 minutes",
-  "challenges": [
-    {
-      "id": "660add10cb82ac38a17513be",
-      "title": "Claim Your Back End Development Certificate",
-      "description": [
-        [
-          "//i.imgur.com/8v3t84p.jpg",
-          "An image of our Back End Development Certificate",
-          "This challenge will give you your verified Back End Development Certificate. Before we issue your certificate, we must verify that you have completed all of the back end development projects. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
-          ""
-        ],
-        [
-          "//i.imgur.com/HArFfMN.jpg",
-          "The definition of plagiarism: Plagiarism (noun) - copying someone else’s work and presenting it as your own without crediting them",
-          "By clicking below, you pledge that all of your submitted code A) is code you or your pair personally wrote, or B) comes from open source libraries like jQuery, or C) has been clearly attributed to its original authors. You also give us permission to audit your challenge solutions and revoke your certificate if we discover evidence of plagiarism.",
-          "#"
-        ],
-        [
-          "//i.imgur.com/2qn7tHp.jpg",
-          "An image of the text \"Back End Development Certificate requirements\"",
-          "Let's confirm that you have completed our back end development projects. Click the button below to verify this.",
-          "#"
-        ],
-        [
-          "//i.imgur.com/16SIhHO.jpg",
-          "An image of the word \"Congratulations\"",
-          "Congratulations! We've added your Back End Development Certificate to your portfolio page. Unless you choose to hide your solutions, this certificate will remain publicly visible and verifiable.",
-          ""
-        ]
-      ],
-      "challengeSeed": [
-        {
-          "properties": [
-            "isHonest",
-            "isBackEndCert"
-          ],
-          "apis": [
-            "/certificate/honest",
-            "/certificate/verify/back-end"
-          ],
-          "stepIndex": [
-            1,
-            2
-          ]
-        }
-      ],
-      "tests": [
-        {
-          "id": "bd7158d8c443edefaeb5bdef",
-          "title": "Timestamp Microservice"
-        },
-        {
-          "id": "bd7158d8c443edefaeb5bdff",
-          "title": "Request Header Parser Microservice"
-        },
-        {
-          "id": "bd7158d8c443edefaeb5bd0e",
-          "title": "URL Shortener Microservice"
-        },
-        {
-          "id": "bd7158d8c443edefaeb5bdee",
-          "title": "Image Search Abstraction Layer"
-        },
-        {
-          "id": "bd7158d8c443edefaeb5bd0f",
-          "title": "File Metadata Microservice"
-        },
-        {
-          "id": "bd7158d8c443eddfaeb5bdef",
-          "title": "Build a Voting App"
-        },
-        {
-          "id": "bd7158d8c443eddfaeb5bdff",
-          "title": "Build a Nightlife Coordination App"
-        },
-        {
-          "id": "bd7158d8c443eddfaeb5bd0e",
-          "title": "Chart the Stock Market"
-        },
-        {
-          "id": "bd7158d8c443eddfaeb5bd0f",
-          "title": "Manage a Book Trading Club"
-        },
-        {
-          "id": "bd7158d8c443eddfaeb5bdee",
-          "title": "Build a Pinterest Clone"
-        }
-      ],
-      "type": "Waypoint",
-      "challengeType": 7,
-      "translations": {
-        "es": {
-          "title": "Reclama tu certificado de desarrollo del lado del servidor",
-          "description": [
-            [
-              "//i.imgur.com/8v3t84p.jpg",
-              "Una imagen que muestra nuestro certificado de desarrollo del lado del servidor",
-              "Este desafío te otorga tu certificado autenticado de desarrollo del lado del servidor. Antes de que podamos emitir tu certificado, debemos verificar que has completado todos los proyectos de desarrollo del lado del servidor. También debes aceptar nuestro Juramento de honestidad académica. Pulsa el botón siguiente para iniciar este proceso.",
-              ""
-            ],
-            [
-              "//i.imgur.com/HArFfMN.jpg",
-              "Plagio (nombre): acción y efecto de plagiar. Plagiar (verbo) - copiar en lo sustancial obras ajenas, dándolas como propias.",
-              "Al pulsar el botón siguiente, juras que todo el código en tus soluciones a los desafíos A) es código que tú o tu compañero escribieron personalmente, o B) proviene de librerías de código abierto como jQuery, o C) ha sido claramente atribuido a sus autores originales. También nos otorgas el permiso para auditar tus soluciones a los desafíos y revocar tu certificado si encontramos evidencia de plagio.",
-              "#"
-            ],
-            [
-              "//i.imgur.com/2qn7tHp.jpg",
-              "Una imagen del texto \"Back End Development Certificate requirements\"",
-              "Confirmemos que has completado todos nuestros proyectos de desarrollo del lado del servidor. Pulsa el botón siguiente para hacer la verificación.",
-              "#"
-            ],
-            [
-              "//i.imgur.com/16SIhHO.jpg",
-              "Una imagen de la palabra \"Congratulations\"",
-              "¡Felicitaciones! Hemos agregado tu certificado de desarrollo del lado del servidor. A menos que elijas no mostrar tus soluciones, este certificado será públicamente visible y verificable.",
-              ""
-            ]
-          ]
-        },
-        "fr": {
-          "title": "Demandez votre certificat de développement Back End",
-          "description": [
-            [
-              "//i.imgur.com/8v3t84p.jpg",
-              "Une image de notre certificat de développement Back End",
-              "Ce défi vous donnera votre certificat de développement Back End authentifié. Avant que nous ne vous le donnions, nous devons vérifier que vous avez complété tous les projets de développement Back End. Vous devez aussi accepter notre serment de droiture académique. Cliquez le bouton ci-dessous pour commencer cette procédure.",
-              ""
-            ],
-            [
-              "//i.imgur.com/HArFfMN.jpg",
-              "La définition du plagiat: Plagiat (nom) - copier le travail de quelqu'un d'autre et le presenter comme le votre sans lui en donner crédit.",
-              "En cliquant ci dessous, vous faites le serment que tout le code que vous avez mis en ligne A) est un code que vous ou un pair avez personellement écrit, ou B) qu'il provient de librairies open-source comme jQuery, ou C) qu'il a été cmairement attribué à ses auteurs originaux. Vous nous donnez la permission de consulter vos solutions aux défis et de révoquer votre certificat si nous y trouvons une preuve de plagiat.",
-              "#"
-            ],
-            [
-              "//i.imgur.com/2qn7tHp.jpg",
-              "Une image du texte \"Back End Development Certificate requirements\"",
-              "Confirmons que vous avez complété nos projets de développement Back End. Cliquez sur le bouton ci dessous pour vérifier.",
-              "#"
-            ],
-            [
-              "//i.imgur.com/16SIhHO.jpg",
-              "Une image du mot \"Congratulations\"",
-              "Félicitations! Nous avons ajouté votre certificat de développement Back End à votre page portfolio. A moins que vous ne choisissiez de cacher vos solutions, ce certificat restera publiquement visible et vérifiable.",
-              ""
-            ]
-          ]
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/03-back-end-development-certification/dynamic-web-applications.json b/seed/challenges/03-back-end-development-certification/dynamic-web-applications.json
deleted file mode 100644
index 4e06208a4fc15a..00000000000000
--- a/seed/challenges/03-back-end-development-certification/dynamic-web-applications.json
+++ /dev/null
@@ -1,395 +0,0 @@
-{
-  "name": "Dynamic Web Application Projects",
-  "order": 27,
-  "time": "250 hours",
-  "helpRoom": "HelpBackEnd",
-  "challenges": [
-    {
-      "id": "bd7158d8c443eddfaeb5bcef",
-      "title": "Get Set for our Dynamic Web Application Projects",
-      "description": [
-        [
-          "//i.imgur.com/4IZjWZ3.gif",
-          "A gif showing how to create a c9.io account.",
-          "We recommend building our full stack Basejump challenges on c9.io, a powerful browser-based development environment. This will save you hours of time that you would spend configuring your local computer to run Node.js and MongoDB - time you could instead spend coding.<br><br>Create a c9.io account by clicking the GitHub symbol in the upper right hand corner of the c9.io page. Click the big plus symbol to create a new workspace. Enter your email address when prompted.",
-          "https://c9.io"
-        ],
-        [
-          "//i.imgur.com/F7i5Hhi.gif",
-          "A gif showing how to fill out the new workspace form",
-          "Instead of starting from scratch, we recommend using <a href='http://www.clementinejs.com/' target='_blank'>Clementine.js</a>, a full stack JavaScript \"boilerplate\" that already has some basic code written for you. Clementine.js has a detailed tutorial you can go through to build it yourself, but for now let's just clone its code.<br><br>On c9.io, give your workspace a name, then leave \"Template\" as custom and create your workspace from this GitHub url: <code>https://github.com/johnstonbl01/clementinejs-fcc.git</code>",
-          ""
-        ],
-        [
-          "//i.imgur.com/42m1vyr.gif",
-          "A gif showing you how to show hidden files.",
-          "Click the gear in the upper right corner of c9.io's file structure. Select \"Show Hidden Files\".",
-          ""
-        ],
-        [
-          "//i.imgur.com/qrE8xaK.gif",
-          "A gif showing you how to create a new file.",
-          "Right click and create a new file called <code>.env</code>.",
-          ""
-        ],
-        [
-          "//i.imgur.com/jkQX9SQ.gif",
-          "A gif showing you how to prep your environmental variables in your .env file.",
-          "Open your .env file and paste this into it, then save it:<br><br><code>GITHUB_KEY=<br>GITHUB_SECRET=<br>MONGO_URI=mongodb://localhost:27017/clementinejs<br>PORT=8080<br>APP_URL=http://localhost:8080/</code>",
-          ""
-        ],
-        [
-          "//i.imgur.com/f3DE7zB.gif",
-          "A gif showing you how to open c9.io's preview window.",
-          "Open up your application in a preview tab by clicking Window > Share > Application > Open.",
-          ""
-        ],
-        [
-          "//i.imgur.com/Ip0qUdQ.gif",
-          "A gif showing you how to create a GitHub app using c9.io's preview URL.",
-          "Create a GitHub app for authentication and choose an \"Application name\". For the homepage URL, paste the URL from your preview tab. You'll also paste the URL from your preview tab into \"Authorization callback URL\", then add to it: <code>auth/github/callback</code>",
-          "https://github.com/settings/applications/new"
-        ],
-        [
-          "//i.imgur.com/qCUVRFb.gif",
-          "A gif showing you how to transfer GitHub's key and secret over to your .env file, as well as your c9.io URL.",
-          "GitHub will create an app and present you with a Client ID and a Client Secret. Set your <code>.env</code> file's <code>GITHUB_KEY</code> equal to the Client ID, and set your <code>.env</code> file's <code>GITHUB_SECRET</code> equal to the Client Secret. Copy the URL from your preview tab and paste it into your <code>.env</code> file as your <code>APP_URL</code>.",
-          ""
-        ],
-        [
-          "//i.imgur.com/2a20Vah.gif",
-          "A gif showing you how to install MongoDB and start it in c9.io's terminal.",
-          "In your terminal, install MongoDB by entering: <br><br><code>sudo apt-get install mongodb-org</code><br><br> then start MongoDB by entering:<br><br><code>mongod --smallfiles</code>",
-          ""
-        ],
-        [
-          "//i.imgur.com/dC55pWk.gif",
-          "A gif showing you how to open a new tab in c9.io's terminal.",
-          "Open a new terminal tab with the <code>+</code> button above your terminal, then run <code>npm install</code>",
-          ""
-        ],
-        [
-          "//i.imgur.com/54OC2Ro.gif",
-          "A gif showing you how to navigate to your preview tab and sign in to your new Clementine.js app.",
-          "Run <code>node server.js</code> to start the server. Refresh your preview tab. You should see the Clementine.js logo. Click \"sign in\" and accept GitHub's prompt to authorize the application.",
-          ""
-        ],
-        [
-          "//i.imgur.com/2IJfyvN.gif",
-          "A gif showing you how to click the button to trigger an AJAX action with Clementine.js and how to look at your user profile from the GitHub authentication data.",
-          "Click the \"Click Me\" button and you'll see that it increments the number clicks. Click the profile button and you'll see that it has your GitHub information.",
-          ""
-        ],
-        [
-          "//i.imgur.com/bjO5pnq.gif",
-          "A gif showing you how to create a new GitHub repository and push your code up to it.",
-          "Create a new GitHub repository. Then copy its .git URL.<br><br>Return to c9.io's terminal and set your GitHub remote URL: <code>git remote set-url origin</code> followed by the URL you copied from GitHub.<br><br>Run <code>git push origin master</code>.<br><br>Now tab back to GitHub and refresh, and you'll see that your code is now on GitHub.",
-          "https://github.com/new"
-        ],
-        [
-          "//i.imgur.com/Qn0K65B.gif",
-          "A gif showing you how to add add-ons to Heroku.",
-          "We will soon add instructions for getting Clementine running on Heroku. For now, develop your Basejumps right on c9.io.",
-          ""
-        ]
-      ],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "Waypoint",
-      "challengeType": 7,
-      "isRequired": false,
-      "translations": {
-        "es": {
-          "title": "Prepárate para nuestros Proyectos de Desarrollo en el lado del servidor",
-          "description": [
-            [
-              "//i.imgur.com/4IZjWZ3.gif",
-              "Una imagen gif que te muestra cómo crear una cuenta en c9.io.",
-              "Te recomendamos resolver nuestros desafíos de pila completa (full stack) en c9.io, un poderoso ambiente de desarrollo basado en tu navegador. Esto te ahorrará muchas horas que utilizarías configurando tu computadora para correr Node.js y MongoDB - tiempo que podrías utilizar escribiendo código. <br>Crea una cuenta en c9.io pulsando el símbolo de GitHub en la esquina superior derecha de la página de c9.io. Pulsa el botón con el símbolo de suma para crear una área de trabajo nueva. Introduce tu dirección de correo electrónico cuando se te solicite.",
-              "https://c9.io"
-            ],
-            [
-              "//i.imgur.com/F7i5Hhi.gif",
-              "Una imagen gif que te muestra cómo llenar el formulario para crear un área de trabajo nueva",
-              "En vez de iniciar desde cero, recomendamos utilizar Clementine.js, un modelo (<em>bolierplate</em>) de JavaScript pila completa (full stack) que viene con código básico ya escrito para ti. Clementine.js tiene un tutorial detallado que puedes seguir para construirlo por ti mismo, pero por ahora simplemente vamos a clonarlo. En c9.io, dale un nombre a tu área de trabajo, luego deja \"Plantilla\" (\"Template\") como personalizado y crea tu espacio de trabajo usando el siguiente url de GitHub: <code>https://github.com/johnstonbl01/clementinejs-fcc.git</code>",
-              ""
-            ],
-            [
-              "//i.imgur.com/42m1vyr.gif",
-              "Una imagen gif que te muestra cómo mostrar los archivos ocultos.",
-              "Pulsa el engrane en la esquina superior derecha del árbol de archivos de c9.io. Selecciona \"show hidden files\".",
-              ""
-            ],
-            [
-              "//i.imgur.com/qrE8xaK.gif",
-              "Una imagen gif que te muestra cómo crear un archivo nuevo.",
-              "Haciendo clic derecho, crea un nuevo archivo llamado <code>.env</code>.",
-              ""
-            ],
-            [
-              "//i.imgur.com/jkQX9SQ.gif",
-              "Una imagen gif que te muestra cómo preparar tus variables de ambiente en tu archivo .env.",
-              "Abre tu archivo .env pega el siguiente código, y luego guárdalo: <br><code>GITHUB_KEY=<br>GITHUB_SECRET=<br>MONGO_URI=mongodb://localhost:27017/clementinejs<br>PORT=8080<br>APP_URL=http://localhost:8080/</code>",
-              ""
-            ],
-            [
-              "//i.imgur.com/f3DE7zB.gif",
-              "Una imagen gif que te muestra cómo abir la vista previa de la ventana de c9.io.",
-              "Abre tu aplicación en una pestaña de vista previa pulsando window > share > application > open.",
-              ""
-            ],
-            [
-              "//i.imgur.com/Ip0qUdQ.gif",
-              "Una imagen gif que te muestra cómo crear una aplicación de GitHub usando la URL de vista previa de c9.io.",
-              "Crea una aplicación de GitHub para autenticación y elige un \"Nombre de aplicación\". Para la URL de inicio (homepage), pega la URL de tu pestaña de vista previa. También debes pegar la URL de tu pestaña de vista previa en <code>Authorization callback URL</code>, agrégale: <code>auth/github/callback</code>",
-              "https://github.com/settings/applications/new"
-            ],
-            [
-              "//i.imgur.com/qCUVRFb.gif",
-              "Una imagen gif que te muestra cómo transferir tu llave (key) y tu código secreto (secret) de GitHub a tu archivo .env, así como tu URL de c9.io.",
-              "GitHub creará una aplicación y te entregará un ID de cliente (Client ID) y un Código secreto de cliente (Client Secret). Haz que el GITHUB_KEY en tu archivo .env sea igual al ID de cliente, y haz que tu GITHUB_SECRET en el archivo .env sea igual al Código secreto de cliente. Copia la URL de tu pestaña de vista previa y pégala en tu archivo .env como tu APP_URL.",
-              ""
-            ],
-            [
-              "//i.imgur.com/2a20Vah.gif",
-              "Una imagen gif que te muestra cómo iniciar mongoDB en la terminal de c9.io.",
-              "En tu terminal, instala MongoDB usando el siguiente comando: <br><br><code>sudo apt-get install mongodb-org</code><br><br>. Inicia MongoDB con el siguiente comando: <code>mongod --smallfiles</code>",
-              ""
-            ],
-            [
-              "//i.imgur.com/dC55pWk.gif",
-              "Una imagen gif que te muestra cómo abrir una nueva pestaña en la terminal de c9.io.",
-              "Abre una nueva pestaña de terminal pulsando el botón de + sobre tu terminal, luego ejecuta <code>npm install</code>",
-              ""
-            ],
-            [
-              "//i.imgur.com/54OC2Ro.gif",
-              "Una imagen gif que te muestra cómo navegar a tu pestaña de vista previa e ingresar a tu nueva aplicación Clementine.js.",
-              "Ejecuta <code>node server.js</code> para iniciar el servidor. Actualiza tu pestaña de vista previa. Deberías poder ver el logo de Clementine.js. Pulsa \"sign in\"  y acepta la solicitud de GitHub para autorizar la aplicación.",
-              ""
-            ],
-            [
-              "//i.imgur.com/2IJfyvN.gif",
-              "Una imagen gif que te muestra cómo pulsar un botón para desencadenar una acción AJAX con Clementine.js y cómo ver tu perfil de usuario en los datos de autenticación provistos por GitHub.",
-              "Pulsa el botón que dice \"click me\" y verás que se incrementa el número de clics. Pulsa el botón de perfil (profile) y verás la información de tu perfil de GitHub.",
-              ""
-            ],
-            [
-              "//i.imgur.com/bjO5pnq.gif",
-              "Una imagen gif que te muestra cómo crear un nuevo repositorio de GitHub GitHub y empujar allí tu código.",
-              "Crea un nuevo repositorio en GitHub. Luego copia su ULR .git. <br>Regresa a tu terminal de c9.io y establece tu URL remota de GitHub: <code>git remote set-url origin</code> seguido de la URL que copiaste de GitHub. <br>Ejecuta <code>git push origin master</code>. <br>Ahora ve de regreso a la página de GitHub y actualízala. Verás que tu código ahora está ahora en GitHub.",
-              "https://github.com/new"
-            ],
-            [
-              "//i.imgur.com/Qn0K65B.gif",
-              "Una imagen gif que te muestra cómo agregar complementos a Heroku.",
-              "Pronto agregaremos instrucciones para hacer que Clementine corra en Heroku. Por ahora, desarrolla tus Basejumps en c9.io.",
-              ""
-            ]
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7158d8c443eddfaeb5bdef",
-      "title": "Build a Voting App",
-      "description": [
-        "<strong>Objective:</strong> Build a full stack JavaScript app that is functionally similar to this: <a href='https://fcc-voting-arthow4n.herokuapp.com/' target='_blank'>https://fcc-voting-arthow4n.herokuapp.com/</a> and deploy it to Heroku.",
-        "Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
-        "Here are the specific user stories you should implement for this project:",
-        "<strong>User Story:</strong> As an authenticated user, I can keep my polls and come back later to access them.",
-        "<strong>User Story:</strong> As an authenticated user, I can share my polls with my friends.",
-        "<strong>User Story:</strong> As an authenticated user, I can see the aggregate results of my polls.",
-        "<strong>User Story:</strong> As an authenticated user, I can delete polls that I decide I don't want anymore.",
-        "<strong>User Story:</strong> As an authenticated user, I can create a poll with any number of possible items.",
-        "<strong>User Story:</strong> As an unauthenticated or authenticated user, I can see and vote on everyone's polls.",
-        "<strong>User Story:</strong> As an unauthenticated or authenticated user, I can see the results of polls in chart form. (This could be implemented using Chart.js or Google Charts.)",
-        "<strong>User Story:</strong> As an authenticated user, if I don't like the options on a poll, I can create a new option.",
-        "Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku.",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "challengeSeed": [
-        "JBKnbY_fdg4"
-      ],
-      "tests": [],
-      "type": "basejump",
-      "challengeType": 4,
-      "isRequired": true,
-      "translations": {
-        "es": {
-          "description": [
-            "<strong>Objetivo:</strong> Construye una aplicación de pila completa (full stack) en JavaScript que funcione de forma similar al siguiente proyecto: <a href='https://fcc-voting-arthow4n.herokuapp.com/' target='_blank'>https://fcc-voting-arthow4n.herokuapp.com/</a> y despliégala en Heroku.",
-            "Ten en cuenta que para cada proyecto, debes crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas cómo hacerlo, visita de nuevo <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
-            "Estas son las Historias de usuario que debes satisfacer para este proyecto:",
-            "<strong>Historia de usuario:</strong> Como un usuario autenticado, puedo guardar mis votaciones y acceder a ellas posteriormente.",
-            "<strong>Historia de usuario:</strong> Como un usuario autenticado, puedo compartir mis votaciones con mis amigos.",
-            "<strong>Historia de usuario:</strong> Como un usuario autenticado, puedo ver los resultados agregados de mis votaciones.",
-            "<strong>Historia de usuario:</strong> Como un usuario autenticado, puedo eliminar votaciones que ya no quiero tener guardadas.",
-            "<strong>Historia de usuario:</strong> Como un usuario autenticado, puedo crear una votación con cualquier número de opciones.",
-            "<strong>Historia de usuario:</strong> Como un usuario autenticado o no autenticado, puedo ver y votar en las votaciones de otros.",
-            "<strong>Historia de usuario:</strong> Como un usuario autenticado o no autenticado, puedo ver los resultados de las votaciones por medio de un gráfico. (Esto podría implementarse utilizando Chart.js o Google Charts.)",
-            "<strong>Historia de usuario:</strong> Como un usuario autenticado, si no me gustan las opciones en una votación, puedo crear una nueva opción.",
-            "Una vez hayas terminado de implementar estas historias de usuario, pulsa el botón de \"I've completed this challenge\" e incluye las URLs de tu repositorio GitHub y de tu aplicación corriendo en Heroku.",
-            "Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7158d8c443eddfaeb5bdff",
-      "title": "Build a Nightlife Coordination App",
-      "description": [
-        "<strong>Objective:</strong> Build a full stack JavaScript app that is functionally similar to this: <a href='http://whatsgoinontonight.herokuapp.com/' target='_blank'>http://whatsgoinontonight.herokuapp.com/</a> and deploy it to Heroku.",
-        "Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
-        "Here are the specific user stories you should implement for this project:",
-        "<strong>User Story:</strong> As an unauthenticated user, I can view all bars in my area.",
-        "<strong>User Story:</strong> As an authenticated user, I can add myself to a bar to indicate I am going there tonight.",
-        "<strong>User Story:</strong> As an authenticated user, I can remove myself from a bar if I no longer want to go there.",
-        "<strong>User Story:</strong> As an unauthenticated user, when I login I should not have to search again.",
-        "<strong>Hint:</strong> Try using the <a href='https://www.yelp.com/developers/documentation/v2/overview' target='_blank'>Yelp API</a> to find venues in the cities your users search for. If you use Yelp's API, be sure to mention so in your app.",
-        "Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku.",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "challengeSeed": [
-        "Gei7QfPmcMw"
-      ],
-      "tests": [],
-      "type": "basejump",
-      "challengeType": 4,
-      "isRequired": true,
-      "translations": {
-        "es": {
-          "description": [
-            "<strong>Objetivo:</strong> Construye una aplicación de pila completa (full stack) en JavaScript que funcione de forma similar al siguiente proyecto: <a href='http://whatsgoinontonight.herokuapp.com/' target='_blank'>http://whatsgoinontonight.herokuapp.com/</a> y despliégala en Heroku.",
-            "Ten en cuenta que para cada proyecto, debes crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas cómo hacerlo, visita de nuevo <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
-            "Estas son las Historias de usuario que debes satisfacer para este Basejump:",
-            "<strong>Historia de usuario:</strong> Como un usuario no autenticado, puedo ver todos los bares en mi área.",
-            "<strong>Historia de usuario:</strong> Como un usuario autenticado, puedo agregarme a mí mismo a un bar para indicar que voy a estar allí esta noche.",
-            "<strong>Historia de usuario:</strong> Como un usuario autenticado, puedo removerme de un bar si ya no pienso ir allí.",
-            "<strong>Historia de usuario:</strong> Como un usuario no autenticado, cuando accedo a mi cuenta no debo tener la necesidad de buscar de nuevo.",
-            "<span class='text-info'>Pista:</span> Prueba utilizar el <a href='https://www.yelp.com/developers/documentation/v2/overview' target='_blank'>API de Yelp</a> para encontrar lugares en las ciudades donde tus usuarios buscan. Si utilizas el API de Yelp, asegúrate de mencionarlo en tu aplicación.",
-            "Una vez hayas terminado de implementar estas historias de usuario, pulsa el botón de \"I've completed this challenge\" e incluye las URLs de tu repositorio GitHub y de tu aplicación corriendo en Heroku.",
-            "Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7158d8c443eddfaeb5bd0e",
-      "title": "Chart the Stock Market",
-      "description": [
-        "<strong>Objective:</strong> Build a full stack JavaScript app that is functionally similar to this: <a href='http://watchstocks.herokuapp.com/' target='_blank'>http://watchstocks.herokuapp.com/</a> and deploy it to Heroku.",
-        "Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
-        "Here are the specific user stories you should implement for this project:",
-        "<strong>User Story:</strong> I can view a graph displaying the recent trend lines for each added stock.",
-        "<strong>User Story:</strong> I can add new stocks by their symbol name.",
-        "<strong>User Story:</strong> I can remove stocks.",
-        "<strong>User Story:</strong> I can see changes in real-time when any other user adds or removes a stock. For this you will need to use Web Sockets.",
-        "Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku.",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "challengeSeed": [
-        "CENs50cnRgM"
-      ],
-      "tests": [],
-      "type": "basejump",
-      "challengeType": 4,
-      "isRequired": true,
-      "translations": {
-        "es": {
-          "description": [
-            "<strong>Objetivo:</strong> Construye una aplicación de pila completa (full stack) en JavaScript que funcione de forma similar al siguiente proyecto: <a href='http://watchstocks.herokuapp.com/' target='_blank'>http://watchstocks.herokuapp.com/</a> y despliégalo en Heroku.",
-            "Ten en cuenta que para cada proyecto, debes crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas cómo hacerlo, visita de nuevo <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
-            "Estas son las Historias de usuario que debes satisfacer para este Basejump:",
-            "<strong>Historia de usuario:</strong> Como usuario, puedo ver un gráfico que me muestre las líneas de tendencia recientes para cada acción agregada.",
-            "<strong>Historia de usuario:</strong> Como usuario, puedo agregar nuevas acciones por su símbolo.",
-            "<strong>Historia de usuario:</strong> Como usuario, puedo remover acciones.",
-            "<strong>Historia de usuario:</strong> Como usuario, puedo ver cambios en tiempo real cuando algún otro usuario agrega o remueve una acción. Puedes usar Web Sockets para hacer esto.",
-            "Una vez hayas terminado de implementar estas historias de usuario, pulsa el botón de \"I've completed this challenge\" e incluye las URLs de tu repositorio GitHub y de tu aplicación corriendo en Heroku.",
-            "Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7158d8c443eddfaeb5bd0f",
-      "title": "Manage a Book Trading Club",
-      "description": [
-        "<strong>Objective:</strong> Build a full stack JavaScript app that is functionally similar to this: <a href='http://bookjump.herokuapp.com/' target='_blank'>http://bookjump.herokuapp.com/</a> and deploy it to Heroku.",
-        "Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
-        "Here are the specific user stories you should implement for this project:",
-        "<strong>User Story:</strong> I can view all books posted by every user.",
-        "<strong>User Story:</strong> I can add a new book.",
-        "<strong>User Story:</strong> I can update my settings to store my full name, city, and state.",
-        "<strong>User Story:</strong> I can propose a trade and wait for the other user to accept the trade.",
-        "Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku.",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "challengeSeed": [
-        "mzElFmbGqQI"
-      ],
-      "tests": [],
-      "type": "basejump",
-      "challengeType": 4,
-      "isRequired": true,
-      "translations": {
-        "es": {
-          "description": [
-            "<strong>Objetivo:</strong> Construye una aplicación de pila completa (full stack) en JavaScript que funcione de forma similar al siguiente proyecto: <a href='http://bookjump.herokuapp.com/' target='_blank'>http://bookjump.herokuapp.com/</a> y despliégalo en Heroku.",
-            "Ten en cuenta que para cada proyecto, debes crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas cómo hacerlo, visita de nuevo <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
-            "Estas son las Historias de usuario que debes satisfacer para este Basejump:",
-            "<strong>Historia de usuario:</strong> Puedo ver todos los libros agregados por cada usuario.",
-            "<strong>Historia de usuario:</strong> Puedo agregar un nuevo libro.",
-            "<strong>Historia de usuario:</strong> Puedo actualizar mi configuración para que almacene mi nombre completo, ciudad y Estado.",
-            "<strong>Historia de usuario:</strong> Puedo proponer un intercambio y esperar a que algún otro usuario acepte el trato.",
-            "Una vez hayas terminado de implementar estas historias de usuario, pulsa el botón de \"I've completed this challenge\" e incluye las URLs de tu repositorio GitHub y de tu aplicación corriendo en Heroku.",
-            "Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7158d8c443eddfaeb5bdee",
-      "title": "Build a Pinterest Clone",
-      "description": [
-        "<strong>Objective:</strong> Build a full stack JavaScript app that is functionally similar to this: <a href='http://pintech.herokuapp.com/' target='_blank'>http://pintech.herokuapp.com/</a> and deploy it to Heroku.",
-        "Note that for each project, you should create a new GitHub repository and a new Heroku project. If you can't remember how to do this, revisit <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
-        "Here are the specific user stories you should implement for this project:",
-        "<strong>User Story:</strong> As an unauthenticated user, I can login with Twitter.",
-        "<strong>User Story:</strong> As an authenticated user, I can link to images.",
-        "<strong>User Story:</strong> As an authenticated user, I can delete images that I've linked to.",
-        "<strong>User Story:</strong> As an authenticated user, I can see a Pinterest-style wall of all the images I've linked to.",
-        "<strong>User Story:</strong> As an unauthenticated user, I can browse other users' walls of images.",
-        "<strong>User Story:</strong> As an authenticated user, if I upload an image that is broken, it will be replaced by a placeholder image. (can use jQuery broken image detection)",
-        "<strong>Hint:</strong> <a href='http://masonry.desandro.com/' target='_blank'>Masonry.js</a> is a library that allows for Pinterest-style image grids.",
-        "Once you've finished implementing these user stories, click the \"I've completed this challenge\" button and enter the URLs for both your GitHub repository and your live app running on Heroku.",
-        "You can get feedback on your project by sharing it with your friends on Facebook."
-      ],
-      "challengeSeed": [
-        "adrOtJCVP04"
-      ],
-      "tests": [],
-      "type": "basejump",
-      "challengeType": 4,
-      "isRequired": true,
-      "translations": {
-        "es": {
-          "description": [
-            "<strong>Objetivo:</strong> Construye una aplicación de pila completa (full stack) en JavaScript que funcione de forma similar al siguiente proyecto: <a href='http://pintech.herokuapp.com/' target='_blank'>http://pintech.herokuapp.com/</a> y despliégalo en Heroku.",
-            "Ten en cuenta que para cada proyecto, debes crear un nuevo repositorio en GitHub y un nuevo proyecto en Heroku. Si no recuerdas cómo hacerlo, visita de nuevo <a href='/challenges/get-set-for-our-dynamic-web-application-projects'>https://freecodecamp.com/challenges/get-set-for-our-dynamic-web-application-projects</a>.",
-            "Estas son las Historias de usuario que debes satisfacer para este Basejump:",
-            "<strong>Historia de usuario:</strong> Como usuario autenticado, puedo acceder a mi cuenta con Twitter.",
-            "<strong>Historia de usuario:</strong> Como usuario autenticado, puedo agregar enlaces a imágenes.",
-            "<strong>Historia de usuario:</strong> Como usuario autenticado, puedo elimiar imágenes que he agregado.",
-            "<strong>Historia de usuario:</strong> Como usuario autenticado, puedo ver un muro al estilo de Pinterest con todas las imágenes para las que he agregado un enlace.",
-            "<strong>Historia de usuario:</strong> Como usuario no autenticado, puedo navegar los muros de imágenes de otros usuarios.",
-            "<strong>Historia de usuario:</strong> Como usuario autenticado, si agrego una imagen corrupta, será reemplazada por una imagen predeterminada. (Puedes utilizar la detección de imágenes corruptas de jQuery)",
-            "<strong>Pista:</strong> <a href='http://masonry.desandro.com/' target='_blank'>Masonry.js</a> es una librería que permite crear cuadrículas de imágenes al estilo de Pinterest.",
-            "Una vez hayas terminado de implementar estas historias de usuario, pulsa el botón de \"I've completed this challenge\" e incluye las URLs de tu repositorio GitHub y de tu aplicación corriendo en Heroku.",
-            "Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
-          ]
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/03-back-end-development-certification/git.json b/seed/challenges/03-back-end-development-certification/git.json
deleted file mode 100644
index cdcbe11d895044..00000000000000
--- a/seed/challenges/03-back-end-development-certification/git.json
+++ /dev/null
@@ -1,78 +0,0 @@
-{
-  "name": "Git",
-  "order": 24,
-  "time": "3 hours",
-  "helpRoom": "HelpBackEnd",
-  "challenges": [
-    {
-      "id": "bd7353d8c341eddeaeb5bd0f",
-      "title": "Save your Code Revisions Forever with Git",
-      "description": [
-        "We'll build this Waypoint on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud.",
-        "If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
-        "Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.",
-        "Click on the \"+\" icon at the top right of the c9.io page to create a new workspace.",
-        "Give your workspace a name and an optional description.",
-        "Choose Node.js in the selection area below the name field.",
-        "Click the \"Create workspace\" button.",
-        "Once C9 builds and loads your workspace, you should see a terminal window in the lower right hand corner. In this window use the following commands. You don't need to know what these mean at this point.",
-        "Install <code>git-it</code> with this command: <code>npm install -g git-it</code>",
-        "Before you start, read <a href='https://help.github.com/articles/adding-a-new-ssh-key-to-your-github-account/' target='_blank'>Adding a new SSH key to your GitHub account</a> if you have two-factor authentication set up on your GitHub account.",
-        "Now start the tutorial by running <code>git-it</code>.",
-        "Note that you can resize the c9.io's windows by dragging their borders.",
-        "Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",
-        "You can view this Node School module's source code on GitHub at <a href='https://github.com/jlord/git-it' target='_blank'>https://github.com/jlord/git-it</a>.",
-        "Complete \"Get Git\"",
-        "Complete \"Repository\"",
-        "Complete \"Commit to it\"",
-        "Complete \"Githubbin\"",
-        "Complete \"Remote Control\"",
-        "Complete \"Forks and Clones\"",
-        "Complete \"Branches aren't just for Birds\"",
-        "Complete \"It's a Small World\"",
-        "Complete \"Pull, Never out of Date\"",
-        "Complete \"Requesting you Pull, Please\"",
-        "Complete \"Merge Tada!\"",
-        "Once you've completed these steps, move on to our next challenge."
-      ],
-      "challengeSeed": [
-        "oznlW01iKRA"
-      ],
-      "tests": [],
-      "type": "waypoint",
-      "challengeType": 2,
-      "translations": {
-        "es": {
-          "title": "Guarda las revisiones de tu código por siempre con Git",
-          "description": [
-            "Haremos este desafío en Cloud 9, un poderoso editor en línea con un ambiente de trabajo Ubuntu Linux completo, corriendo totalmente en la nube.",
-            "Si todavía no tienes una cuenta en Cloud 9, crea una ahora en <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
-            "Abre <a href='http://c9.io' target='_blank'>http://c9.io</a> y accede a tu cuenta.",
-            "Pulsa el icono \"+\" en la parte superior derecha de la página de c9.io para crear un nuevo espacio de trabajo.",
-            "Dale un nombre a tu espacio de trabajo. Opcionalmente también puede escribir una descripción.",
-            "Elije Node.js entre las opciones en el área debajo del campo donde escribiste el nombre.",
-            "Pulsa el botón que dice \"Create workspace\".",
-            "Una vez C9 termine de cargar tu espacio de trabajo, verás una terminal en la ventana de la esquina inferior derecha. Introduce los comandos siguientes en esa ventana (no te preocupes si no entiendes por ahora qué es lo que hacen):",
-            "Instala <code>git-it</code> usando el siguiente comando: <code>npm install -g git-it</code>",
-            "Ahora inicia el tutorial ejecutando <code>git-it</code>",
-            "Puedes modificar el tamaño de las ventanas en c9.io arrastrándolas por el borde.",
-            "Asegúrate de que siempre te encuentres en el directorio \"workspace\" de tu proyecto. Puedes regresar a este directorio cuando quieras usando el comando: <code>cd ~/workspace</code>.",
-            "Puedes ver el código fuente de este módulo de Node School en GitHub visitando <a href='https://github.com/jlord/git-it' target='_blank'>https://github.com/jlord/git-it</a>.",
-            "Completa \"Get Git\"",
-            "Completa \"Repository\"",
-            "Completa \"Commit to it\"",
-            "Completa \"Githubbin\"",
-            "Completa \"Remote Control\"",
-            "Completa \"Forks and Clones\"",
-            "Completa \"Branches aren't just for Birds\"",
-            "Completa \"It's a Small World\"",
-            "Completa \"Pull, Never out of Date\"",
-            "Completa \"Requesting you Pull, Please\"",
-            "Completa \"Merge Tada!\"",
-            "Una vez hayas terminado con este tutorial, puedes continuar con el siguiente desafío."
-          ]
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/03-back-end-development-certification/mongodb.json b/seed/challenges/03-back-end-development-certification/mongodb.json
deleted file mode 100644
index c8688e8000b6ed..00000000000000
--- a/seed/challenges/03-back-end-development-certification/mongodb.json
+++ /dev/null
@@ -1,78 +0,0 @@
-{
-  "name": "MongoDB",
-  "order": 25,
-  "time": "3 hours",
-  "helpRoom": "HelpBackEnd",
-  "challenges": [
-    {
-      "id": "bd7243d8c341eddeaeb5bd0f",
-      "title": "Store Data in MongoDB",
-      "description": [
-        "We'll build this Waypoint on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud.",
-        "If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
-        "Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.",
-        "Click on the \"+\" icon at the top right of the c9.io page to create a new workspace.",
-        "Give your workspace a name and an optional description.",
-        "Choose Node.js in the selection area below the name field.",
-        "Click the \"Create workspace\" button.",
-        "Once C9 builds and loads your workspace, you should see a terminal window in the lower right hand corner. In this window use the following commands. You don't need to know what these mean at this point.",
-        "Install <code>learnyoumongo</code> with this command: <code>npm install learnyoumongo -g</code>",
-        "Install MongoDB with this command: <code>sudo apt-get install mongodb-org</code>",
-        "Set up your mongod alias by following the directions at <a href='https://community.c9.io/t/setting-up-mongodb/1717' target='_blank'>https://community.c9.io/t/setting-up-mongodb/1717</a>.",
-        "Now start the tutorial by running <code>learnyoumongo</code>.",
-        "Whenever you run a command that includes <code>mongod</code> on c9.io, use <code>./mongod</code> instead. Together with the commands used in Step 11, this adds additional parameters to the <code>mongod</code> command to allow MongoDB to run in the C9 environment.",
-        "Note that you can resize the c9.io's windows by dragging their borders.",
-        "Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",
-        "You can view this Node School module's source code on GitHub at <a href='https://github.com/evanlucas/learnyoumongo'>https://github.com/evanlucas/learnyoumongo</a>.",
-        "Complete \"Mongod\"",
-        "Complete \"Connect\"<br><br><strong>Note:</strong> Use the command <code>mongod --port 27017 --smallfiles</code> in place of <code>mongod --port 27017 --dbpath=./data</code> to avoid a duplicate parameter error.<br><br><code>--dbpath=./data</code> is already included in the <code>./mongod</code> command.",
-        "Complete \"Find\"",
-        "Complete \"Find Project\"",
-        "Complete \"Insert\"",
-        "Complete \"Update\"",
-        "Complete \"Remove\"",
-        "Complete \"Count\"",
-        "Complete \"Aggregate\"",
-        "Once you've completed these steps, move on to our next challenge."
-      ],
-      "challengeSeed": [
-        "amdJwuJJt68"
-      ],
-      "tests": [],
-      "type": "waypoint",
-      "challengeType": 2,
-      "translations": {
-        "es": {
-          "title": "Guarda tus datos en MongoDB",
-          "description": [
-            "Haremos este desafío en Cloud 9, un poderoso editor en línea con un ambiente de trabajo Ubuntu Linux completo, corriendo totalmente en la nube.",
-            "Si todavía no tienes una cuenta en Cloud 9, crea una ahora en <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
-            "Abre <a href='http://c9.io' target='_blank'>http://c9.io</a> y accede a tu cuenta.",
-            "Pulsa el icono \"+\" en la parte superior derecha de la página de c9.io para crear un nuevo espacio de trabajo.",
-            "Dale un nombre a tu espacio de trabajo. Opcionalmente también puedes escribir una descripción.",
-            "Elige Node.js entre las opciones en el área debajo del campo donde escribiste el nombre.",
-            "Haz click en el botón que dice \"Create workspace\".",
-            "Una vez C9 termine de cargar tu espacio de trabajo, verás una terminal en la ventana de la esquina inferior derecha. Introduce los comandos siguientes en esa ventana (no te preocupes si no entiendes por ahora qué es lo que hacen):",
-            "Instala <code>learnyoumongo</code> usando el siguiente comando: <code>npm install learnyoumongo -g</code>",
-            "Instala MongoDB usando el siguiente comando: <code>sudo apt-get install mongodb-org</code>",
-            "Ahora inicia el tutorial ejecutando <code>learnyoumongo</code>",
-            "Siempre que ejecutes un comando que incluya <code>mongod</code> en c9.io, asegúrate de usar la bandera <code>--nojournal</code>. Por ejemplo: <code>mongod --nojournal</code>.",
-            "Puedes modificar el tamaño de las ventanas en c9.io arrastrándolas por el borde.",
-            "Asegúrate de que siempre te encuentres en el directorio \"workspace\" de tu proyecto. Puedes regresar a este directorio cuando quieras usando el comando: <code>cd ~/workspace</code>.",
-            "Puedes ver el código fuente de este módulo de Node School en GitHub visitando <a href='https://github.com/evanlucas/learnyoumongo'>https://github.com/evanlucas/learnyoumongo</a>.",
-            "Completa \"Mongod\"",
-            "Completa \"Connect\"",
-            "Completa \"Find\"",
-            "Completa \"Find Project\"",
-            "Completa \"Insert\"",
-            "Completa \"Update\"",
-            "Completa \"Remove\"",
-            "Completa \"Count\"",
-            "Completa \"Aggregate\"",
-            "Una vez hayas terminado con este tutorial, puedes continuar con el siguiente desafío."
-          ]
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/03-back-end-development-certification/nodejs-and-expressjs.json b/seed/challenges/03-back-end-development-certification/nodejs-and-expressjs.json
deleted file mode 100644
index a5ad6e01a3beaa..00000000000000
--- a/seed/challenges/03-back-end-development-certification/nodejs-and-expressjs.json
+++ /dev/null
@@ -1,283 +0,0 @@
-{
-  "name": "Node.js and Express.js",
-  "order": 24,
-  "time": "20 hours",
-  "helpRoom": "HelpBackEnd",
-  "challenges": [
-    {
-      "id": "bd7153d8c441eddfaeb5bd0f",
-      "title": "Manage Packages with npm",
-      "description": [
-        "We'll build this Waypoint on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud. <strong>Note:</strong> Cloud 9 supports a <a href='https://docs.c9.io/docs/themes' target='_blank'>high-contrast theme</a> for those with visual impairments.",
-        "If you don't already have a Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
-        "Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.",
-        "Click on the \"+\" icon at the top right of the c9.io page to create a new workspace.",
-        "Give your workspace a name and an optional description.",
-        "Choose \"Blank\" in the template section.",
-        "Click the Create button. Then click into your new workspace.",
-        "In the lower right hand corner you should see a terminal window. In this window use the following commands. You don't need to know what these mean at this point.",
-        "Install <code>how-to-npm</code> with this command: <code>npm install -g how-to-npm</code>.",
-        "Now start the tutorial by running <code>how-to-npm</code>.",
-        "Note that you can resize the c9.io's windows by dragging their borders.",
-        "Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",
-        "Note that you can only add dist tags to the specific version numbers published in steps 8 and 10. If you receive a 403 or 404 error, run <code>how-to-npm</code> and try again.",
-        "Also, if you experience a bug, and you think you understand the concept, you can skip a step by running <code>how-to-npm verify skip</code> in the terminal.",
-        "You can view this Node School module's source code on GitHub at <a href='https://github.com/npm/how-to-npm'>https://github.com/npm/how-to-npm</a>.",
-        "Complete \"Install npm\"",
-        "Complete \"Dev Environment\"",
-        "Complete \"Login\"",
-        "Complete \"Start A Project\"",
-        "Complete \"Install A Module\"",
-        "Complete \"Listing Dependencies\"",
-        "Complete \"npm Test\"",
-        "Complete \"Package Niceties\"",
-        "Complete \"Publish\"",
-        "Complete \"Version\"",
-        "Complete \"Publish Again\"",
-        "Complete \"Dist Tag\"",
-        "Complete \"Dist Tag Removal\"",
-        "Complete \"Outdated\"",
-        "Complete \"Update\"",
-        "Complete \"Rm\"",
-        "Complete \"Finale\"",
-        "Once you've completed these steps, move on to our next challenge."
-      ],
-      "challengeSeed": [
-        "yIz8RTe-bZk"
-      ],
-      "tests": [],
-      "type": "waypoint",
-      "challengeType": 2,
-      "translations": {
-        "es": {
-          "title": "Administrando paquetes con NPM",
-          "description": [
-            "Haremos este desafío en Cloud 9, un poderoso editor en línea con un ambiente de trabajo Ubuntu Linux completo, corriendo totalmente en la nube.",
-            "Si todavía no tienes una cuenta en Cloud 9, crea una ahora en <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
-            "Abre <a href='http://c9.io' target='_blank'>http://c9.io</a> y accede a tu cuenta.",
-            "Pulsa el icono \"+\" en la parte superior derecha de la página de c9.io para crear un nuevo espacio de trabajo.",
-            "Dale un nombre a tu espacio de trabajo. Opcionalmente también puedes escribir una descripción.",
-            "Elige Node.js entre las opciones en el área debajo del campo donde escribiste el nombre.",
-            "Haz click en el botón que dice \"Create workspace\".",
-            "Una vez C9 termine de cargar tu espacio de trabajo, verás una terminal en la ventana de la esquina inferior derecha. Introduce los comandos siguientes en esa ventana (no te preocupes si no entiendes por ahora qué es lo que hacen):",
-            "Instala <code>how-to-npm</code> usando el siguiente comando: <code>npm install -g how-to-npm</code>",
-            "Ahora inicia el tutorial ejecutando <code>how-to-npm</code>",
-            "Puedes modificar el tamaño de las ventanas en c9.io arrastrándolas por el borde.",
-            "Asegúrate de que siempre te encuentres en el directorio \"workspace\" de tu proyecto. Puedes regresar a este directorio cuando quieras usando el comando: <code>cd ~/workspace</code>.",
-            "Ten en mente que sólo puedes agregar etiquetas de distribución a los números de versión publicados en las lecciones 8 y 10. Si recibes un error 403 o 404, ejecuta <code>how-to-npm</code> y prueba de nuevo.",
-            "Si te encuentras con algún error (bug), y crees que has comprendido el concepto del ejercicio, puedes saltarte la lección ejecutando <code>how-to-npm verify skip</code> en la terminal.",
-            "Puedes ver el código fuente de este módulo de Node School en GitHub visitando <a href='https://github.com/npm/how-to-npm'>https://github.com/npm/how-to-npm</a>.",
-            "Completa \"Install NPM\"",
-            "Completa \"Dev Environment\"",
-            "Completa \"Login\"",
-            "Completa \"Start a Project\"",
-            "Completa \"Install a Module\"",
-            "Completa \"Listing Dependencies\"",
-            "Completa \"NPM Test\"",
-            "Completa \"Package Niceties\"",
-            "Completa \"Publish\"",
-            "Completa \"Version\"",
-            "Completa \"Publish Again\"",
-            "Una vez hayas completado estas lecciones, puedes saltarte el resto (que todavía requieren algunas correcciones), y continuar con el siguiente desafío."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7153d8c441eddfaeb5bdff",
-      "title": "Start a Node.js Server",
-      "description": [
-        "We'll build this Waypoint on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud. We'll do the first 7 steps of Node School's LearnYouNode challenges.",
-        "If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
-        "Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.",
-        "Click on the \"+\" icon at the top right of the c9.io page to create a new workspace.",
-        "Give your workspace a name and an optional description.",
-        "Choose \"Blank\" in the template section.",
-        "Click the \"Create workspace\" button.",
-        "Once C9 builds and loads your workspace, you should see a terminal window in the lower right hand corner. In this window use the following commands. You don't need to know what these mean at this point.",
-        "Update <code>npm</code> with this command: <code>npm install -g npm</code>.",
-        "Install <code>learnyounode</code> with this command: <code>npm install -g learnyounode</code>.",
-        "Now start this tutorial by running <code>learnyounode</code>.",
-        "Note that you can resize the c9.io's windows by dragging their borders.",
-        "Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",
-        "You can view this Node School module's source code on GitHub at <a href='https://github.com/workshopper/learnyounode'>https://github.com/workshopper/learnyounode</a>.",
-        "Complete \"Hello World\"",
-        "Complete \"Baby Steps\"",
-        "Complete \"My First I/O\"",
-        "Complete \"My First Async I/O\"",
-        "Complete \"Filtered LS\"",
-        "Complete \"Make it Modular\"",
-        "Complete \"HTTP Client\"",
-        "Once you've completed these first 7 steps, move on to our next challenge."
-      ],
-      "challengeSeed": [
-        "Mo1X7fsS1Ms"
-      ],
-      "tests": [],
-      "type": "waypoint",
-      "challengeType": 2,
-      "translations": {
-        "es": {
-          "title": "Inicia un servidor en Node.js",
-          "description": [
-            "Haremos este desafío en Cloud 9, un poderoso editor en línea con un ambiente de trabajo Ubuntu Linux completo, corriendo totalmente en la nube.",
-            "Si todavía no tienes una cuenta en Cloud 9, crea una ahora en <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
-            "Abre <a href='http://c9.io' target='_blank'>http://c9.io</a> y accede a tu cuenta.",
-            "Haz click en el icono \"+\" en la parte superior derecha de la página de c9.io para crear un nuevo espacio de trabajo.",
-            "Dale un nombre a tu espacio de trabajo. Opcionalmente también puedes escribir una descripción.",
-            "Elige Node.js entre las opciones en el área debajo del campo donde escribiste el nombre.",
-            "Haz click en el botón que dice \"Create workspace\".",
-            "Una vez C9 termine de cargar tu espacio de trabajo, verás una terminal en la ventana de la esquina inferior derecha. Introduce los comandos siguientes en esa ventana (no te preocupes si no entiendes por ahora qué es lo que hacen):",
-            "Ejecuta el siguiente comando: <code>sudo npm install -g learnyounode</code>",
-            "Ahora inicia el tutorial ejecutando <code>learnyounode</code>",
-            "Puedes modificar el tamaño de las ventanas en c9.io arrastrándolas por el borde.",
-            "Asegúrate de que siempre te encuentres en el directorio \"workspace\" de tu proyecto. Puedes regresar a este directorio cuando quieras usando el comando: <code>cd ~/workspace</code>.",
-            "Puedes ver el código fuente de este módulo de Node School en GitHub visitando <a href='https://github.com/workshopper/learnyounode'>https://github.com/workshopper/learnyounode</a>.",
-            "Completa \"Hello World\"",
-            "Completa \"Baby Steps\"",
-            "Completa \"My First I/O\"",
-            "Completa \"My First Async I/O\"",
-            "Completa \"Filtered LS\"",
-            "Completa \"Make it Modular\"",
-            "Completa \"HTTP Client\"",
-            "Una vez hayas completado estas primeras siete lecciones, continúa con el siguiente desafío."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7153d8c441eddfaeb5bdfe",
-      "title": "Continue working with Node.js Servers",
-      "description": [
-        "Let's continue the LearnYouNode Node School challenge. For this Waypoint, we'll do challenges 8 through 10.",
-        "Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",
-        "Return to the c9.io workspace you created. Now start this tutorial by running <code>learnyounode</code>",
-        "You can view this Node School module's source code on GitHub at <a href='https://github.com/workshopper/learnyounode'>https://github.com/workshopper/learnyounode</a>.",
-        "Complete \"HTTP Collect\"",
-        "Complete \"Juggling Async\"",
-        "Complete \"Time Server\"",
-        "Once you've completed these 3 steps, move on to our next challenge."
-      ],
-      "challengeSeed": [
-        "4B4vWorcFWo"
-      ],
-      "tests": [],
-      "type": "waypoint",
-      "challengeType": 2,
-      "translations": {
-        "es": {
-          "title": "Continuemos trabajando con servidores en Node.js",
-          "description": [
-            "Sigamos con el desafío de LearnYouNode de Node School. Para este Waypoint, trabajaremos con las lecciones 11 a 13.",
-            "Asegúrate de que siempre te encuentres en el directorio \"workspace\" de tu proyecto. Puedes regresar a este directorio cuando quieras usando el comando: <code>cd ~/workspace</code>.",
-            "Regresa al espacio de trabajo que creaste en c9.io. Ahora inicia el tutorial ejecutando <code>learnyounode</code>",
-            "Puedes ver el código fuente de este módulo de Node School en GitHub visitando <a href='https://github.com/workshopper/learnyounode'>https://github.com/workshopper/learnyounode</a>.",
-            "Completa \"HTTP Collect\"",
-            "Completa \"Juggling Async\"",
-            "Completa \"Time Server\"",
-            "Una vez hayas completado estas tres lecciones, continúa con el siguiente desafío."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7153d8c441eddfaeb5bdfd",
-      "title": "Finish working with Node.js Servers",
-      "description": [
-        "Let's continue the LearnYouNode Node School challenge. For this Waypoint, we'll do challenges 11 through 13.",
-        "Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",
-        "Return to the c9.io workspace you created for the previous LearnYouNode challenges and start the tutorial by running <code>learnyounode</code>",
-        "You can view this Node School module's source code on GitHub at <a href='https://github.com/workshopper/learnyounode'>https://github.com/workshopper/learnyounode</a>.",
-        "Complete \"HTTP File Server\"",
-        "Complete \"HTTP Uppercaserer\"",
-        "Complete \"HTTP JSON API Server\"",
-        "Once you've completed these final 3 steps, move on to our next challenge."
-      ],
-      "challengeSeed": [
-        "IpEbokErBfQ"
-      ],
-      "tests": [],
-      "type": "waypoint",
-      "challengeType": 2,
-      "translations": {
-        "es": {
-          "title": "Terminemos de trabajar con servidores en Node.js",
-          "description": [
-            "Sigamos con el desafío de LearnYouNode de Node School. Para este Waypoint, trabajaremos con las lecciones 11 a 13.",
-            "Asegúrate de que siempre te encuentres en el directorio \"workspace\" de tu proyecto. Puedes regresar a este directorio cuando quieras usando el comando: <code>cd ~/workspace</code>.",
-            "Regresa al espacio de trabajo que creaste en c9.io. Ahora inicia el tutorial ejecutando <code>learnyounode</code>",
-            "Puedes ver el código fuente de este módulo de Node School en GitHub visitando <a href='https://github.com/workshopper/learnyounode'>https://github.com/workshopper/learnyounode</a>.",
-            "Completa \"HTTP File Server\"",
-            "Completa \"HTTP Uppercaserer\"",
-            "Completa \"HTTP JSON API Server\"",
-            "Una vez hayas completado estas tres lecciones, continúa con el último desafío."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7153d8c441eddfaeb5bd1f",
-      "title": "Build Web Apps with Express.js",
-      "description": [
-        "Before we begin using Express.js, read this article on <a href='http://evanhahn.com/understanding-express/' target='_blank'>Understanding Express.js</a>.",
-        "We'll build this Waypoint on Cloud 9, a powerful online code editor with a full Ubuntu Linux workspace, all running in the cloud.",
-        "If you don't already have Cloud 9 account, create one now at <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
-        "Open up <a href='http://c9.io' target='_blank'>http://c9.io</a> and sign in to your account.",
-        "Click on the \"+\" icon at the top right of the c9.io page to create a new workspace.",
-        "Give your workspace a name and an optional description.",
-        "Choose Node.js in the selection area below the name field.",
-        "Click the \"Create workspace\" button.",
-        "Once C9 builds and loads your workspace, you should see a terminal window in the lower right hand corner. In this window use the following commands. You don't need to know what these mean at this point.",
-        "Run this command: <code>git clone https://github.com/FreeCodeCamp/fcc-expressworks.git && chmod 744 fcc-expressworks/setup.sh && fcc-expressworks/setup.sh && source ~/.profile</code>",
-        "Now start this tutorial by running <code>expressworks</code>",
-        "Note that you can resize the c9.io's windows by dragging their borders.",
-        "Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: <code>cd ~/workspace</code>.",
-        "You can view this Node School module's source code on GitHub at <a href='https://github.com/azat-co/expressworks'>https://github.com/azat-co/expressworks</a>.",
-        "Complete \"Hello World!\"",
-        "Complete \"Static\"",
-        "Complete \"Jade\" (Jade has been renamed to Pug)",
-        "Complete \"Good Old Form\"",
-        "Complete \"Stylish CSS\"",
-        "Complete \"Param Pam Pam\"",
-        "Complete \"What's In Query\"",
-        "Complete \"JSON Me\"",
-        "Once you've completed these steps, move on to our next challenge."
-      ],
-      "challengeSeed": [
-        "wLweWF8gh-k"
-      ],
-      "tests": [],
-      "type": "waypoint",
-      "challengeType": 2,
-      "translations": {
-        "es": {
-          "title": "Creando Web Apps con Express.js",
-          "description": [
-            "Haremos este desafío en Cloud 9, un poderoso editor en línea con un ambiente de trabajo Ubuntu Linux completo, corriendo totalmente en la nube.",
-            "Si todavía no tienes una cuenta en Cloud 9, crea una ahora en <a href='http://c9.io' target='_blank'>http://c9.io</a>.",
-            "Abre <a href='http://c9.io' target='_blank'>http://c9.io</a> y accede a tu cuenta.",
-            "Haz click en el icono \"+\" en la parte superior derecha de la página de c9.io para crear un nuevo espacio de trabajo.",
-            "Dale un nombre a tu espacio de trabajo. Opcionalmente también puedes escribir una descripción.",
-            "Elige Node.js entre las opciones en el área debajo del campo donde escribiste el nombre.",
-            "Haz click en el botón que dice \"Create workspace\".",
-            "Una vez C9 termine de cargar tu espacio de trabajo, verás una terminal en la ventana de la esquina inferior derecha. Introduce los comandos siguientes en esa ventana (no te preocupes si no entiendes por ahora qué es lo que hacen):",
-            "Ejecuta el siguiente comando: <code>git clone https://github.com/FreeCodeCamp/fcc-expressworks.git && chmod 744 fcc-expressworks/setup.sh && fcc-expressworks/setup.sh && source ~/.profile</code>",
-            "Ahora inicia el tutorial ejecutando <code>expressworks</code>",
-            "Puedes modificar el tamaño de las ventanas en c9.io arrastrándolas por el borde.",
-            "Asegúrate de que siempre te encuentres en el directorio \"workspace\" de tu proyecto. Puedes regresar a este directorio cuando quieras usando el comando: <code>cd ~/workspace</code>.",
-            "Puedes ver el código fuente de este módulo de Node School en GitHub visitando <a href='https://github.com/azat-co/expressworks'>https://github.com/azat-co/expressworks</a>..",
-            "Completa \"Hello World!\"",
-            "Completa \"Static\"",
-            "Completa \"Jade\" (Jade ahora se llama Pug)",
-            "Completa \"Good Old Form\"",
-            "Completa \"Stylish CSS\"",
-            "Completa \"Param Pam Pam\"",
-            "Completa \"What's In Query\"",
-            "Completa \"JSON Me\"",
-            "Una vez hayas completado estas lecciones, continúa con el último desafío."
-          ]
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/01-front-end-development-certification/bootstrap.json b/seed/challenges/03-front-end-libraries/bootstrap.json
similarity index 99%
rename from seed/challenges/01-front-end-development-certification/bootstrap.json
rename to seed/challenges/03-front-end-libraries/bootstrap.json
index 3af633252479c9..b0b3181c667e40 100644
--- a/seed/challenges/01-front-end-development-certification/bootstrap.json
+++ b/seed/challenges/03-front-end-libraries/bootstrap.json
@@ -1,10 +1,12 @@
 {
-  "name": "Responsive Design with Bootstrap",
-  "order": 3,
+  "name": "Bootstrap",
+  "order": 2,
   "time": "5 hours",
   "helpRoom": "Help",
   "required": [
-    { "link": "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" }
+    {
+      "link": "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"
+    }
   ],
   "challenges": [
     {
@@ -507,9 +509,9 @@
       "id": "bad87fee1348cd8acef08811",
       "title": "Taste the Bootstrap Button Color Rainbow",
       "description": [
-        "The <code>btn-primary</code> class styles the app elements it is applied to as the primary action on a page.",
-        "Add Bootstrap's <code>btn-primary</code> class to your <code>Like</code> button.",
-        "Note that the <code>Like</code> button will still need the <code>btn</code> and <code>btn-block</code> classes."
+        "The <code>btn-primary</code> class is the main color you'll use in your app. It is useful for highlighting actions you want your user to take.",
+        "Add Bootstrap's <code>btn-primary</code> class to your button.",
+        "Note that this button will still need the <code>btn</code> and <code>btn-block</code> classes."
       ],
       "challengeSeed": [
         "<link href=\"https://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\">",
@@ -572,8 +574,8 @@
         "</div>"
       ],
       "tests": [
-        "assert($(\"button\").first().hasClass(\"btn-primary\"), 'message: Your <code>Like</code> button should have the class <code>btn-primary</code>.');",
-        "assert($(\"button\").first().hasClass(\"btn-block\") && $(\"button\").first().hasClass(\"btn\"), 'message: Your <code>Like</code> button should still have the <code>btn</code> and <code>btn-block</code> classes.');",
+        "assert($(\"button\").hasClass(\"btn-primary\"), 'message: Your button should have the class <code>btn-primary</code>.');",
+        "assert($(\"button\").hasClass(\"btn-block\") && $(\"button\").hasClass(\"btn\"), 'message: Your button should still have the <code>btn</code> and <code>btn-block</code> classes.');",
         "assert(code.match(/<\\/button>/g) && code.match(/<button/g) && code.match(/<\\/button>/g).length === code.match(/<button/g).length, 'message: Make sure all your <code>button</code> elements have a closing tag.');"
       ],
       "type": "waypoint",
@@ -863,7 +865,7 @@
         "</div>"
       ],
       "tests": [
-        "assert($(\"div.row button\").length === 3, 'message: Your buttons should all be nested within the same <code>div</code> element with the class <code>row</code>.');",
+        "assert($(\"div.row:has(button)\").length > 0, 'message: Your buttons should all be nested within the same <code>div</code> element with the class <code>row</code>.');",
         "assert($(\"div.col-xs-4:has(button)\").length > 2, 'message: Each of your Bootstrap buttons should be nested within its own <code>div</code> element with the class <code>col-xs-4</code>.');",
         "assert(code.match(/<\\/button>/g) && code.match(/<button/g) && code.match(/<\\/button>/g).length === code.match(/<button/g).length, 'message: Make sure each of your <code>button</code> elements has a closing tag.');",
         "assert(code.match(/<\\/div>/g) && code.match(/<div/g) && code.match(/<\\/div>/g).length === code.match(/<div/g).length, 'message: Make sure each of your <code>div</code> elements has a closing tag.');"
@@ -1503,7 +1505,7 @@
         "</div>"
       ],
       "tests": [
-        "assert($(\"div.row input[type=\\\"radio\\\"]\").length === 2, 'message: Nest all of your radio buttons inside one <code>div</code> with the class <code>row</code>.');",
+        "assert($(\"div.row:has(input[type=\\\"radio\\\"])\").length > 0, 'message: Nest all of your radio buttons inside one <code>div</code> with the class <code>row</code>.');",
         "assert($(\"div.col-xs-6:has(input[type=\\\"radio\\\"])\").length > 1, 'message: Nest each of your radio buttons inside its own <code>div</code> with the class <code>col-xs-6</code>.');",
         "assert(code.match(/<\\/div>/g) && code.match(/<div/g) && code.match(/<\\/div>/g).length === code.match(/<div/g).length, 'message: Make sure each of your <code>div</code> elements has a closing tag.');"
       ],
@@ -1606,7 +1608,7 @@
         "</div>"
       ],
       "tests": [
-        "assert($(\"div.row input[type=\\\"checkbox\\\"]\").length === 3, 'message: Nest all of your checkboxes inside one <code>div</code> with the class <code>row</code>.');",
+        "assert($(\"div.row:has(input[type=\\\"checkbox\\\"])\").length > 0, 'message: Nest all of your checkboxes inside one <code>div</code> with the class <code>row</code>.');",
         "assert($(\"div.col-xs-4:has(input[type=\\\"checkbox\\\"])\").length > 2, 'message: Nest each of your checkboxes inside its own <code>div</code> with the class <code>col-xs-4</code>.');",
         "assert(code.match(/<\\/div>/g) && code.match(/<div/g) && code.match(/<\\/div>/g).length === code.match(/<div/g).length, 'message: Make sure each of your <code>div</code> elements has a closing tag.');"
       ],
@@ -2513,4 +2515,4 @@
       }
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/seed/challenges/03-front-end-libraries/claim-your-front-end-libraries-certificate.json b/seed/challenges/03-front-end-libraries/claim-your-front-end-libraries-certificate.json
new file mode 100644
index 00000000000000..72b49701cc7c8f
--- /dev/null
+++ b/seed/challenges/03-front-end-libraries/claim-your-front-end-libraries-certificate.json
@@ -0,0 +1,108 @@
+{
+  "name": "Claim Your Front End Libraries Certificate",
+  "order": 13,
+  "time": "5 minutes",
+  "challenges": [
+    {
+      "id": "587d7dbb367417b2b2512bad",
+      "title": "Claim Your Front End Libraries Certificate",
+      "description": [
+        [
+          "//i.imgur.com/k8btNUB.jpg",
+          "An image of our Front End Libraries Certificate",
+          "This challenge will give you your verified Front End Libraries Certificate. Before we issue your certificate, we must verify that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
+          ""
+        ],
+        [
+          "//i.imgur.com/uLPsUko.jpg",
+          "The definition of plagiarism: Plagiarism (noun) - copying someone else’s work and presenting it as your own without crediting them",
+          "By clicking below, you pledge that all of your submitted code A) is code you or your pair personally wrote, or B) comes from open source libraries like jQuery, or C) has been clearly attributed to its original authors. You also give us permission to audit your challenge solutions and revoke your certificate if we discover evidence of plagiarism.",
+          "#"
+        ],
+        [
+          "//i.imgur.com/UedoV2G.jpg",
+          "An image of the text \"Front End Development Certificate requirements\"",
+          "Let's confirm that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. Click the button below to verify this.",
+          "#"
+        ],
+        [
+          "//i.imgur.com/Q5Za9U6.jpg",
+          "An image of the word \"Congratulations\"",
+          "Congratulations! We've added your Front End Libraries Certificate to your portfolio page. Unless you choose to hide your solutions, this certificate will remain publicly visible and verifiable.",
+          ""
+        ]
+      ],
+      "challengeSeed": [
+        {
+          "properties": [
+            "isHonest",
+            "isFrontEndCert"
+          ],
+          "apis": [
+            "/certificate/honest",
+            "/certificate/verify/front-end"
+          ],
+          "stepIndex": [
+            1,
+            2
+          ]
+        }
+      ],
+      "tests": [
+        {
+          "id": "bd7158d8c442eddfaeb5bd0f",
+          "title": "Build a Pomodoro Clock"
+        },
+        {
+          "id": "bd7158d8c442eddfaeb5bd17",
+          "title": "Build a JavaScript Calculator"
+        },
+        {
+          "id": "587d7dbc367417b2b2512bae",
+          "title": "Build a Drum Machine"
+        },
+        {
+          "id": "bd7157d8c242eddfaeb5bd13",
+          "title": "Build a Markdown Previewer"
+        },
+        {
+          "id": "bd7158d8c442eddfaeb5bd13",
+          "title": "Build a Random Quote Machine"
+        }
+      ],
+      "type": "Waypoint",
+      "challengeType": 7,
+      "translations": {
+        "es": {
+          "title": "Reclama tu certificado de Desarrollo de interfaces",
+          "description": [
+            [
+              "//i.imgur.com/k8btNUB.jpg",
+              "Una imagen que muestra nuestro certificado de Desarrollo de interfaces",
+              "Este desafío te otorga tu certificado autenticado de Desarrollo de interfaces. Antes de que podamos emitir tu certificado, debemos verificar que has completado todos los desafíos básicos e intermedios de diseño de algoritmos, y todos los proyectos básicos e intermedios de desarrollo de interfaces. También debes aceptar nuestro Juramento de honestidad académica. Pulsa el botón siguiente para iniciar este proceso.",
+              ""
+            ],
+            [
+              "//i.imgur.com/HArFfMN.jpg",
+              "Plagio (nombre): acción y efecto de plagiar. Plagiar (verbo) - copiar en lo sustancial obras ajenas, dándolas como propias.",
+              "Al pulsar el botón siguiente, juras que todo el código en tus soluciones a los desafíos A) es código que tú o tu compañero escribieron personalmente, o B) proviene de librerías de código abierto como jQuery, o C) ha sido claramente atribuido a sus autores originales. También nos otorgas el permiso para auditar tus soluciones a los desafíos y revocar tu certificado si encontramos evidencia de plagio.",
+              "#"
+            ],
+            [
+              "//i.imgur.com/14F2Van.jpg",
+              "Una imagen del texto \"Front End Development Certificate requirements\"",
+              "Confirmemos que has completado todos nuestros desafíos básicos e intermedios de diseño de algoritmos, y todos nuestros proyectos básicos e intermedios de desarrollo de interfaces. Pulsa el botón siguiente para hacer la verificación.",
+              "#"
+            ],
+            [
+              "//i.imgur.com/16SIhHO.jpg",
+              "Una imagen de la palabra \"Congratulations\"",
+              "¡Felicitaciones! Hemos agregado tu certificado de Desarrollo de interfaces a tu portafolio. A menos que elijas no mostrar tus soluciones, este certificado será públicamente visible y verificable.",
+              ""
+            ]
+          ]
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/03-front-end-libraries/front-end-libraries-projects.json b/seed/challenges/03-front-end-libraries/front-end-libraries-projects.json
new file mode 100644
index 00000000000000..febf095f592652
--- /dev/null
+++ b/seed/challenges/03-front-end-libraries/front-end-libraries-projects.json
@@ -0,0 +1,146 @@
+{
+  "name": "Front End Frameworks Projects",
+  "order": 8,
+  "time": "150 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "bd7158d8c442eddfaeb5bd13",
+      "title": "Build a Random Quote Machine",
+      "description": [
+        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "Here's a <a href='http://codepen.io/freeCodeCamp/full/qRZeGZ' target='_blank'>working example</a>. Try not to look at its code.",
+        "You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
+        "Once you're done, submit below the URL to your working project with all its tests passing.",
+        "Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
+      ],
+      "challengeSeed": [
+        "A9mEKIF"
+      ],
+      "tests": [],
+      "type": "zipline",
+      "isRequired": true,
+      "challengeType": 3,
+      "translations": {
+        "es": {
+          "title": "Crea una máquina de frases aleatorias",
+          "description": []
+        },
+        "ru": {
+          "title": "Создайте генератор случайных цитат",
+          "description": []
+        }
+      }
+    },
+    {
+      "id": "bd7157d8c242eddfaeb5bd13",
+      "title": "Build a Markdown Previewer",
+      "description": [
+        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "Here's a <a href='http://codepen.io/freeCodeCamp/full/GrZVVO' target='_blank'>working example</a>. Try not to look at its code.",
+        "You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
+        "Once you're done, submit below the URL to your working project with all its tests passing.",
+        "Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
+      ],
+      "releasedOn": "January 10, 2017",
+      "challengeSeed": [
+        "FFDvuCP"
+      ],
+      "tests": [],
+      "type": "zipline",
+      "isRequired": true,
+      "challengeType": 3,
+      "translations": {
+        "es": {
+          "title": "Crea una caja de recetas",
+          "description": []
+        },
+        "ru": {
+          "title": "Создайте хранилище рецептов",
+          "description": []
+        }
+      }
+    },
+    {
+      "id": "587d7dbc367417b2b2512bae",
+      "title": "Build a Drum Machine",
+      "description": [
+        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "Here's a <a href='http://codepen.io/freeCodeCamp/full/MJyNMd' target='_blank'>working example</a>. Try not to look at its code.",
+        "You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
+        "Once you're done, submit below the URL to your working project with all its tests passing.",
+        "Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
+      ],
+      "releasedOn": "January 10, 2016",
+      "challengeSeed": [
+        "OkeFgKL"
+      ],
+      "tests": [],
+      "type": "zipline",
+      "isRequired": true,
+      "challengeType": 3,
+      "translations": {
+        "es": {
+          "title": "Crea un Juego de la vida",
+          "description": []
+        },
+        "ru": {
+          "title": "Создайте игру \"Жизнь\"",
+          "description": []
+        }
+      }
+    },
+    {
+      "id": "bd7158d8c442eddfaeb5bd17",
+      "title": "Build a JavaScript Calculator",
+      "description": [
+        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "Here's a <a href='http://codepen.io/freeCodeCamp/full/wgGVVX' target='_blank'>working example</a>. Try not to look at its code.",
+        "You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
+        "Once you're done, submit below the URL to your working project with all its tests passing.",
+        "Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
+      ],
+      "challengeSeed": [
+        "xlAXPjX"
+      ],
+      "tests": [],
+      "type": "zipline",
+      "challengeType": 3,
+      "isRequired": true,
+      "translations": {
+        "es": {
+          "title": "Crea una calculadora JavaScript",
+          "description": []
+        }
+      }
+    },
+    {
+      "id": "bd7158d8c442eddfaeb5bd0f",
+      "title": "Build a Pomodoro Clock",
+      "description": [
+        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "Here's a <a href='http://codepen.io/freeCodeCamp/full/XpKrrW' target='_blank'>working example</a>. Try not to look at its code.",
+        "You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
+        "Once you're done, submit below the URL to your working project with all its tests passing.",
+        "Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
+      ],
+      "challengeSeed": [
+        "u5RTBt4"
+      ],
+      "tests": [],
+      "type": "zipline",
+      "isRequired": true,
+      "challengeType": 3,
+      "translations": {
+        "es": {
+          "title": "Crea un reloj pomodoro",
+          "description": []
+        },
+        "ru": {
+          "title": "Создайте таймер Pomodoro",
+          "description": []
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/01-front-end-development-certification/jquery.json b/seed/challenges/03-front-end-libraries/jquery.json
similarity index 99%
rename from seed/challenges/01-front-end-development-certification/jquery.json
rename to seed/challenges/03-front-end-libraries/jquery.json
index ac8c7e1bf5611c..f0b18caa17b31d 100644
--- a/seed/challenges/01-front-end-development-certification/jquery.json
+++ b/seed/challenges/03-front-end-libraries/jquery.json
@@ -1,10 +1,12 @@
 {
   "name": "jQuery",
-  "order": 5,
+  "order": 3,
   "time": "3 hours",
   "helpRoom": "Help",
   "required": [
-   { "link": "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" }
+    {
+      "link": "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"
+    }
   ],
   "challenges": [
     {
@@ -1520,4 +1522,4 @@
       }
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/seed/challenges/03-front-end-libraries/react-and-redux.json b/seed/challenges/03-front-end-libraries/react-and-redux.json
new file mode 100644
index 00000000000000..4d8231cf7c0ee2
--- /dev/null
+++ b/seed/challenges/03-front-end-libraries/react-and-redux.json
@@ -0,0 +1,38 @@
+{
+  "name": "React and Redux",
+  "order": 7,
+  "time": "5 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "587d7dbc367417b2b2512bb0",
+      "title": "Introduction to the React and Redux Challenges",
+      "description": [
+        [
+          "",
+          "",
+          "The React and Redux challenges have not been ported into Free Code Camp yet. You can visit <a href=\"http://hysterical-amusement.surge.sh/\" target=\"_blank\">this link to work through the alpha version</a> of these challenges. If you have feedback, you can open an issue (or pull request) directly on <a href=\"https://github.com/bonham000/fcc-react-tests-module\" target=\"_blank\">this repository.</a>",
+          ""
+        ]
+      ],
+      "releasedOn": "",
+      "challengeSeed": [],
+      "tests": [],
+      "type": "Waypoint",
+      "challengeType": 7,
+      "isRequired": false,
+      "titleEs": "",
+      "descriptionEs": [
+        []
+      ],
+      "titleFr": "",
+      "descriptionFr": [
+        []
+      ],
+      "titleDe": "",
+      "descriptionDe": [
+        []
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/03-front-end-libraries/react.json b/seed/challenges/03-front-end-libraries/react.json
new file mode 100644
index 00000000000000..adbd475a466548
--- /dev/null
+++ b/seed/challenges/03-front-end-libraries/react.json
@@ -0,0 +1,44 @@
+{
+  "name": "React",
+  "order": 5,
+  "time": "5 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "587d7dbc367417b2b2512bb1",
+      "title": "Introduction to the React Challenges",
+      "description": [
+        [
+          "",
+          "",
+          "React is a JavaScript library designed to make it easier to build complex user interfaces. React does this in a few ways:<br><br><ol><li>React allows HTML to render from a JavaScript file.</li><li>React breaks a website's parts into Components that can then be combined to build pages.</li><li>React Components can pass data to each other as properties</li></ol><br><br>React uses a virtual Document Object Model. Instead of changing the DOM directly, React makes a simplified copy of the DOM (the virtual DOM) when the page loads. This allows React to make changes to elements on the page without re-rendering the entire page. This can improve the responsiveness and functionality of single-page applications.<br><br>While not part of the React library and not required, JSX is often paired with React. JSX is a preprocessor for JavaScript written in a syntax akin to XML that results in more readable code.<br><br><strong>Fun fact:</strong>Free Code Camp is built using React.",
+          ""
+        ],
+        [
+          "",
+          "",
+          "The React challenges have not been ported into Free Code Camp yet. You can visit <a href=\"http://hysterical-amusement.surge.sh/\" target=\"_blank\">this link to work through the alpha version</a> of these challenges. If you have feedback, you can open an issue (or pull request) directly on <a href=\"https://github.com/bonham000/fcc-react-tests-module\" target=\"_blank\">this repository.</a>",
+          ""
+        ]
+      ],
+      "releasedOn": "",
+      "challengeSeed": [],
+      "tests": [],
+      "type": "Waypoint",
+      "challengeType": 7,
+      "isRequired": false,
+      "titleEs": "",
+      "descriptionEs": [
+        []
+      ],
+      "titleFr": "",
+      "descriptionFr": [
+        []
+      ],
+      "titleDe": "",
+      "descriptionDe": [
+        []
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/03-front-end-libraries/redux.json b/seed/challenges/03-front-end-libraries/redux.json
new file mode 100644
index 00000000000000..eb85d84d357674
--- /dev/null
+++ b/seed/challenges/03-front-end-libraries/redux.json
@@ -0,0 +1,38 @@
+{
+  "name": "Redux",
+  "order": 6,
+  "time": "5 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "587d7dbd367417b2b2512bb2",
+      "title": "Introduction to the Redux Challenges",
+      "description": [
+        [
+          "",
+          "",
+          "The Redux challenges have not been ported into Free Code Camp yet. You can visit <a href=\"http://hysterical-amusement.surge.sh/\" target=\"_blank\">this link to work through the alpha version</a> of these challenges. If you have feedback, you can open an issue (or pull request) directly on <a href=\"https://github.com/bonham000/fcc-react-tests-module\" target=\"_blank\">this repository.</a>",
+          ""
+        ]
+      ],
+      "releasedOn": "",
+      "challengeSeed": [],
+      "tests": [],
+      "type": "Waypoint",
+      "challengeType": 7,
+      "isRequired": false,
+      "titleEs": "",
+      "descriptionEs": [
+        []
+      ],
+      "titleFr": "",
+      "descriptionFr": [
+        []
+      ],
+      "titleDe": "",
+      "descriptionDe": [
+        []
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/03-front-end-libraries/sass.json b/seed/challenges/03-front-end-libraries/sass.json
new file mode 100644
index 00000000000000..96b5d204f0ef6a
--- /dev/null
+++ b/seed/challenges/03-front-end-libraries/sass.json
@@ -0,0 +1,708 @@
+{
+  "name": "Sass",
+  "order": 4,
+  "time": "5 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "587d7dbd367417b2b2512bb3",
+      "title": "Introduction to the Sass Challenges",
+      "description": [
+        [
+          "",
+          "",
+          "Sass, or \"Syntactically Awesome StyleSheets\", is a language extension of CSS. It adds features that aren't available using basic CSS syntax. Sass makes it easier for developers to simplify and maintain the style sheets for their projects.<br><br>Sass can extend the CSS language because it is a preprocessor. It takes code written using Sass syntax, and converts it into basic CSS. This allows you to create variables, nest CSS rules into others, and import other Sass files, among other things. The result is more compact, easier to read code.<br><br>This section introduces the basic features of Sass.",
+          ""
+        ]
+      ],
+      "releasedOn": "",
+      "challengeSeed": [],
+      "tests": [],
+      "type": "Waypoint",
+      "challengeType": 7,
+      "isRequired": false,
+      "titleEs": "",
+      "descriptionEs": [
+        []
+      ],
+      "titleFr": "",
+      "descriptionFr": [
+        []
+      ],
+      "titleDe": "",
+      "descriptionDe": [
+        []
+      ]
+    },
+    {
+      "id": "587d7dbd367417b2b2512bb4",
+      "title": "Storing Data with Sass Variables",
+      "required": [
+        {
+          "link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
+          "raw": true
+        }
+      ],
+      "description": [
+        "One feature of Sass that's different than CSS is it uses variables. They are declared and set to store data, similar to JavaScript.",
+        "In Javascript, variables are defined using the <code>let</code> and <code>const</code> keywords. In Sass, variables start with a <code>$</code> followed by the variable name.",
+        "Here are a couple examples:",
+        "<blockquote>$main-fonts: Arial, sans-serif;<br>$headings-color: green;<br><br>//To use variables:<br>h1 {<br>&nbsp;&nbsp;font-family: $main-fonts;<br>&nbsp;&nbsp;color: $headings-color;<br>}</blockquote>",
+        "One example where variables are useful is when a number of elements need to be the same color. If that color is changed, the only place to edit the code is the variable value.",
+        "<h4>Instructions</h4>",
+        "Create a variable <code>$text-color</code> and set it to red. Then change the value of the <code>color</code> property for the <code>.blog-post</code> and <code>h2</code> to the <code>$text-color</code> variable."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  ",
+        "  ",
+        "  .header{",
+        "    text-align: center;",
+        "  }",
+        "  .blog-post h2 {",
+        "    color: red;",
+        "  }",
+        "</style>",
+        "",
+        "<h1 class=\"header\">Learn Sass</h1>",
+        "<div class=\"blog-post\">",
+        "  <h2>Some random title</h2>",
+        "  <p>This is a paragraph with some random text in it</p>",
+        "</div>",
+        "<div class=\"blog-post\">",
+        "  <h2>Header #2</h2>",
+        "  <p>Here is some more random text.</p>",
+        "</div>",
+        "<div class=\"blog-post\">",
+        "  <h2>Here is another header</h2>",
+        "  <p>Even more random text within a paragraph</p>",
+        "</div>"
+      ],
+      "tests": [
+        "assert(code.match(/\\$text-color:\\s*?red;/g), 'message: Your code should have a Sass variable declared for <code>$text-color</code> with a value of red.');",
+        "assert(code.match(/color:\\s*?\\$text-color;/g), 'message: Your code should use the <code>$text-color</code> variable to change the <code>color</code> for the <code>.blog-post</code> and <code>h2</code> items.');",
+        "assert($('.blog-post').css('color') == 'rgb(255, 0, 0)', 'message: Your <code>.blog-post</code> element should have a </code>color</code> of red.');",
+        "assert($('h2').css('color') == 'rgb(255, 0, 0)', 'message: Your <code>h2</code> elements should have a </code>color</code> of red.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7dbd367417b2b2512bb5",
+      "title": "Nesting CSS with Sass",
+      "required": [
+        {
+          "link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
+          "raw": true
+        }
+      ],
+      "description": [
+        "Sass allows <code>nesting</code> of CSS rules, which is a useful way of organizing a style sheet.",
+        "Normally, each element is targeted on a different line to style it, like so:",
+        "<blockquote>nav {<br>&nbsp;&nbsp;background-color: red;<br>}<br><br>nav ul {<br>&nbsp;&nbsp;list-style: none;<br>}<br><br>li {<br>&nbsp;&nbsp;display: inline-block;<br>}</blockquote>",
+        "For a large project, the CSS file will have many lines and rules. This is where <code>nesting</code> can help organize your code by placing child style rules within the respective parent elements:",
+        "<blockquote>nav {<br>&nbsp;&nbsp;background-color: red;<br><br>&nbsp;&nbsp;ul {<br>&nbsp;&nbsp;&nbsp;&nbsp;list-style: none;<br><br>&nbsp;&nbsp;&nbsp;&nbsp;li {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;display: inline-block;<br>&nbsp;&nbsp;&nbsp;&nbsp;}<br>&nbsp;&nbsp;}<br>}<br></blockquote>",
+        "<h4>Instructions</h4>",
+        "Use the <code>nesting</code> technique shown above to re-organize the CSS rules for both children of <code>.blog-post</code> element. For testing purposes, the <code>h1</code> should come before the <code>p</code> element."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  .blog-post {",
+        "    ",
+        "  }",
+        "  h1 {",
+        "    text-align: center;",
+        "    color: blue;",
+        "  }",
+        "  p {",
+        "    font-size: 20px;",
+        "  }",
+        "</style>",
+        "",
+        "<div class=\"blog-post\">",
+        "  <h1>Blog Title</h1>",
+        "  <p>This is a paragraph</p>",
+        "</div>"
+      ],
+      "tests": [
+        "assert(code.match(/\\.blog-post\\s*?{\\s*?h1\\s*?{\\s*?text-align:\\s*?center;\\s*?color:\\s*?blue;\\s*?}\\s*?p\\s*?{\\s*?font-size:\\s*?20px;\\s*?}\\s*?}/gi), 'message: Your code should re-organize the CSS rules so the <code>h1</code> and <code>p</code> are nested in the <code>.blog-post</code> parent element.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7dbd367417b2b2512bb6",
+      "title": "Creating Reusable CSS with Mixins",
+      "required": [
+        {
+          "link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
+          "raw": true
+        }
+      ],
+      "description": [
+        "In Sass, a <code>mixin</code> is a group of CSS declarations that can be reused throughout the style sheet.",
+        "Newer CSS features take time before they are fully adopted and ready to use in all browsers. As features are added to browsers, CSS rules using them may need vendor prefixes. Consider \"box-shadow\":",
+        "<blockquote>div {<br>&nbsp;&nbsp;-webkit-box-shadow: 0px 0px 4px #fff;<br>&nbsp;&nbsp;-moz-box-shadow: 0px 0px 4px #fff;<br>&nbsp;&nbsp;-ms-box-shadow: 0px 0px 4px #fff;<br>&nbsp;&nbsp;box-shadow: 0px 0px 4px #fff;<br>}</blockquote>",
+        "It's a lot of typing to re-write this rule for all the elements that have a <code>box-shadow</code>, or to change each value to test different effects.",
+        "<code>Mixins</code> are like functions for CSS. Here is how to write one:",
+        "<blockquote>@mixin box-shadow($x, $y, $blur, $c){ <br>&nbsp;&nbsp;-webkit-box-shadow: $x, $y, $blur, $c;<br>&nbsp;&nbsp;-moz-box-shadow: $x, $y, $blur, $c;<br>&nbsp;&nbsp;-ms-box-shadow: $x, $y, $blur, $c;<br>&nbsp;&nbsp;box-shadow: $x, $y, $blur, $c;<br>}</blockquote>",
+        "The definition starts with <code>@mixin</code> followed by a custom name. The parameters (the <code>$x</code>, <code>$y</code>, <code>$blur</code>, and <code>$c</code> in the example above) are optional.",
+        "Now any time a <code>box-shadow</code> rule is needed, only a single line calling the <code>mixin</code> replaces having to type all the vendor prefixes. A <code>mixin</code> is called with the <code>@include</code> directive:",
+        "<blockquote>div {<br>&nbsp;&nbsp;@include box-shadow(0px, 0px, 4px, #fff);<br>}</blockquote>",
+        "<h4>Instructions</h4>",
+        "Write a <code>mixin</code> for <code>border-radius</code> and give it a <code>$radius</code> parameter. It should use all the vendor prefixes from the example. Then use the <code>border-radius</code> <code>mixin</code> to give the <code>#awesome</code> element a border radius of 15px."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  ",
+        "  ",
+        "  ",
+        "  #awesome {",
+        "    width: 150px;",
+        "    height: 150px;",
+        "    background-color: green;",
+        "    ",
+        "  }",
+        "</style>",
+        "",
+        "<div id=\"awesome\"></div>",
+        "  "
+      ],
+      "tests": [
+        "assert(code.match(/@mixin\\s+?border-radius\\(\\$radius\\)\\s*?{/gi), 'message: Your code should declare a <code>mixin</code> named <code>border-radius</code> which has a parameter named <code>$radius</code>.');",
+        "assert(code.match(/-webkit-border-radius:\\s*?\\$radius;/gi), 'message: Your code should include the <code>-webkit-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.');",
+        "assert(code.match(/-moz-border-radius:\\s*?\\$radius;/gi), 'message: Your code should include the <code>-moz-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.');",
+        "assert(code.match(/-ms-border-radius:\\s*?\\$radius;/gi), 'message: Your code should include the <code>-ms-border-radius</code> vender prefix that uses the <code>$radius</code> parameter.');",
+        "assert(code.match(/border-radius:\\s*?\\$radius;/gi).length == 4, 'message: Your code should include the general <code>border-radius</code> rule that uses the <code>$radius</code> parameter.');",
+        "assert(code.match(/@include\\s+?border-radius\\(15px\\);/gi), 'message: Your code should call the <code>border-radius mixin</code> using the <code>@include</code> keyword, setting it to 15px.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7dbe367417b2b2512bb8",
+      "title": "Using @if and @else.",
+      "required": [
+        {
+          "link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
+          "raw": true
+        }
+      ],
+      "description": [
+        "The <code>@if</code> directive in Sass is useful to test for a specific case - it works just like the <code>if</code> statement in JavaScript</code>.",
+        "<blockquote>@mixin make-bold($bool) {<br>&nbsp;&nbsp;@if $bool == bold { font-weight: bold; }<br>}</blockquote>",
+        "And just like in JavaScript, <code>@else if</code> and <code>@else</code> test for more conditions:",
+        "<blockquote>@mixin text-effect($val) {<br>&nbsp;&nbsp;@if $val == danger {color: red;}<br>&nbsp;&nbsp;@else if $val == alert {color: yellow;}<br>&nbsp;&nbsp;@else if $val == success {color: green;}<br>&nbsp;&nbsp;@else {color: black;}<br>}</blockquote>",
+        "<h4>Instructions</h4>",
+        "Create a <code>mixin</code> called <code>border-stroke</code> that takes a parameter <code>$val</code>. The <code>mixin</code> should check for the following conditions using <code>@if</code>, <code>@else if</code>, and <code>@else</code>:",
+        "<blockquote>light - 1px solid black<br>medium - 3px solid black<br>heavy - 6px solid black<br>none - no border</blockquote>"
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  ",
+        "  ",
+        "  ",
+        "  #box {",
+        "    width: 150px;",
+        "    height: 150px;",
+        "    background-color: red;",
+        "    @include border-stroke(medium);",
+        "  }  ",
+        "</style>",
+        "",
+        "<div id=\"box\"></div>"
+      ],
+      "tests": [
+        "assert(code.match(/@mixin\\s+?border-stroke\\(\\$val\\)\\s*?{/gi), 'message: Your code should declare a <code>mixin</code> named <code>border-stroke</code> which has a parameter named <code>$val</code>.');",
+        "assert(code.match(/@if\\s+?\\$val\\s*?===?\\s*?light\\s*?{\\s*?border:\\s*?1px\\s+?solid\\s+?black;\\s*?}/gi), 'message: Your <code>mixin</code> should have an <code>@if</code> statement to check if <code>$val</code> is light, and to set the <code>border</code> to 1px solid black.');",
+        "assert(code.match(/@else\\s+?if\\s+?\\$val\\s*?===?\\s*?medium\\s*?{\\s*?border:\\s*?3px\\s+?solid\\s+?black;\\s*?}/gi), 'message: Your <code>mixin</code> should have an <code>@else if</code> statement to check if <code>$val</code> is medium, and to set the <code>border</code> to 3px solid black.');",
+        "assert(code.match(/@else\\s+?if\\s+?\\$val\\s*?===?\\s*?heavy\\s*?{\\s*?border:\\s*?6px\\s+?solid\\s+?black;\\s*?}/gi), 'message: Your <code>mixin</code> should have an <code>@else if</code> statement to check if <code>$val</code> is heavy, and to set the <code>border</code> to 6px solid black.');",
+        "assert(code.match(/@else\\s*?{\\s*?border:\\s*?none;\\s*?}/gi), 'message: Your <code>mixin</code> should have an <code>@else</code> statement to set the <code>border</code> to none.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7dbe367417b2b2512bb9",
+      "title": "Continuing with @for",
+      "required": [
+        {
+          "link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
+          "raw": true
+        }
+      ],
+      "description": [
+        "The <code>@for</code> directive adds styles in a loop, very similar to a <code>for</code> loop in JavaScript.",
+        "<code>@for</code> is used in two ways: \"start through end\" or \"start to end\". The main difference is that \"start to end\" <em>excludes</em> the end number, and \"start through end\" <em>includes</em> the end number.",
+        "Here's a start <b>through</b> end example:",
+        "<blockquote>@for $i from 1 through 12 {<br>&nbsp;&nbsp;.col-#{$i} { width: 100%/12 * $i; }<br>}</blockquote>",
+        "The <code>#{$i}</code> part is the syntax to combine a variable (<code>i</code>) with text to make a string. When the Sass file is converted to CSS, it looks like this:",
+        "<blockquote>.col-1 {<br>&nbsp;&nbsp;width: 8.33333%;<br>}<br><br>.col-2 {<br>&nbsp;&nbsp;width: 16.66667%;<br>}<br><br>...<br><br>.col-12 {<br>&nbsp;&nbsp;width: 100%;<br>}</blockquote>",
+        "This is a powerful way to create a grid layout. Now you have twelve options for column widths available as CSS classes.",
+        "<h4>Instructions</h4>",
+        "Write a <code>@for</code> directive that takes a variable <code>$j</code> that goes from 1 <b>to</b> 6.",
+        "It should create 5 classes called <code>.text-1</code> to <code>.text-5</code> where each has a <code>font-size</code> set to 10px multiplied by the index."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  ",
+        "  ",
+        "  ",
+        "</style>",
+        "",
+        "<p class=\"text-1\">Hello</p>",
+        "<p class=\"text-2\">Hello</p>",
+        "<p class=\"text-3\">Hello</p>",
+        "<p class=\"text-4\">Hello</p>",
+        "<p class=\"text-5\">Hello</p>"
+      ],
+      "tests": [
+        "assert(code.match(/@for /g), 'message: Your code should use the <code>@for</code> directive.');",
+        "assert($('.text-1').css('font-size') == '10px', 'message: Your <code>.text-1</code> class should have a <code>font-size</code> of 10px.');",
+        "assert($('.text-2').css('font-size') == '20px', 'message: Your <code>.text-2</code> class should have a <code>font-size</code> of 20px.');",
+        "assert($('.text-3').css('font-size') == '30px', 'message: Your <code>.text-3</code> class should have a <code>font-size</code> of 30px.');",
+        "assert($('.text-4').css('font-size') == '40px', 'message: Your <code>.text-4</code> class should have a <code>font-size</code> of 40px.');",
+        "assert($('.text-5').css('font-size') == '50px', 'message: Your <code>.text-5</code> class should have a <code>font-size</code> of 50px.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7dbf367417b2b2512bba",
+      "title": "Expanding with @each",
+      "required": [
+        {
+          "link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
+          "raw": true
+        }
+      ],
+      "description": [
+        "The last challenge showed how the <code>@for</code> directive uses a starting and ending value to loop a certain number of times. Sass also offers the <code>@each</code> directive which loops over each item in a list or map.",
+        "On each iteration, the variable gets assigned to the current value from the list or map.",
+        "<blockquote>@each $color in blue, red, green {<br>&nbsp;&nbsp;.#{$color}-text {color: $color;}<br>}</blockquote>",
+        "A map has slightly different syntax. Here's an example:",
+        "<blockquote>$colors: (color1: blue, color2: red, color3: green);<br><br>@each $key, $color in $colors {<br>&nbsp;&nbsp;.#{$color}-text {color: $color;}<br>}</blockquote>",
+        "Note that the <code>$key</code> variable is needed to reference the keys in the map. Otherwise, the compiled CSS would have <code>color1</code>, <code>color2</code>... in it.",
+        "Both of the above code examples are converted into the following CSS:",
+        "<blockquote>.blue-text {<br>&nbsp;&nbsp;color: blue;<br>}<br><br>.red-text {<br>&nbsp;&nbsp;color: red;<br>}<br><br>.green-text {<br>&nbsp;&nbsp;color: green;<br>}</blockquote>",
+        "<h4>Instructions</h4>",
+        "Write an <code>@each</code> directive that goes through a list: <code>blue, black, red</code> and assigns each variable to a <code>.color-bg</code> class, where the \"color\" part changes for each item.",
+        "Each class should set the <code>background-color</code> the respective color."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  ",
+        "  ",
+        "  ",
+        "  div {",
+        "    height: 200px;",
+        "    width: 200px;",
+        "  }",
+        "</style>",
+        "",
+        "<div class=\"blue-bg\"></div>",
+        "<div class=\"black-bg\"></div>",
+        "<div class=\"red-bg\"></div>"
+      ],
+      "tests": [
+        "assert(code.match(/@each /g), 'message: Your code should use the <code>@each</code> directive.');",
+        "assert($('blue-bg').css('background-color') == 'rgb(0, 0, 255)', 'message: Your <code>.blue-bg</code> class should have a <code>background-color</code> of blue.');",
+        "assert($('black-bg').css('background-color') == 'rgb(0, 0, 0)', 'message: Your <code>.black-bg</code> class should have a <code>background-color</code> of black.');",
+        "assert($('red-bg').css('background-color') == 'rgb(255, 0, 0)', 'message: Your <code>.red-bg</code> class should have a <code>background-color</code> of red.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7dbf367417b2b2512bbb",
+      "title": "Wrapping up with @while",
+      "required": [
+        {
+          "link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
+          "raw": true
+        }
+      ],
+      "description": [
+        "The <code>@while</code> directive is an option with similar functionality to the JavaScript <code>while</code> loop. It creates CSS rules until a condition is met.",
+        "The <code>@for</code> challenge gave an example to create a simple grid system. This can also work with <code>@while</code>.",
+        "<blockquote>$x: 1;<br>@while $x < 13 {<br>&nbsp;&nbsp;.col-#{$x} { width: 100%/12 * $x;}<br>&nbsp;&nbsp;$x: $x + 1;<br>}</blockquote>",
+        "First, define a variable <code>$x</code> and set it to 1. Next, use the <code>@while</code> directive to create the grid system <i>while</i> <code>$x</code> is less than 13.",
+        "After setting the CSS rule for <code>width</code>, <code>$x</code> is incremented by 1 to avoid an infinite loop.",
+        "<h4>Instructions</h4>",
+        "Use <code>@while</code> to create a series of classes with different <code>font-sizes</code>.",
+        "There should be 10 different classes from <code>text-1</code> to <code>text-10</code>. Then set <code>font-size</code> to 5px multiplied by the current index number. Make sure to avoid an infinite loop!"
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  ",
+        "  ",
+        "  ",
+        "</style>",
+        "",
+        "<p class=\"text-1\">Hello</p>",
+        "<p class=\"text-2\">Hello</p>",
+        "<p class=\"text-3\">Hello</p>",
+        "<p class=\"text-4\">Hello</p>",
+        "<p class=\"text-5\">Hello</p>",
+        "<p class=\"text-6\">Hello</p>",
+        "<p class=\"text-7\">Hello</p>",
+        "<p class=\"text-8\">Hello</p>",
+        "<p class=\"text-9\">Hello</p>",
+        "<p class=\"text-10\">Hello</p>"
+      ],
+      "tests": [
+        "assert(code.match(/@while /g), 'message: Your code should use the <code>@while</code> directive.');",
+        "assert(code.match(/\\$.*:\\s*?1;/gi), 'message: Your code should set an index variable to 1 to start.');",
+        "assert(code.match(/\\$(.*):\\s*?\\$\\1\\s*?\\+\\s*?1;/gi), 'message: Your code should increment the counter variable.');",
+        "assert($('.text-1').css('font-size') == '5px', 'message: Your <code>.text-1</code> class should have a <code>font-size</code> of 5px.');",
+        "assert($('.text-2').css('font-size') == '10px', 'message: Your <code>.text-2</code> class should have a <code>font-size</code> of 10px.');",
+        "assert($('.text-3').css('font-size') == '15px', 'message: Your <code>.text-3</code> class should have a <code>font-size</code> of 15px.');",
+        "assert($('.text-4').css('font-size') == '20px', 'message: Your <code>.text-4</code> class should have a <code>font-size</code> of 20px.');",
+        "assert($('.text-5').css('font-size') == '25px', 'message: Your <code>.text-5</code> class should have a <code>font-size</code> of 25px.');",
+        "assert($('.text-6').css('font-size') == '30px', 'message: Your <code>.text-6</code> class should have a <code>font-size</code> of 30px.');",
+        "assert($('.text-7').css('font-size') == '35px', 'message: Your <code>.text-7</code> class should have a <code>font-size</code> of 35px.');",
+        "assert($('.text-8').css('font-size') == '40px', 'message: Your <code>.text-8</code> class should have a <code>font-size</code> of 40px.');",
+        "assert($('.text-9').css('font-size') == '45px', 'message: Your <code>.text-9</code> class should have a <code>font-size</code> of 45px.');",
+        "assert($('.text-10').css('font-size') == '50px', 'message: Your <code>.text-10</code> class should have a <code>font-size</code> of 50px.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7dbf367417b2b2512bbc",
+      "title": "Partials",
+      "required": [
+        {
+          "link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
+          "raw": true
+        }
+      ],
+      "description": [
+        "<code>Partials</code> in Sass are separate files that hold segments of CSS code. These are imported and used in other Sass files. This is a great way to group similar code into a module to keep it organized.",
+        "Names for <code>partials</code> start with the underscore (<code>_</code>) character, which tells Sass it is a small segment of CSS and not to convert it into a CSS file. Also, Sass files end with the <code>.scss</code> file extension. To bring the code in the <code>partial</code> into another Sass file, use the <code>@import</code> directive.",
+        "For example, if all your <code>mixins</code> are saved in a <code>partial</code> named \"_mixins.scss\", and they are needed in the \"main.scss\" file, this is how to use them in the main file:",
+        "<blockquote>// In the main.scss file<br><br>@import 'mixins'</blockquote>",
+        "Note that the underscore is not needed in the <code>import</code> statement - Sass understands it is a <code>partial</code>. Once a <code>partial</code> is imported into a file, all variables, <code>mixins</code>, and other code are available to use.",
+        "<h4>Instructions</h4>",
+        "Write an <code>@import</code> statement to import a <code>partial</code> named <code>_variables.scss</code> into the main.scss file."
+      ],
+      "challengeSeed": [
+        "// The main.scss file",
+        "",
+        "",
+        "",
+        ""
+      ],
+      "tests": [
+        "assert(code.match(/@import\\s+?('|\")variables\\1/gi), 'message: Your code should use the <code>@import</code> directive, and should not include the underscore in the file name.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fa5367417b2b2512bbd",
+      "title": "Extend your CSS styles",
+      "required": [
+        {
+          "link": "https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.9.13/sass.min.js",
+          "raw": true
+        }
+      ],
+      "description": [
+        "Sass has a feature called <code>extend</code> that makes it easy to borrow the CSS rules from one element and build upon them in another.",
+        "For example, the below block of CSS rules style a <code>.panel</code> class. It has a <code>background-color</code>, <code>height</code> and <code>border</code>.",
+        "<blockquote>.panel{<br>&nbsp;&nbsp;background-color: red;<br>&nbsp;&nbsp;height: 70px;<br>&nbsp;&nbsp;border: 2px solid green;<br>}</blockquote>",
+        "Now you want another panel called <code>.big-panel</code>. It has the same base properties as <code>.panel</code>, but also needs a <code>width</code> and <code>font-size</code>.",
+        "It's possible to copy and paste the initial CSS rules from <code>.panel</code>, but the code becomes repetitive as you add more types of panels.",
+        "The <code>extend</code> directive is a simple way to reuse the rules written for one element, then add more for another:",
+        "<blockquote>.big-panel{<br>&nbsp;&nbsp;@extend .panel;<br>&nbsp;&nbsp;width: 150px;<br>&nbsp;&nbsp;font-size: 2em;<br>}</blockquote>",
+        "The <code>.big-panel</code> will have the same properties as <code>.panel</code> in addition to the new styles.",
+        "<h4>Instructions</h4>",
+        "Make a class <code>.info-important</code> that extends <code>.info</code> and also has a <code>background-color</code> set to magenta."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  h3{",
+        "    text-align: center;",
+        "  }",
+        "  .info{",
+        "    width: 200px;",
+        "    border: 1px solid black;",
+        "    margin: 0 auto;",
+        "  }",
+        "  ",
+        "  ",
+        "  ",
+        "  ",
+        "</style>",
+        "<h3>Posts</h3>",
+        "<div class=\"info-important\">",
+        "  <p>This is an important post. It should extend the class \".info\" and have its own CSS styles.</p>",
+        "</div>",
+        "",
+        "<div class=\"info\">",
+        "  <p>This is a simple post. It has basic styling and can be extended for other uses.</p>",
+        "</div>"
+      ],
+      "tests": [
+        "assert(code.match(/@extend\\s+?\\.info/g), 'message: Your code should use the <code>@extend</code> directive to extend the <code>info</code> class.');",
+        "assert($('.info-important').css('background-color') == 'rgb(255, 0, 255)', 'message: Your <code>info-important</code> class should have a <code>background-color</code> set to magenta.');",
+        "assert($('.info-important').css('width') == '200px', 'message: Your <code>info-important</code> class should inherit the styling from the <code>info</code> class.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/04-data-visualization/claim-your-data-visualization-certificate.json b/seed/challenges/04-data-visualization/claim-your-data-visualization-certificate.json
new file mode 100644
index 00000000000000..c123358ce2a9db
--- /dev/null
+++ b/seed/challenges/04-data-visualization/claim-your-data-visualization-certificate.json
@@ -0,0 +1,108 @@
+{
+  "name": "Claim Your Data Visualization Certificate",
+  "order": 13,
+  "time": "5 minutes",
+  "challenges": [
+    {
+      "id": "587d7fa5367417b2b2512bbe",
+      "title": "Claim Your Data Visualization Certificate",
+      "description": [
+        [
+          "//i.imgur.com/k8btNUB.jpg",
+          "An image of our Data Visualization Certificate",
+          "This challenge will give you your verified Data Visualization Certificate. Before we issue your certificate, we must verify that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
+          ""
+        ],
+        [
+          "//i.imgur.com/uLPsUko.jpg",
+          "The definition of plagiarism: Plagiarism (noun) - copying someone else’s work and presenting it as your own without crediting them",
+          "By clicking below, you pledge that all of your submitted code A) is code you or your pair personally wrote, or B) comes from open source libraries like jQuery, or C) has been clearly attributed to its original authors. You also give us permission to audit your challenge solutions and revoke your certificate if we discover evidence of plagiarism.",
+          "#"
+        ],
+        [
+          "//i.imgur.com/UedoV2G.jpg",
+          "An image of the text \"Front End Development Certificate requirements\"",
+          "Let's confirm that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. Click the button below to verify this.",
+          "#"
+        ],
+        [
+          "//i.imgur.com/Q5Za9U6.jpg",
+          "An image of the word \"Congratulations\"",
+          "Congratulations! We've added your Data Visualization Certificate to your portfolio page. Unless you choose to hide your solutions, this certificate will remain publicly visible and verifiable.",
+          ""
+        ]
+      ],
+      "challengeSeed": [
+        {
+          "properties": [
+            "isHonest",
+            "isFrontEndCert"
+          ],
+          "apis": [
+            "/certificate/honest",
+            "/certificate/verify/front-end"
+          ],
+          "stepIndex": [
+            1,
+            2
+          ]
+        }
+      ],
+      "tests": [
+        {
+          "id": "587d7fa6367417b2b2512bc0",
+          "title": "Visualize Data with a Treemap Diagram"
+        },
+        {
+          "id": "587d7fa6367417b2b2512bbf",
+          "title": "Visualize Data with a Choropleth Map"
+        },
+        {
+          "id": "bd7188d8c242eddfaeb5bd13",
+          "title": "Visualize Data with a Heat Map"
+        },
+        {
+          "id": "bd7178d8c242eddfaeb5bd13",
+          "title": "Visualize Data with a Scatterplot Graph"
+        },
+        {
+          "id": "bd7168d8c242eddfaeb5bd13",
+          "title": "Visualize Data with a Bar Chart"
+        }
+      ],
+      "type": "Waypoint",
+      "challengeType": 7,
+      "translations": {
+        "es": {
+          "title": "Reclama tu certificado de Desarrollo de interfaces",
+          "description": [
+            [
+              "//i.imgur.com/k8btNUB.jpg",
+              "Una imagen que muestra nuestro certificado de Desarrollo de interfaces",
+              "Este desafío te otorga tu certificado autenticado de Desarrollo de interfaces. Antes de que podamos emitir tu certificado, debemos verificar que has completado todos los desafíos básicos e intermedios de diseño de algoritmos, y todos los proyectos básicos e intermedios de desarrollo de interfaces. También debes aceptar nuestro Juramento de honestidad académica. Pulsa el botón siguiente para iniciar este proceso.",
+              ""
+            ],
+            [
+              "//i.imgur.com/HArFfMN.jpg",
+              "Plagio (nombre): acción y efecto de plagiar. Plagiar (verbo) - copiar en lo sustancial obras ajenas, dándolas como propias.",
+              "Al pulsar el botón siguiente, juras que todo el código en tus soluciones a los desafíos A) es código que tú o tu compañero escribieron personalmente, o B) proviene de librerías de código abierto como jQuery, o C) ha sido claramente atribuido a sus autores originales. También nos otorgas el permiso para auditar tus soluciones a los desafíos y revocar tu certificado si encontramos evidencia de plagio.",
+              "#"
+            ],
+            [
+              "//i.imgur.com/14F2Van.jpg",
+              "Una imagen del texto \"Front End Development Certificate requirements\"",
+              "Confirmemos que has completado todos nuestros desafíos básicos e intermedios de diseño de algoritmos, y todos nuestros proyectos básicos e intermedios de desarrollo de interfaces. Pulsa el botón siguiente para hacer la verificación.",
+              "#"
+            ],
+            [
+              "//i.imgur.com/16SIhHO.jpg",
+              "Una imagen de la palabra \"Congratulations\"",
+              "¡Felicitaciones! Hemos agregado tu certificado de Desarrollo de interfaces a tu portafolio. A menos que elijas no mostrar tus soluciones, este certificado será públicamente visible y verificable.",
+              ""
+            ]
+          ]
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/04-data-visualization/data-visualization-projects.json b/seed/challenges/04-data-visualization/data-visualization-projects.json
new file mode 100644
index 00000000000000..265e2426f9942e
--- /dev/null
+++ b/seed/challenges/04-data-visualization/data-visualization-projects.json
@@ -0,0 +1,134 @@
+{
+  "name": "Data Visualization Projects",
+  "order": 3,
+  "time": "150 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "bd7168d8c242eddfaeb5bd13",
+      "title": "Visualize Data with a Bar Chart",
+      "description": [
+        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "Here's a <a href='http://codepen.io/freeCodeCamp/full/GrZVaM' target='_blank'>working example</a>. Try not to look at its code.",
+        "You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
+        "Once you're done, submit below the URL to your working project with all its tests passing.",
+        "Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
+      ],
+      "challengeSeed": [
+        "G6iPE6W"
+      ],
+      "tests": [],
+      "isRequired": true,
+      "releasedOn": "January 1, 2016",
+      "type": "zipline",
+      "challengeType": 3,
+      "translations": {
+        "es": {
+          "title": "Visualiza datos utilizando un gráfico de barras",
+          "description": []
+        }
+      }
+    },
+    {
+      "id": "bd7178d8c242eddfaeb5bd13",
+      "title": "Visualize Data with a Scatterplot Graph",
+      "description": [
+        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "Here's a <a href='http://codepen.io/freeCodeCamp/full/bgpXyK' target='_blank'>working example</a>. Try not to look at its code.",
+        "You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
+        "Once you're done, submit below the URL to your working project with all its tests passing.",
+        "Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
+      ],
+      "challengeSeed": [
+        "opubu3f"
+      ],
+      "tests": [],
+      "isRequired": true,
+      "releasedOn": "January 1, 2016",
+      "type": "zipline",
+      "challengeType": 3,
+      "translations": {
+        "es": {
+          "title": "Visualiza datos utilizando un gráfico de dispersión",
+          "description": []
+        }
+      }
+    },
+    {
+      "id": "bd7188d8c242eddfaeb5bd13",
+      "title": "Visualize Data with a Heat Map",
+      "description": [
+        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "Here's a <a href='http://codepen.io/freeCodeCamp/full/JEXgeY' target='_blank'>working example</a>. Try not to look at its code.",
+        "You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
+        "Once you're done, submit below the URL to your working project with all its tests passing.",
+        "Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
+      ],
+      "challengeSeed": [
+        "s4XtjKa"
+      ],
+      "tests": [],
+      "isRequired": true,
+      "releasedOn": "January 1, 2016",
+      "type": "zipline",
+      "challengeType": 3,
+      "translations": {
+        "es": {
+          "title": "Visualiza datos utilizando un mapa de calor",
+          "description": []
+        }
+      }
+    },
+    {
+      "id": "587d7fa6367417b2b2512bbf",
+      "title": "Visualize Data with a Choropleth Map",
+      "description": [
+        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "Here's a <a href='http://codepen.io/freeCodeCamp/full/EZKqza' target='_blank'>working example</a>. Try not to look at its code.",
+        "You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
+        "Once you're done, submit below the URL to your working project with all its tests passing.",
+        "Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
+      ],
+      "challengeSeed": [
+        "K3qqL7U"
+      ],
+      "tests": [],
+      "isRequired": true,
+      "releasedOn": "January 15, 2017",
+      "type": "zipline",
+      "challengeType": 3,
+      "translations": {
+        "es": {
+          "title": "",
+          "description": []
+        }
+      }
+    },
+    {
+      "id": "587d7fa6367417b2b2512bc0",
+      "title": "Visualize Data with a Treemap Diagram",
+      "description": [
+        "This isn't ready yet. Here's the issue: https://github.com/freeCodeCamp/CurriculumExpansion/issues/65",
+        "Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
+        "Here's a <a href='' target='_blank'>working example</a>. Try not to look at its code.",
+        "You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
+        "Once you're done, submit below the URL to your working project with all its tests passing.",
+        "Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
+      ],
+      "challengeSeed": [
+        ""
+      ],
+      "tests": [],
+      "isRequired": true,
+      "releasedOn": "January 15, 2017",
+      "type": "zipline",
+      "challengeType": 3,
+      "translations": {
+        "es": {
+          "title": "",
+          "description": []
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/04-data-visualization/data-visualization-with-d3.json b/seed/challenges/04-data-visualization/data-visualization-with-d3.json
new file mode 100644
index 00000000000000..fe3ebb73449ac8
--- /dev/null
+++ b/seed/challenges/04-data-visualization/data-visualization-with-d3.json
@@ -0,0 +1,2279 @@
+{
+  "name": "Data Visualization with D3",
+  "order": 1,
+  "time": "5 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "587d7fa6367417b2b2512bc1",
+      "title": "Introduction to the Data Visualization with D3 Challenges",
+      "description": [
+        [
+          "http://imgs.xkcd.com/comics/movie_narrative_charts.png",
+          "XKCD web comic showing very detailed charts of movie character interactions for Lord of the Rings, Star Wars (original trilogy), Jurassic Park, 12 Angry Men, and Primer. The charts show grouped lines, representing when characters appear together, over time.",
+          "D3.js, or D3, stands for Data Driven Documents. D3 is a JavaScript library to create dynamic and interactive data visualizations in the browser. It's built to work with common web standards, namely HTML, CSS, and Scalable Vector Graphics (SVG).<br><br>D3 takes input data and maps it into a visual representation of that data. It supports many different data formats. D3 lets you bind (or attach) the data to the Document Object Model (DOM). You use HTML or SVG elements with D3's built-in methods to transform the data into a visualization.<br><br>D3 gives you a lot of control over the presentation of data. This section covers the basic functionality and how to create visualizations with the D3 library.",
+          ""
+        ]
+      ],
+      "releasedOn": "",
+      "challengeSeed": [],
+      "tests": [],
+      "type": "Waypoint",
+      "challengeType": 7,
+      "isRequired": false,
+      "titleEs": "",
+      "descriptionEs": [
+        []
+      ],
+      "titleFr": "",
+      "descriptionFr": [
+        []
+      ],
+      "titleDe": "",
+      "descriptionDe": [
+        []
+      ]
+    },
+    {
+      "id": "587d7fa6367417b2b2512bc2",
+      "title": "Add Document Elements with D3",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "D3 has several methods that let you add and change elements in your document.",
+        "The <code>select()</code> method selects one element from the document. It takes an argument for the name of the element you want and returns an HTML node for the first element in the document that matches the name. Here's an example:",
+        "<code>const anchor = d3.select(\"a\");</code>",
+        "The above example finds the first anchor tag on the page and saves an HTML node for it in the variable <code>anchor</code>. You can use the selection with other methods. The \"d3\" part of the example is a reference to the D3 object, which is how you access D3 methods.",
+        "Two other useful methods are <code>append()</code> and <code>text()</code>.",
+        "The <code>append()</code> method takes an argument for the element you want to add to the document. It appends an HTML node to a selected item, and returns a handle to that node.",
+        "The <code>text()</code> method either sets the text of the selected node, or gets the current text. To set the value, you pass a string as an argument inside the parentheses of the method.",
+        "Here's an example that selects an unordered list, appends a list item, and adds text:",
+        "<blockquote>d3.select(\"ul\")<br>    .append(\"li\")<br>    .text(\"Very important item\");</blockquote>",
+        "D3 allows you to chain several methods together with periods to perform a number of actions in a row.",
+        "<h4>Instructions</h4>",
+        "Use the <code>select</code> method to select the <code>body</code> tag in the document. Then <code>append</code> an <code>h1</code> tag to it, and add the text \"Learning D3\" into the <code>h1</code> element."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <script>",
+        "    // Add your code below this line",
+        "    ",
+        "    ",
+        "    ",
+        "    // Add your code above this line",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('body').children('h1').length == 1, 'message: The <code>body</code> should have one <code>h1</code> element.');",
+        "assert($('h1').text() == \"Learning D3\", 'message: The <code>h1</code> element should have the text \"Learning D3\" in it.');",
+        "assert(code.match(/d3/g), 'message: Your code should access the <code>d3</code> object.');",
+        "assert(code.match(/\\.select/g), 'message: Your code should use the <code>select</code> method.');",
+        "assert(code.match(/\\.append/g), 'message: Your code should use the <code>append</code> method.');",
+        "assert(code.match(/\\.text/g), 'message: Your code should use the <code>text</code> method.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fa6367417b2b2512bc3",
+      "title": "Select a Group of Elements with D3",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "D3 also has the <code>selectAll()</code> method to select a group of elements. It returns an array of HTML nodes for all the items in the document that match the input string. Here's an example to select all the anchor tags in a document:",
+        "<code>const anchors = d3.selectAll(\"a\");</code>",
+        "Like the <code>select()</code> method, <code>selectAll()</code> supports method chaining, and you can use it with other methods.",
+        "<h4>Instructions</h4>",
+        "Select all of the <code>li</code> tags in the document, and change their text to \"list item\"."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <ul>",
+        "    <li>Example</li>",
+        "    <li>Example</li>",
+        "    <li>Example</li>",
+        "  </ul>",
+        "  <script>",
+        "    // Add your code below this line",
+        "    ",
+        "    ",
+        "    ",
+        "    // Add your code above this line",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('li').text().match(/list item/g).length == 3, 'message: There should be 3 <code>li</code> elements on the page, and the text in each one should say \"list item\". Capitalization and spacing should match exactly.');",
+        "assert(code.match(/d3/g), 'message: Your code should access the <code>d3</code> object.');",
+        "assert(code.match(/\\.selectAll/g), 'message: Your code should use the <code>selectAll</code> method.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fa7367417b2b2512bc4",
+      "title": "Work with Data in D3",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "The D3 library focuses on a data-driven approach. When you have a set of data, you can apply D3 methods to display it on the page. Data comes in many formats, but this challenge uses a simple array of numbers.",
+        "The first step is to make D3 aware of the data. The <code>data()</code> method is used on a selection of DOM elements to attach the data to those elements. The data set is passed as an argument to the method.",
+        "A common workflow pattern is to create a new element in the document for each piece of data in the set. D3 has the <code>enter()</code> method for this purpose.",
+        "When <code>enter()</code> is combined with the <code>data()</code> method, it looks at the selected elements from the page and compares them to the number of data items in the set. If there are fewer elements than data items, it creates the missing elements.",
+        "Here is an example that selects a <code>ul</code> element and creates a new list item based on the number of entries in the array:",
+        "<blockquote>&lt;body&gt;<br>  &lt;ul&gt;&lt;/ul&gt;<br>  &lt;script&gt;<br>    const dataset = [\"a\", \"b\", \"c\"];<br>    d3.select(\"ul\").selectAll(\"li\")<br>      .data(dataset)<br>      .enter()<br>      .append(\"li\")<br>      .text(\"New item\");<br>  &lt;/script&gt;<br>&lt;/body&gt;</blockquote>",
+        "It may seem confusing to select elements that don't exist yet. This code is telling D3 to first select the <code>ul</code> on the page. Next, select all list items, which returns an empty selection. Then the <code>data()</code> method reviews the dataset and runs the following code three times, once for each item in the array. The <code>enter()</code> method sees there are no <code>li</code> elements on the page, but it needs 3 (one for each piece of data in <code>dataset</code>). New <code>li</code> elements are appended to the <code>ul</code> and have the text \"New item\".",
+        "<h4>Instructions</h4>",
+        "Select the <code>body</code> node, then select all <code>h2</code> elements. Have D3 create and append an <code>h2</code> tag for each item in the <code>dataset</code> array. The text in the <code>h2</code> should say \"New Title\". Your code should use the <code>data()</code> and <code>enter()</code> methods."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <script>",
+        "    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];",
+        "    ",
+        "    // Add your code below this line",
+        "    ",
+        "    ",
+        "    ",
+        "    // Add your code above this line",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('h2').length == 9, 'message: Your document should have 9 <code>h2</code> elements.');",
+        "assert($('h2').text().match(/New Title/g).length == 9, 'message: The text in the <code>h2</code> elements should say \"New Title\". The capitalization and spacing should match exactly.');",
+        "assert(code.match(/\\.data/g), 'message: Your code should use the <code>data()</code> method.');",
+        "assert(code.match(/\\.enter/g), 'message: Your code should use the <code>enter()</code> method.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fa7367417b2b2512bc5",
+      "title": "Work with Dynamic Data in D3",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "The last couple challenges covered the tools used to display dynamic data. They introduced the <code>data()</code> and <code>enter()</code> methods. These functions take a data set, then for each item in the set, create a new element with that piece of data attached to it.",
+        "The last challenge created a new <code>h2</code> for each item in the data array, but it displayed the same text (\"New Title\") for each heading. Fortunately, there is a way to access and display the actual data with callback functions.",
+        "The <code>text()</code> method can take a string or a callback function as an argument. Since the data from the <code>dataset</code> array is attached to each element, the callback function has access to it. The parameter used in the callback function (<code>d</code> in the example below) is for the individual data-point itself. This callback function would set the text in the selection to the data value:",
+        "<code>selection.text((d) => d)</code>",
+        "<h4>Instructions</h4>",
+        "Change the <code>text()</code> method so it does not place \"New Title\" in each heading. Instead, it displays the data from the array with a space and \"USD\". For example, the first heading should say \"12 USD\"."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <script>",
+        "    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];",
+        "    ",
+        "    d3.select(\"body\").selectAll(\"h2\")",
+        "      .data(dataset)",
+        "      .enter()",
+        "      .append(\"h2\")",
+        "      // Add your code below this line",
+        "      ",
+        "      .text(\"New Title\");",
+        "      ",
+        "      // Add your code above this line",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('h2').eq(0).text() == \"12 USD\", 'message: The first <code>h2</code> should have the text \"12 USD\".');",
+        "assert($('h2').eq(1).text() == \"31 USD\", 'message: The second <code>h2</code> should have the text \"31 USD\".');",
+        "assert($('h2').eq(2).text() == \"22 USD\", 'message: The third <code>h2</code> should have the text \"22 USD\".');",
+        "assert($('h2').eq(3).text() == \"17 USD\", 'message: The fourth <code>h2</code> should have the text \"17 USD\".');",
+        "assert($('h2').eq(4).text() == \"25 USD\", 'message: The fifth <code>h2</code> should have the text \"25 USD\".');",
+        "assert($('h2').eq(5).text() == \"18 USD\", 'message: The sixth <code>h2</code> should have the text \"18 USD\".');",
+        "assert($('h2').eq(6).text() == \"29 USD\", 'message: The seventh <code>h2</code> should have the text \"29 USD\".');",
+        "assert($('h2').eq(7).text() == \"14 USD\", 'message: The eighth <code>h2</code> should have the text \"14 USD\".');",
+        "assert($('h2').eq(8).text() == \"9 USD\", 'message: The ninth <code>h2</code> should have the text \"9 USD\".');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fa7367417b2b2512bc6",
+      "title": "Add Inline Styling to Elements",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "D3 lets you add inline CSS styles on dynamic elements with the <code>style()</code> method.",
+        "The <code>style()</code> method takes a comma-separated key-value pair as an argument. Here's an example to set the selection's text color to blue:",
+        "<code>selection.style(\"color\",\"blue\");</code>",
+        "<h4>Instructions</h4>",
+        "Add the <code>style()</code> method to the code in the editor to make all the displayed text have a <code>font-family</code> of <code>verdana</code>."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <script>",
+        "    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];",
+        "    ",
+        "    d3.select(\"body\").selectAll(\"h2\")",
+        "      .data(dataset)",
+        "      .enter()",
+        "      .append(\"h2\")",
+        "      .text((d) => (d + \" USD\"))",
+        "      // Add your code below this line",
+        "      ",
+        "      ",
+        "      ",
+        "      // Add your code above this line",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('h2').css('font-family') == 'verdana', 'message: Your <code>h2</code> elements should have a <code>font-family</code> of verdana.');",
+        "assert(code.match(/\\.style/g), 'message: Your code should use the <code>style()</code> method.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fa7367417b2b2512bc7",
+      "title": "Change Styles Based on Data",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "D3 is about visualization and presentation of data. It's likely you'll want to change the styling of elements based on the data. You can use a callback function in the <code>style()</code> method to change the styling for different elements.",
+        "For example, you may want to color a data point blue if has a value less than 20, and red otherwise. You can use a callback function in the <code>style()</code> method and include the conditional logic. The callback function uses the <code>d</code> parameter to represent the data point:",
+        "<blockquote>selection.style(\"color\", (d) => {<br>  /* Logic that returns the color based on a condition */<br>});</blockquote>",
+        "The <code>style()</code> method is not limited to setting the <code>color</code> - it can be used with other CSS properties as well.",
+        "<h4>Instructions</h4>",
+        "Add the <code>style()</code> method to the code in the editor to set the <code>color</code> of the <code>h1</code> elements conditionally. Write the callback function so if the data value is less than 20, it returns \"red\", otherwise it returns \"green\".",
+        "<strong>Note</strong><br>You can use if-else logic, or the ternary operator."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <script>",
+        "    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];",
+        "    ",
+        "    d3.select(\"body\").selectAll(\"h2\")",
+        "      .data(dataset)",
+        "      .enter()",
+        "      .append(\"h2\")",
+        "      .text((d) => (d + \" USD\"))",
+        "      // Add your code below this line",
+        "      ",
+        "      ",
+        "      ",
+        "      // Add your code above this line",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('h2').eq(0).css('color') == \"rgb(255, 0, 0)\", 'message: The first <code>h2</code> should have a <code>color</code> of red.');",
+        "assert($('h2').eq(1).css('color') == \"rgb(0, 128, 0)\", 'message: The second <code>h2</code> should have a <code>color</code> of green.');",
+        "assert($('h2').eq(2).css('color') == \"rgb(0, 128, 0)\", 'message: The third <code>h2</code> should have a <code>color</code> of green.');",
+        "assert($('h2').eq(3).css('color') == \"rgb(255, 0, 0)\", 'message: The fourth <code>h2</code> should have a <code>color</code> of red.');",
+        "assert($('h2').eq(4).css('color') == \"rgb(0, 128, 0)\", 'message: The fifth <code>h2</code> should have a <code>color</code> of green.');",
+        "assert($('h2').eq(5).css('color') == \"rgb(255, 0, 0)\", 'message: The sixth <code>h2</code> should have a <code>color</code> of red.');",
+        "assert($('h2').eq(6).css('color') == \"rgb(0, 128, 0)\", 'message: The seventh <code>h2</code> should have a <code>color</code> of green.');",
+        "assert($('h2').eq(7).css('color') == \"rgb(255, 0, 0)\", 'message: The eighth <code>h2</code> should have a <code>color</code> of red.');",
+        "assert($('h2').eq(8).css('color') == \"rgb(255, 0, 0)\", 'message: The ninth <code>h2</code> should have a <code>color</code> of red.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fa7367417b2b2512bc8",
+      "title": "Add Classes with D3",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "Using a lot of inline styles on HTML elements gets hard to manage, even for smaller apps. It's easier to add a class to elements and style that class one time using CSS rules. D3 has the <code>attr()</code> method to add any HTML attribute to an element, including a class name.",
+        "The <code>attr()</code> method works the same way that <code>style()</code> does. It takes comma-separated values, and can use a callback function. Here's an example to add a class of \"container\" to a selection:",
+        "<code>selection.attr(\"class\", \"container\");</code>",
+        "<h4>Instructions</h4>",
+        "Add the <code>attr()</code> method to the code in the editor and put a class of <code>bar</code> on the <code>div</code> elements."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  .bar {",
+        "    width: 25px;",
+        "    height: 100px;",
+        "    display: inline-block;",
+        "    background-color: blue;",
+        "  }",
+        "</style>",
+        "<body>",
+        "  <script>",
+        "    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];",
+        "    ",
+        "    d3.select(\"body\").selectAll(\"div\")",
+        "      .data(dataset)",
+        "      .enter()",
+        "      .append(\"div\")",
+        "      // Add your code below this line",
+        "      ",
+        "      ",
+        "      ",
+        "      // Add your code above this line",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('div').attr('class') == \"bar\", 'message: Your <code>div</code> elements should have a class of <code>bar</code>.');",
+        "assert(code.match(/\\.attr/g), 'message: Your code should use the <code>attr()</code> method.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fa8367417b2b2512bc9",
+      "title": "Update the Height of an Element Dynamically",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "The previous challenges covered how to display data from an array and how to add CSS classes. You can combine these lessons to create a simple bar chart. There are two steps to this:",
+        "1) Create a <code>div</code> for each data point in the array",
+        "2) Give each <code>div</code> a dynamic height, using a callback function in the <code>style()</code> method that sets height equal to the data value",
+        "Recall the format to set a style using a callback function:",
+        "<code>selection.style(\"cssProperty\", (d) => d)</code>",
+        "<h4>Instructions</h4>",
+        "Add the <code>style()</code> method to the code in the editor to set the <code>height</code> property for each element. Use a callback function to return the value of the data point with the string \"px\" added to it."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  .bar {",
+        "    width: 25px;",
+        "    height: 100px;",
+        "    display: inline-block;",
+        "    background-color: blue;",
+        "  }",
+        "</style>",
+        "<body>",
+        "  <script>",
+        "    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];",
+        "    ",
+        "    d3.select(\"body\").selectAll(\"div\")",
+        "      .data(dataset)",
+        "      .enter()",
+        "      .append(\"div\")",
+        "      .attr(\"class\", \"bar\")",
+        "      // Add your code below this line",
+        "      ",
+        "      ",
+        "      ",
+        "      // Add your code above this line",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('div').eq(0).css('height') == '12px', 'message: The first <code>div</code> should have a <code>height</code> of 12 pixels.');",
+        "assert($('div').eq(1).css('height') == '31px', 'message: The second <code>div</code> should have a <code>height</code> of 31 pixels.');",
+        "assert($('div').eq(2).css('height') == '22px', 'message: The third <code>div</code> should have a <code>height</code> of 22 pixels.');",
+        "assert($('div').eq(3).css('height') == '17px', 'message: The fourth <code>div</code> should have a <code>height</code> of 17 pixels.');",
+        "assert($('div').eq(4).css('height') == '25px', 'message: The fifth <code>div</code> should have a <code>height</code> of 25 pixels.');",
+        "assert($('div').eq(5).css('height') == '18px', 'message: The sixth <code>div</code> should have a <code>height</code> of 18 pixels.');",
+        "assert($('div').eq(6).css('height') == '29px', 'message: The seventh <code>div</code> should have a <code>height</code> of 29 pixels.');",
+        "assert($('div').eq(7).css('height') == '14px', 'message: The eighth <code>div</code> should have a <code>height</code> of 14 pixels.');",
+        "assert($('div').eq(8).css('height') == '9px', 'message: The ninth <code>div</code> should have a <code>height</code> of 9 pixels.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fa8367417b2b2512bca",
+      "title": "Change the Presentation of a Bar Chart",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "The last challenge created a bar chart, but there are a couple of formatting changes that could improve it:",
+        "1) Add space between each bar to visually separate them, which is done by adding a margin to the CSS for the <code>bar</code> class",
+        "2) Increase the height of the bars to better show the difference in values, which is done by multiplying the value by a number to scale the height",
+        "<h4>Instructions</h4>",
+        "First, add a <code>margin</code> of 2px to the <code>bar</code> class in the <code>style</code> tag. Next, change the callback function in the <code>style()</code> method so it returns a value 10 times the original data value (plus the \"px\").",
+        "<strong>Note</strong><br>Multiplying each data point by the <em>same</em> constant only alters the scale. It's like zooming in, and it doesn't change the meaning of the underlying data."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  .bar {",
+        "    width: 25px;",
+        "    height: 100px;",
+        "    /* Add your code below this line */",
+        "    ",
+        "    /* Add your code above this line */",
+        "    display: inline-block;",
+        "    background-color: blue;",
+        "  }",
+        "</style>",
+        "<body>",
+        "  <script>",
+        "    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];",
+        "    ",
+        "    d3.select(\"body\").selectAll(\"div\")",
+        "      .data(dataset)",
+        "      .enter()",
+        "      .append(\"div\")",
+        "      .attr(\"class\", \"bar\")",
+        "      // Add your code below this line",
+        "      .style(\"height\", (d) => (d + \"px\"))",
+        "      ",
+        "      // Add your code above this line",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('div').eq(0).css('height') == '120px' && $('div').eq(0).css('margin-right') == '2px', 'message: The first <code>div</code> should have a <code>height</code> of 120 pixels and a <code>margin</code> of 2 pixels.');",
+        "assert($('div').eq(1).css('height') == '310px' && $('div').eq(1).css('margin-right') == '2px', 'message: The second <code>div</code> should have a <code>height</code> of 310 pixels and a <code>margin</code> of 2 pixels.');",
+        "assert($('div').eq(2).css('height') == '220px' && $('div').eq(2).css('margin-right') == '2px', 'message: The third <code>div</code> should have a <code>height</code> of 220 pixels and a <code>margin</code> of 2 pixels.');",
+        "assert($('div').eq(3).css('height') == '170px' && $('div').eq(3).css('margin-right') == '2px', 'message: The fourth <code>div</code> should have a <code>height</code> of 170 pixels and a <code>margin</code> of 2 pixels.');",
+        "assert($('div').eq(4).css('height') == '250px' && $('div').eq(4).css('margin-right') == '2px', 'message: The fifth <code>div</code> should have a <code>height</code> of 250 pixels and a <code>margin</code> of 2 pixels.');",
+        "assert($('div').eq(5).css('height') == '180px' && $('div').eq(5).css('margin-right') == '2px', 'message: The sixth <code>div</code> should have a <code>height</code> of 180 pixels and a <code>margin</code> of 2 pixels.');",
+        "assert($('div').eq(6).css('height') == '290px' && $('div').eq(6).css('margin-right') == '2px', 'message: The seventh <code>div</code> should have a <code>height</code> of 290 pixels and a <code>margin</code> of 2 pixels.');",
+        "assert($('div').eq(7).css('height') == '140px' && $('div').eq(7).css('margin-right') == '2px', 'message: The eighth <code>div</code> should have a <code>height</code> of 140 pixels and a <code>margin</code> of 2 pixels.');",
+        "assert($('div').eq(8).css('height') == '90px' && $('div').eq(8).css('margin-right') == '2px', 'message: The ninth <code>div</code> should have a <code>height</code> of 90 pixels and a <code>margin</code> of 2 pixels.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fa8367417b2b2512bcb",
+      "title": "Learn About SVG in D3",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "SVG stands for <code>Scalable Vector Graphics</code>.",
+        "Here \"scalable\" means that, if you zoom in or out on an object, it would not appear pixelated. It scales with the display system, whether it's on a small mobile screen or a large TV monitor.",
+        "SVG is used to make common geometric shapes. Since D3 maps data into a visual representation, it uses SVG to create the shapes for the visualization. SVG shapes for a web page must go within an HTML <code>svg</code> tag.",
+        "CSS can be scalable when styles use relative units (such as <code>vh</code>, <code>vw</code>, or percentages), but using SVG is more flexible to build data visualizations.",
+        "<h4>Instructions</h4>",
+        "Add an <code>svg</code> node to the <code>body</code> using <code>append()</code>. Give it a <code>width</code> attribute of 500 and a <code>height</code> attribute of 100 using the <code>attr()</code> method for each. You'll see it in the output because there's a <code>background-color</code> of pink applied to it in the <code>style</code> tag.",
+        "<strong>Note</strong><br>Width and height attributes do not have units. This is the building block of scaling - the element will always have a 5:1 width to height ratio, no matter what the zoom level is."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  svg {",
+        "    background-color: pink;",
+        "  }",
+        "</style>",
+        "<body>",
+        "  <script>",
+        "    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];",
+        "    ",
+        "    const w = 500;",
+        "    const h = 100;",
+        "    ",
+        "    const svg = d3.select(\"body\")",
+        "                  // Add your code below this line",
+        "                  ",
+        "                  ",
+        "                  ",
+        "                  // Add your code above this line",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('svg').length == 1, 'message: Your document should have 1 <code>svg</code> element.');",
+        "assert($('svg').attr('width') == '500', 'message: The <code>svg</code> element should have a <code>width</code> attribute set to 500.');",
+        "assert($('svg').attr('height') == '100', 'message: The <code>svg</code> element should have a <code>height</code> attribute set to 100.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fa8367417b2b2512bcc",
+      "title": "Display Shapes with SVG",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "The last challenge created an <code>svg</code> element with a given width and height, which was visible because it had a <code>background-color</code> applied to it in the <code>style</code> tag. The code made space for the given width and height.",
+        "The next step is to create a shape to put in the <code>svg</code> area. There are a number of supported shapes in SVG, such as rectangles and circles. They are used to display data. For example, a rectangle (<code>&lt;rect&gt;</code>) SVG shape could create a bar in a bar chart.",
+        "When you place a shape into the <code>svg</code> area, you can specify where it goes with <code>x</code> and <code>y</code> coordinates. The origin point of (0, 0) is in the upper-left corner. Positive vales for <code>x</code> push the shape to the right, and positive values for <code>y</code> push the shape down from the origin point.",
+        "To place a shape in the middle of the 500 (width) x 100 (height) <code>svg</code> from last challenge, the <code>x</code> coordinate would be 250 and the <code>y</code> coordinate would be 50.",
+        "An SVG <code>rect</code> has four attributes. There are the <code>x</code> and <code>y</code> coordinates for where it is placed in the <code>svg</code> area. It also has a <code>height</code> and <code>width</code> to specify the size.",
+        "<h4>Instructions</h4>",
+        "Add a <code>rect</code> shape to the <code>svg</code> using <code>append()</code>, and give it a <code>width</code> attribute of 25 and <code>height</code> attribute of 100. Also, give the <code>rect</code> <code>x</code> and <code>y</code> attributes each set to 0."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <script>",
+        "    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];",
+        "    ",
+        "    const w = 500;",
+        "    const h = 100;",
+        "    ",
+        "    const svg = d3.select(\"body\")",
+        "                  .append(\"svg\")",
+        "                  .attr(\"width\", w)",
+        "                  .attr(\"height\", h)",
+        "                  // Add your code below this line",
+        "                  ",
+        "                  ",
+        "                  ",
+        "                  // Add your code above this line",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('rect').length == 1, 'message: Your document should have 1 <code>rect</code> element.');",
+        "assert($('rect').attr('width') == '25', 'message: The <code>rect</code> element should have a <code>width</code> attribute set to 25.');",
+        "assert($('rect').attr('height') == '100', 'message: The <code>rect</code> element should have a <code>height</code> attribute set to 100.');",
+        "assert($('rect').attr('x') == '0', 'message: The <code>rect</code> element should have an <code>x</code> attribute set to 0.');",
+        "assert($('rect').attr('y') == '0', 'message: The <code>rect</code> element should have a <code>y</code> attribute set to 0.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fa8367417b2b2512bcd",
+      "title": "Create a Bar for Each Data Point in the Set",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "The last challenge added only one rectangle to the <code>svg</code> element to represent a bar. Here, you'll combine what you've learned so far about <code>data()</code>, <code>enter()</code>, and SVG shapes to create and append a rectangle for each data point in <code>dataset</code>.",
+        "A previous challenge showed the format for how to create and append a <code>div</code> for each item in <code>dataset</code>:",
+        "<blockquote>d3.select(\"body\").selectAll(\"div\")<br>  .data(dataset)<br>  .enter()<br>  .append(\"div\")</blockquote>",
+        "There are a few differences working with <code>rect</code> elements instead of <code>divs</code>. The <code>rects</code> must be appended to an <code>svg</code> element, not directly to the <code>body</code>. Also, you need to tell D3 where to place each <code>rect</code> within the <code>svg</code> area. The bar placement will be covered in the next challenge.",
+        "<h4>Instructions</h4>",
+        "Use the <code>data()</code>, <code>enter()</code>, and <code>append()</code> methods to create and append a <code>rect</code> for each item in <code>dataset</code>. The bars should display all on top of each other, this will be fixed in the next challenge."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <script>",
+        "    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];",
+        "    ",
+        "    const w = 500;",
+        "    const h = 100;",
+        "    ",
+        "    const svg = d3.select(\"body\")",
+        "                  .append(\"svg\")",
+        "                  .attr(\"width\", w)",
+        "                  .attr(\"height\", h);",
+        "    ",
+        "    svg.selectAll(\"rect\")",
+        "       // Add your code below this line",
+        "       ",
+        "       ",
+        "       ",
+        "       // Add your code above this line",
+        "       .attr(\"x\", 0)",
+        "       .attr(\"y\", 0)",
+        "       .attr(\"width\", 25)",
+        "       .attr(\"height\", 100);",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('rect').length == 9, 'message: Your document should have 9 <code>rect</code> elements.');",
+        "assert(code.match(/\\.data/g), 'message: Your code should use the <code>data()</code> method.');",
+        "assert(code.match(/\\.enter/g), 'message: Your code should use the <code>enter()</code> method.');",
+        "assert(code.match(/\\.append/g), 'message: Your code should use the <code>append()</code> method.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fa9367417b2b2512bce",
+      "title": "Dynamically Set the Coordinates for Each Bar",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "The last challenge created and appended a rectangle to the <code>svg</code> element for each point in <code>dataset</code> to represent a bar. Unfortunately, they were all stacked on top of each other.",
+        "The placement of a rectangle is handled by the <code>x</code> and <code>y</code> attributes. They tell D3 where to start drawing the shape in the <code>svg</code> area. The last challenge set them each to 0, so every bar was placed in the upper-left corner.",
+        "For a bar chart, all of the bars should sit on the same vertical level, which means the <code>y</code> value stays the same (at 0) for all bars. The <code>x</code> value, however, needs to change as you add new bars. Remember that larger <code>x</code> values push items farther to the right. As you go through the array elements in <code>dataset</code>, the x value should increase.",
+        "The <code>attr()</code> method in D3 accepts a callback function to dynamically set that attribute. The callback function takes two arguments, one for the data point itself (usually <code>d</code>) and one for the index of the data point in the array. The second argument for the index is optional. Here's the format:",
+        "<blockquote>selection.attr(\"property\", (d, i) => {<br>  /* <br>  * d is the data point value<br>  * i is the index of the data point in the array<br>  */<br>})</blockquote>",
+        "It's important to note that you do NOT need to write a <code>for</code> loop or use <code>forEach()</code> to iterate over the items in the data set. Recall that the <code>data()</code> method parses the data set, and any method that's chained after <code>data()</code> is run once for each item in the data set.",
+        "<h4>Instructions</h4>",
+        "Change the <code>x</code> attribute callback function so it returns the index times 30.",
+        "<strong>Note</strong><br>Each bar has a width of 25, so increasing each <code>x</code> value by 30 adds some space between the bars. Any value greater than 25 would work in this example."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <script>",
+        "    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];",
+        "    ",
+        "    const w = 500;",
+        "    const h = 100;",
+        "    ",
+        "    const svg = d3.select(\"body\")",
+        "                  .append(\"svg\")",
+        "                  .attr(\"width\", w)",
+        "                  .attr(\"height\", h);",
+        "    ",
+        "    svg.selectAll(\"rect\")",
+        "       .data(dataset)",
+        "       .enter()",
+        "       .append(\"rect\")",
+        "       .attr(\"x\", (d, i) => {",
+        "         // Add your code below this line",
+        "         ",
+        "         ",
+        "         ",
+        "         // Add your code above this line",
+        "       })",
+        "       .attr(\"y\", 0)",
+        "       .attr(\"width\", 25)",
+        "       .attr(\"height\", 100);",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('rect').eq(0).attr('x') == '0', 'message: The first <code>rect</code> should have an <code>x</code> value of 0.');",
+        "assert($('rect').eq(1).attr('x') == '30', 'message: The second <code>rect</code> should have an <code>x</code> value of 30.');",
+        "assert($('rect').eq(2).attr('x') == '60', 'message: The third <code>rect</code> should have an <code>x</code> value of 60.');",
+        "assert($('rect').eq(3).attr('x') == '90', 'message: The fourth <code>rect</code> should have an <code>x</code> value of 90.');",
+        "assert($('rect').eq(4).attr('x') == '120', 'message: The fifth <code>rect</code> should have an <code>x</code> value of 120.');",
+        "assert($('rect').eq(5).attr('x') == '150', 'message: The sixth <code>rect</code> should have an <code>x</code> value of 150.');",
+        "assert($('rect').eq(6).attr('x') == '180', 'message: The seventh <code>rect</code> should have an <code>x</code> value of 180.');",
+        "assert($('rect').eq(7).attr('x') == '210', 'message: The eighth <code>rect</code> should have an <code>x</code> value of 210.');",
+        "assert($('rect').eq(8).attr('x') == '240', 'message: The ninth <code>rect</code> should have an <code>x</code> value of 240.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fa9367417b2b2512bcf",
+      "title": "Dynamically Change the Height of Each Bar",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "The height of each bar can be set to the value of the data point in the array, similar to how the <code>x</code> value was set dynamically.",
+        "<blockquote>selection.attr(\"property\", (d, i) => {<br>  /* <br>  * d is the data point value<br>  * i is the index of the data point in the array<br>  */<br>})</blockquote>",
+        "<h4>Instructions</h4>",
+        "Change the callback function for the <code>height</code> attribute to return the data value times 3.",
+        "<strong>Note</strong><br>Remember that multiplying all data points by the same constant scales the data (like zooming in). It helps to see the differences between bar values in this example."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <script>",
+        "    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];",
+        "    ",
+        "    const w = 500;",
+        "    const h = 100;",
+        "    ",
+        "    const svg = d3.select(\"body\")",
+        "                  .append(\"svg\")",
+        "                  .attr(\"width\", w)",
+        "                  .attr(\"height\", h);",
+        "    ",
+        "    svg.selectAll(\"rect\")",
+        "       .data(dataset)",
+        "       .enter()",
+        "       .append(\"rect\")",
+        "       .attr(\"x\", (d, i) => i * 30)",
+        "       .attr(\"y\", 0)",
+        "       .attr(\"width\", 25)",
+        "       .attr(\"height\", (d, i) => {",
+        "         // Add your code below this line",
+        "         ",
+        "         ",
+        "         ",
+        "         // Add your code above this line",
+        "       });",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('rect').eq(0).attr('height') == '36', 'message: The first <code>rect</code> should have a <code>height</code> of 36.');",
+        "assert($('rect').eq(1).attr('height') == '93', 'message: The second <code>rect</code> should have a <code>height</code> of 93.');",
+        "assert($('rect').eq(2).attr('height') == '66', 'message: The third <code>rect</code> should have a <code>height</code> of 66.');",
+        "assert($('rect').eq(3).attr('height') == '51', 'message: The fourth <code>rect</code> should have a <code>height</code> of 51.');",
+        "assert($('rect').eq(4).attr('height') == '75', 'message: The fifth <code>rect</code> should have a <code>height</code> of 75.');",
+        "assert($('rect').eq(5).attr('height') == '54', 'message: The sixth <code>rect</code> should have a <code>height</code> of 54.');",
+        "assert($('rect').eq(6).attr('height') == '87', 'message: The seventh <code>rect</code> should have a <code>height</code> of 87.');",
+        "assert($('rect').eq(7).attr('height') == '42', 'message: The eighth <code>rect</code> should have a <code>height</code> of 42.');",
+        "assert($('rect').eq(8).attr('height') == '27', 'message: The ninth <code>rect</code> should have a <code>height</code> of 27.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fa9367417b2b2512bd0",
+      "title": "Invert SVG Elements",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "You may have noticed the bar chart looked like it's upside-down, or inverted. This is because of how SVG uses (x, y) coordinates.",
+        "In SVG, the origin point for the coordinates is in the upper-left corner. An <code>x</code> coordinate of 0 places a shape on the right edge of the SVG area. A <code>y</code> coordinate of 0 places a shape on the top edge of the SVG area. Higher <code>x</code> values push the rectangle to the right. Higher <code>y</code> values push the rectangle down.",
+        "To make the bars right-side-up, you need to change the way the <code>y</code> coordinate is calculated. It needs to account for both the height of the bar and the total height of the SVG area.",
+        "The height of the SVG area is 100. If you have a data point of 0 in the set, you would want the bar to start at the bottom of the SVG area (not the top). To do this, the <code>y</code> coordinate needs a value of 100. If the data point value were 1, you would start with a <code>y</code> coordinate of 100 to set the bar at the bottom. Then you need to account for the height of the bar of 1, so the final <code>y</code> coordinate would be 99.",
+        "The <code>y</code> coordinate that is <code>y = heightOfSVG - heightOfBar</code> would place the bars right-side-up.",
+        "<h4>Instructions</h4>",
+        "Change the callback function for the <code>y</code> attribute to set the bars right-side-up. Remember that the <code>height</code> of the bar is 3 times the data value <code>d</code>.",
+        "<strong>Note</strong><br>In general, the relationship is <code>y = h - m * d</code>, where <code>m</code> is the constant that scales the data points."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <script>",
+        "    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];",
+        "    ",
+        "    const w = 500;",
+        "    const h = 100;",
+        "    ",
+        "    const svg = d3.select(\"body\")",
+        "                  .append(\"svg\")",
+        "                  .attr(\"width\", w)",
+        "                  .attr(\"height\", h);",
+        "    ",
+        "    svg.selectAll(\"rect\")",
+        "       .data(dataset)",
+        "       .enter()",
+        "       .append(\"rect\")",
+        "       .attr(\"x\", (d, i) => i * 30)",
+        "       .attr(\"y\", (d, i) => {",
+        "         // Add your code below this line",
+        "         ",
+        "         ",
+        "         ",
+        "         // Add your code above this line",
+        "       })",
+        "       .attr(\"width\", 25)",
+        "       .attr(\"height\", (d, i) => 3 * d);",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('rect').eq(0).attr('y') == h - (dataset[0] * 3), 'message: The first <code>rect</code> should have a <code>y</code> value of 64.');",
+        "assert($('rect').eq(1).attr('y') == h - (dataset[1] * 3), 'message: The second <code>rect</code> should have a <code>y</code> value of 7.');",
+        "assert($('rect').eq(2).attr('y') == h - (dataset[2] * 3), 'message: The third <code>rect</code> should have a <code>y</code> value of 34.');",
+        "assert($('rect').eq(3).attr('y') == h - (dataset[3] * 3), 'message: The fourth <code>rect</code> should have a <code>y</code> value of 49.');",
+        "assert($('rect').eq(4).attr('y') == h - (dataset[4] * 3), 'message: The fifth <code>rect</code> should have a <code>y</code> value of 25.');",
+        "assert($('rect').eq(5).attr('y') == h - (dataset[5] * 3), 'message: The sixth <code>rect</code> should have a <code>y</code> value of 46.');",
+        "assert($('rect').eq(6).attr('y') == h - (dataset[6] * 3), 'message: The seventh <code>rect</code> should have a <code>y</code> value of 13.');",
+        "assert($('rect').eq(7).attr('y') == h - (dataset[7] * 3), 'message: The eighth <code>rect</code> should have a <code>y</code> value of 58.');",
+        "assert($('rect').eq(8).attr('y') == h - (dataset[8] * 3), 'message: The ninth <code>rect</code> should have a <code>y</code> value of 73.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fa9367417b2b2512bd1",
+      "title": "Change the Color of an SVG Element",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "The bars are in the right position, but they are all the same black color. SVG has a way to change the color of the bars.",
+        "In SVG, a <code>rect</code> shape is colored with the <code>fill</code> attribute. It supports hex codes, color names, and rgb values, as well as more complex options like gradients and transparency.",
+        "<h4>Instructions</h4>",
+        "Add an <code>attr()</code> method to set the \"fill\" of all the bars to the color \"navy\"."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <script>",
+        "    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];",
+        "    ",
+        "    const w = 500;",
+        "    const h = 100;",
+        "    ",
+        "    const svg = d3.select(\"body\")",
+        "                  .append(\"svg\")",
+        "                  .attr(\"width\", w)",
+        "                  .attr(\"height\", h);",
+        "    ",
+        "    svg.selectAll(\"rect\")",
+        "       .data(dataset)",
+        "       .enter()",
+        "       .append(\"rect\")",
+        "       .attr(\"x\", (d, i) => i * 30)",
+        "       .attr(\"y\", (d, i) => h - 3 * d)",
+        "       .attr(\"width\", 25)",
+        "       .attr(\"height\", (d, i) => 3 * d)",
+        "       // Add your code below this line",
+        "       ",
+        "       ",
+        "       ",
+        "       // Add your code above this line",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('rect').css('fill') == \"rgb(0, 0, 128)\", 'message: The bars should all have a <code>fill</code> color of navy.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7faa367417b2b2512bd2",
+      "title": "Add Labels to D3 Elements",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "D3 lets you label a graph element, such as a bar, using the SVG <code>text</code> element.",
+        "Like the <code>rect</code> element, a <code>text</code> element needs to have <code>x</code> and <code>y</code> attributes, to place it on the SVG canvas. It also needs to access the data to display those values.",
+        "D3 gives you a high level of control over how you label your bars.",
+        "<h4>Instructions</h4>",
+        "The code in the editor already binds the data to each new <code>text</code> element. First, append <code>text</code> nodes to the <code>svg</code>. Next, add attributes for the <code>x</code> and <code>y</code> coordinates. They should be calculated the same way as the <code>rect</code> ones, except the <code>y</code> value for the <code>text</code> should make the label sit 3 units higher than the bar. Finally, use the D3 <code>text()</code> method to set the label equal to the data point value.",
+        "<strong>Note</strong><br>For the label to sit higher than the bar, decide if the <code>y</code> value for the <code>text</code> should be 3 greater or 3 less than the <code>y</code> value for the bar."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <script>",
+        "    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];",
+        "    ",
+        "    const w = 500;",
+        "    const h = 100;",
+        "    ",
+        "    const svg = d3.select(\"body\")",
+        "                  .append(\"svg\")",
+        "                  .attr(\"width\", w)",
+        "                  .attr(\"height\", h);",
+        "    ",
+        "    svg.selectAll(\"rect\")",
+        "       .data(dataset)",
+        "       .enter()",
+        "       .append(\"rect\")",
+        "       .attr(\"x\", (d, i) => i * 30)",
+        "       .attr(\"y\", (d, i) => h - 3 * d)",
+        "       .attr(\"width\", 25)",
+        "       .attr(\"height\", (d, i) => 3 * d)",
+        "       .attr(\"fill\", \"navy\");",
+        "    ",
+        "    svg.selectAll(\"text\")",
+        "       .data(dataset)",
+        "       .enter()",
+        "       // Add your code below this line",
+        "       ",
+        "       ",
+        "       ",
+        "       ",
+        "       // Add your code above this line",
+        "  </script>",
+        "<body>"
+      ],
+      "tests": [
+        "assert($('text').eq(0).text() == '12' && $('text').eq(0).attr('y') == '61', 'message: The first <code>text</code> element should have a label of 12 and a <code>y</code> value of 61.');",
+        "assert($('text').eq(1).text() == '31' && $('text').eq(1).attr('y') == '4', 'message: The second <code>text</code> element should have a label of 31 and a <code>y</code> value of 4.');",
+        "assert($('text').eq(2).text() == '22' && $('text').eq(2).attr('y') == '31', 'message: The third <code>text</code> element should have a label of 22 and a <code>y</code> value of 31.');",
+        "assert($('text').eq(3).text() == '17' && $('text').eq(3).attr('y') == '46', 'message: The fourth <code>text</code> element should have a label of 17 and a <code>y</code> value of 46.');",
+        "assert($('text').eq(4).text() == '25' && $('text').eq(4).attr('y') == '22', 'message: The fifth <code>text</code> element should have a label of 25 and a <code>y</code> value of 22.');",
+        "assert($('text').eq(5).text() == '18' && $('text').eq(5).attr('y') == '43', 'message: The sixth <code>text</code> element should have a label of 18 and a <code>y</code> value of 43.');",
+        "assert($('text').eq(6).text() == '29' && $('text').eq(6).attr('y') == '10', 'message: The seventh <code>text</code> element should have a label of 29 and a <code>y</code> value of 10.');",
+        "assert($('text').eq(7).text() == '14' && $('text').eq(7).attr('y') == '55', 'message: The eighth <code>text</code> element should have a label of 14 and a <code>y</code> value of 55.');",
+        "assert($('text').eq(8).text() == '9' && $('text').eq(8).attr('y') == '70', 'message: The ninth <code>text</code> element should have a label of 9 and a <code>y</code> value of 70.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7faa367417b2b2512bd3",
+      "title": "Style D3 Labels",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "D3 methods can add styles to the bar labels. The <code>fill</code> attribute sets the color of the text for a <code>text</code> node. The <code>style()</code> method sets CSS rules for other styles, such as \"font-family\" or \"font-size\".",
+        "<h4>Instructions</h4>",
+        "Set the <code>font-size</code> of the <code>text</code> elements to 25px, and the color of the text to red."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <script>",
+        "    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];",
+        "    ",
+        "    const w = 500;",
+        "    const h = 100;",
+        "    ",
+        "    const svg = d3.select(\"body\")",
+        "                  .append(\"svg\")",
+        "                  .attr(\"width\", w)",
+        "                  .attr(\"height\", h);",
+        "    ",
+        "    svg.selectAll(\"rect\")",
+        "       .data(dataset)",
+        "       .enter()",
+        "       .append(\"rect\")",
+        "       .attr(\"x\", (d, i) => i * 30)",
+        "       .attr(\"y\", (d, i) => h - 3 * d)",
+        "       .attr(\"width\", 25)",
+        "       .attr(\"height\", (d, i) => d * 3)",
+        "       .attr(\"fill\", \"navy\");",
+        "    ",
+        "    svg.selectAll(\"text\")",
+        "       .data(dataset)",
+        "       .enter()",
+        "       .append(\"text\")",
+        "       .text((d) => d)",
+        "       .attr(\"x\", (d, i) => i * 30)",
+        "       .attr(\"y\", (d, i) => h - (3 * d) - 3)",
+        "       // Add your code below this line",
+        "       ",
+        "       ",
+        "       ",
+        "       // Add your code above this line",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('text').css('fill') == 'rgb(255, 0, 0)', 'message: The labels should all have a <code>fill</code> color of red.');",
+        "assert($('text').css('font-size') == '25px', 'message: The labels should all have a <code>font-size</code> of 25 pixels.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7faa367417b2b2512bd4",
+      "title": "Add a Hover Effect to a D3 Element",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "It's possible to add effects that highlight a bar when the user hovers over it with the mouse. So far, the styling for the rectangles is applied with the built-in D3 and SVG methods, but you can use CSS as well.",
+        "You set the CSS class on the SVG elements with the <code>attr()</code> method. Then the <code>:hover</code> pseudo-class for your new class holds the style rules for any hover effects.",
+        "<h4>Instructions</h4>",
+        "Use the <code>attr()</code> method to add a class of <code>bar</code> to all the <code>rect</code> elements. This changes the <code>fill</code> color of the bar to brown when you mouse over it."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  .bar:hover {",
+        "    fill: brown;",
+        "  }",
+        "</style>",
+        "<body>",
+        "  <script>",
+        "    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];",
+        "    ",
+        "    const w = 500;",
+        "    const h = 100;",
+        "    ",
+        "    const svg = d3.select(\"body\")",
+        "                  .append(\"svg\")",
+        "                  .attr(\"width\", w)",
+        "                  .attr(\"height\", h);",
+        "    ",
+        "    svg.selectAll(\"rect\")",
+        "       .data(dataset)",
+        "       .enter()",
+        "       .append(\"rect\")",
+        "       .attr(\"x\", (d, i) => i * 30)",
+        "       .attr(\"y\", (d, i) => h - 3 * d)",
+        "       .attr(\"width\", 25)",
+        "       .attr(\"height\", (d, i) => 3 * d)",
+        "       .attr(\"fill\", \"navy\")",
+        "       // Add your code below this line",
+        "       ",
+        "       ",
+        "       ",
+        "       // Add your code above this line",
+        "    ",
+        "    svg.selectAll(\"text\")",
+        "       .data(dataset)",
+        "       .enter()",
+        "       .append(\"text\")",
+        "       .text((d) => d)",
+        "       .attr(\"x\", (d, i) => i * 30)",
+        "       .attr(\"y\", (d, i) => h - (3 * d) - 3);",
+        "       ",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('rect').attr('class') == \"bar\", 'message: Your <code>rect</code> elements should have a class of <code>bar</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7faa367417b2b2512bd6",
+      "title": "Add a Tooltip to a D3 Element",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "A tooltip shows more information about an item on a page when the user hovers over that item. There are several ways to add a tooltip to a visualization, this challenge uses the SVG <code>title</code> element.",
+        "<code>title</code> pairs with the <code>text()</code> method to dynamically add data to the bars.",
+        "<h4>Instructions</h4>",
+        "Append a <code>title</code> element under each <code>rect</code> node. Then call the <code>text()</code> method with a callback function so the text displays the data value."
+      ],
+      "challengeSeed": [
+        "<style>",
+        "  .bar:hover {",
+        "    fill: brown;",
+        "  }",
+        "</style>",
+        "<body>",
+        "  <script>",
+        "    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];",
+        "    ",
+        "    const w = 500;",
+        "    const h = 100;",
+        "    ",
+        "    const svg = d3.select(\"body\")",
+        "                  .append(\"svg\")",
+        "                  .attr(\"width\", w)",
+        "                  .attr(\"height\", h);",
+        "    ",
+        "    svg.selectAll(\"rect\")",
+        "       .data(dataset)",
+        "       .enter()",
+        "       .append(\"rect\")",
+        "       .attr(\"x\", (d, i) => i * 30)",
+        "       .attr(\"y\", (d, i) => h - 3 * d)",
+        "       .attr(\"width\", 25)",
+        "       .attr(\"height\", (d, i) => d * 3)",
+        "       .attr(\"fill\", \"navy\")",
+        "       .attr(\"class\", \"bar\")",
+        "       // Add your code below this line",
+        "       ",
+        "       ",
+        "       ",
+        "       // Add your code above this line",
+        "    ",
+        "    svg.selectAll(\"text\")",
+        "       .data(dataset)",
+        "       .enter()",
+        "       .append(\"text\")",
+        "       .text((d) => d)",
+        "       .attr(\"x\", (d, i) => i * 30)",
+        "       .attr(\"y\", (d, i) => h - (d * 3 + 3))   ",
+        "    ",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('title').length == 9, 'message: Your code should have 9 <code>title</code> elements.');",
+        "assert($('title').eq(0).text() == '12', 'message: The first <code>title</code> element should have tooltip text of 12.');",
+        "assert($('title').eq(1).text() == '31', 'message: The second <code>title</code> element should have tooltip text of 31.');",
+        "assert($('title').eq(2).text() == '22', 'message: The third <code>title</code> element should have tooltip text of 22.');",
+        "assert($('title').eq(3).text() == '17', 'message: The fourth <code>title</code> element should have tooltip text of 17.');",
+        "assert($('title').eq(4).text() == '25', 'message: The fifth <code>title</code> element should have tooltip text of 25.');",
+        "assert($('title').eq(5).text() == '18', 'message: The sixth <code>title</code> element should have tooltip text of 18.');",
+        "assert($('title').eq(6).text() == '29', 'message: The seventh <code>title</code> element should have tooltip text of 29.');",
+        "assert($('title').eq(7).text() == '14', 'message: The eighth <code>title</code> element should have tooltip text of 14.');",
+        "assert($('title').eq(8).text() == '9', 'message: The ninth <code>title</code> element should have tooltip text of 9.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fab367417b2b2512bd7",
+      "title": "Create a Scatterplot with SVG Circles",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "A scatter plot is another type of visualization. It usually uses circles to map data points, which have two values each. These values tie to the <code>x</code> and <code>y</code> axes, and are used to position the circle in the visualization.",
+        "SVG has a <code>circle</code> tag to create the circle shape. It works a lot like the <code>rect</code> elements you used for the bar chart.",
+        "<h4>Instructions</h4>",
+        "Use the <code>data()</code>, <code>enter()</code>, and <code>append()</code> methods to bind <code>dataset</code> to new <code>circle</code> elements that are appended to the SVG canvas."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <script>",
+        "    const dataset = [",
+        "                  [ 34,    78 ],",
+        "                  [ 109,   280 ],",
+        "                  [ 310,   120 ],",
+        "                  [ 79,    411 ],",
+        "                  [ 420,   220 ],",
+        "                  [ 233,   145 ],",
+        "                  [ 333,   96 ],",
+        "                  [ 222,   333 ],",
+        "                  [ 78,    320 ],",
+        "                  [ 21,    123 ]",
+        "                ];",
+        "    ",
+        "    ",
+        "    const w = 500;",
+        "    const h = 500;",
+        "    ",
+        "    const svg = d3.select(\"body\")",
+        "                  .append(\"svg\")",
+        "                  .attr(\"width\", w)",
+        "                  .attr(\"height\", h);",
+        "    ",
+        "    svg.selectAll(\"circle\")",
+        "       // Add your code below this line",
+        "       ",
+        "       ",
+        "       ",
+        "       // Add your code above this line",
+        "  ",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('circle').length == 10, 'message: Your code should have 10 <code>circle</code> elements.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fab367417b2b2512bd8",
+      "title": "Add Attributes to the Circle Elements",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "The last challenge created the <code>circle</code> elements for each point in the <code>dataset</code>, and appended them to the SVG canvas. But D3 needs more information about the position and size of each <code>circle</code> to display them correctly.",
+        "A <code>circle</code> in SVG has three main attributes. The <code>cx</code> and <code>cy</code> attributes are the coordinates. They tell D3 where to position the <em>center</em> of the shape on the SVG canvas. The radius (<code>r</code> attribute) gives the size of the <code>circle</code>.",
+        "Just like the <code>rect</code> <code>y</code> coordinate, the <code>cy</code> attribute for a <code>circle</code> is measured from the top of the SVG canvas, not from the bottom.",
+        "All three attributes can use a callback function to set their values dynamically. Remember that all methods chained after <code>data(dataset)</code> run once per item in <code>dataset</code>. The <code>d</code> parameter in the callback function refers to the current item in <code>dataset</code>, which is an array for each point. You use bracket notation, like <code>d[0]</code>, to access the values in that array.",
+        "<h4>Instructions</h4>",
+        "Add <code>cx</code>, <code>cy</code>, and <code>r</code> attributes to the <code>circle</code> elements. The <code>cx</code> value should be the first number in the array for each item in <code>dataset</code>. The <code>cy</code> value should be based off the second number in the array, but make sure to show the chart right-side-up and not inverted. The <code>r</code> value should be 5 for all circles."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <script>",
+        "    const dataset = [",
+        "                  [ 34,    78 ],",
+        "                  [ 109,   280 ],",
+        "                  [ 310,   120 ],",
+        "                  [ 79,    411 ],",
+        "                  [ 420,   220 ],",
+        "                  [ 233,   145 ],",
+        "                  [ 333,   96 ],",
+        "                  [ 222,   333 ],",
+        "                  [ 78,    320 ],",
+        "                  [ 21,    123 ]",
+        "                ];",
+        "    ",
+        "    ",
+        "    const w = 500;",
+        "    const h = 500;",
+        "    ",
+        "    const svg = d3.select(\"body\")",
+        "                  .append(\"svg\")",
+        "                  .attr(\"width\", w)",
+        "                  .attr(\"height\", h);",
+        "    ",
+        "    svg.selectAll(\"circle\")",
+        "       .data(dataset)",
+        "       .enter()",
+        "       .append(\"circle\")",
+        "       // Add your code below this line",
+        "       ",
+        "       ",
+        "       ",
+        "       // Add your code above this line",
+        "  ",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('circle').length == 10, 'message: Your code should have 10 <code>circle</code> elements.');",
+        "assert($('circle').eq(0).attr('cx') == '34' && $('circle').eq(0).attr('cy') == '422' && $('circle').eq(0).attr('r') == '5', 'message: The first <code>circle</code> element should have a <code>cx</code> value of 34, a <code>cy</code> value of 422, and an <code>r</code> value of 5.');",
+        "assert($('circle').eq(1).attr('cx') == '109' && $('circle').eq(1).attr('cy') == '220' && $('circle').eq(1).attr('r') == '5', 'message: The second <code>circle</code> element should have a <code>cx</code> value of 109, a <code>cy</code> value of 220, and an <code>r</code> value of 5.');",
+        "assert($('circle').eq(2).attr('cx') == '310' && $('circle').eq(2).attr('cy') == '380' && $('circle').eq(2).attr('r') == '5', 'message: The third <code>circle</code> element should have a <code>cx</code> value of 310, a <code>cy</code> value of 380, and an <code>r</code> value of 5.');",
+        "assert($('circle').eq(3).attr('cx') == '79' && $('circle').eq(3).attr('cy') == '89' && $('circle').eq(3).attr('r') == '5', 'message: The fourth <code>circle</code> element should have a <code>cx</code> value of 79, a <code>cy</code> value of 89, and an <code>r</code> value of 5.');",
+        "assert($('circle').eq(4).attr('cx') == '420' && $('circle').eq(4).attr('cy') == '280' && $('circle').eq(4).attr('r') == '5', 'message: The fifth <code>circle</code> element should have a <code>cx</code> value of 420, a <code>cy</code> value of 280, and an <code>r</code> value of 5.');",
+        "assert($('circle').eq(5).attr('cx') == '233' && $('circle').eq(5).attr('cy') == '355' && $('circle').eq(5).attr('r') == '5', 'message: The sixth <code>circle</code> element should have a <code>cx</code> value of 233, a <code>cy</code> value of 355, and an <code>r</code> value of 5.');",
+        "assert($('circle').eq(6).attr('cx') == '333' && $('circle').eq(6).attr('cy') == '404' && $('circle').eq(6).attr('r') == '5', 'message: The seventh <code>circle</code> element should have a <code>cx</code> value of 333, a <code>cy</code> value of 404, and an <code>r</code> value of 5.');",
+        "assert($('circle').eq(7).attr('cx') == '222' && $('circle').eq(7).attr('cy') == '167' && $('circle').eq(7).attr('r') == '5', 'message: The eighth <code>circle</code> element should have a <code>cx</code> value of 222, a <code>cy</code> value of 167, and an <code>r</code> value of 5.');",
+        "assert($('circle').eq(8).attr('cx') == '78' && $('circle').eq(8).attr('cy') == '180' && $('circle').eq(8).attr('r') == '5', 'message: The ninth <code>circle</code> element should have a <code>cx</code> value of 78, a <code>cy</code> value of 180, and an <code>r</code> value of 5.');",
+        "assert($('circle').eq(9).attr('cx') == '21' && $('circle').eq(9).attr('cy') == '377' && $('circle').eq(9).attr('r') == '5', 'message: The tenth <code>circle</code> element should have a <code>cx</code> value of 21, a <code>cy</code> value of 377, and an <code>r</code> value of 5.');"
+      ],
+      "solutions": [],
+      "hints": [
+        "The cy attribute should be the second number of the data point array subtracted from the height of the SVG."
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fab367417b2b2512bd9",
+      "title": "Add Labels to Scatter Plot Circles",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "You can add text to create labels for the points in a scatter plot.",
+        "The goal is to display the comma-separated values for the first (<code>x</code>) and second (<code>y</code>) fields of each item in <code>dataset</code>.",
+        "The <code>text</code> nodes need <code>x</code> and <code>y</code> attributes to position it on the SVG canvas. In this challenge, the <code>y</code> value (which determines height) can use the same value that the <code>circle</code> uses for its <code>cy</code> attribute. The <code>x</code> value can be slightly larger than the <code>cx</code> value of the <code>circle</code>, so the label is visible. This will push the label to the right of the plotted point.",
+        "<h4>Instructions</h4>",
+        "Label each point on the scatter plot using the <code>text</code> elements. The text of the label should be the two values separated by a comma and a space. For example, the label for the first point is \"34, 78\". Set the <code>x</code> attribute so it's 5 units more than the value you used for the <code>cx</code> attribute on the <code>circle</code>. Set the <code>y</code> attribute the same way that's used for the <code>cy</code> value on the <code>circle</code>."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <script>",
+        "    const dataset = [",
+        "                  [ 34,    78 ],",
+        "                  [ 109,   280 ],",
+        "                  [ 310,   120 ],",
+        "                  [ 79,    411 ],",
+        "                  [ 420,   220 ],",
+        "                  [ 233,   145 ],",
+        "                  [ 333,   96 ],",
+        "                  [ 222,   333 ],",
+        "                  [ 78,    320 ],",
+        "                  [ 21,    123 ]",
+        "                ];",
+        "    ",
+        "    ",
+        "    const w = 500;",
+        "    const h = 500;",
+        "    ",
+        "    const svg = d3.select(\"body\")",
+        "                  .append(\"svg\")",
+        "                  .attr(\"width\", w)",
+        "                  .attr(\"height\", h);",
+        "    ",
+        "    svg.selectAll(\"circle\")",
+        "       .data(dataset)",
+        "       .enter()",
+        "       .append(\"circle\")",
+        "       .attr(\"cx\", (d, i) => d[0])",
+        "       .attr(\"cy\", (d, i) => h - d[1])",
+        "       .attr(\"r\", 5);",
+        "    ",
+        "    svg.selectAll(\"text\")",
+        "       .data(dataset)",
+        "       .enter()",
+        "       .append(\"text\")",
+        "       // Add your code below this line",
+        "       ",
+        "       ",
+        "       ",
+        "       // Add your code above this line",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('text').length == 10, 'message: Your code should have 10 <code>text</code> elements.');",
+        "assert($('text').eq(0).text() == '34, 78' && $('text').eq(0).attr('x') == '39' && $('text').eq(0).attr('y') == '422', 'message: The first label should have text of \"34, 78\", an <code>x</code> value of 34, and a <code>y</code> value of 422.');",
+        "assert($('text').eq(1).text() == '109, 280' && $('text').eq(1).attr('x') == '114' && $('text').eq(1).attr('y') == '220', 'message: The second label should have text of \"109, 280\", an <code>x</code> value of 114, and a <code>y</code> value of 220.');",
+        "assert($('text').eq(2).text() == '310, 120' && $('text').eq(2).attr('x') == '315' && $('text').eq(2).attr('y') == '380', 'message: The third label should have text of \"310, 120\", an <code>x</code> value of 315, and a <code>y</code> value of 380.');",
+        "assert($('text').eq(3).text() == '79, 411' && $('text').eq(3).attr('x') == '84' && $('text').eq(3).attr('y') == '89', 'message: The fourth label should have text of \"79, 411\", an <code>x</code> value of 84, and a <code>y</code> value of 89.');",
+        "assert($('text').eq(4).text() == '420, 220' && $('text').eq(4).attr('x') == '425' && $('text').eq(4).attr('y') == '280', 'message: The fifth label should have text of \"420, 220\", an <code>x</code> value of 425, and a <code>y</code> value of 280.');",
+        "assert($('text').eq(5).text() == '233, 145' && $('text').eq(5).attr('x') == '238' && $('text').eq(5).attr('y') == '355', 'message: The sixth label should have text of \"233, 145\", an <code>x</code> value of 238, and a <code>y</code> value of 355.');",
+        "assert($('text').eq(6).text() == '333, 96' && $('text').eq(6).attr('x') == '338' && $('text').eq(6).attr('y') == '404', 'message: The seventh label should have text of \"333, 96\", an <code>x</code> value of 338, and a <code>y</code> value of 404.');",
+        "assert($('text').eq(7).text() == '222, 333' && $('text').eq(7).attr('x') == '227' && $('text').eq(7).attr('y') == '167', 'message: The eighth label should have text of \"222, 333\", an <code>x</code> value of 227, and a <code>y</code> value of 167.');",
+        "assert($('text').eq(8).text() == '78, 320' && $('text').eq(8).attr('x') == '83' && $('text').eq(8).attr('y') == '180', 'message: The ninth label should have text of \"78, 320\", an <code>x</code> value of 83, and a <code>y</code> value of 180.');",
+        "assert($('text').eq(9).text() == '21, 123' && $('text').eq(9).attr('x') == '26' && $('text').eq(9).attr('y') == '377', 'message: The tenth label should have text of \"21, 123\", an <code>x</code> value of 26, and a <code>y</code> value of 377.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fab367417b2b2512bda",
+      "title": "Create a Linear Scale with D3",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "The bar and scatter plot charts both plotted data directly onto the SVG canvas. However, if the height of a bar or one of the data points were larger than the SVG height or width values, it would go outside the SVG area.",
+        "In D3, there are scales to help plot data. <code>Scales</code> are functions that tell the program how to map a set of raw data points onto the pixels of the SVG canvas.",
+        "For example, say you have a 100x500-sized SVG canvas and you want to plot Gross Domestic Product (GDP) for a number of countries. The set of numbers would be in the billion or trillion-dollar range. You provide D3 a type of scale to tell it how to place the large GDP values into that 100x500-sized area.",
+        "It's unlikely you would plot raw data as-is. Before plotting it, you set the scale for your entire data set, so that the <code>x</code> and <code>y</code> values fit your canvas width and height.",
+        "D3 has several scale types. For a linear scale (usually used with quantitative data), there is the D3 method <code>scaleLinear()</code>:",
+        "<code> const scale = d3.scaleLinear()</code>",
+        "By default, a scale uses the identity relationship. The value of the input is the same as the value of the output. A separate challenge covers how to change this.",
+        "<h4>Instructions</h4>",
+        "Change the <code>scale</code> variable to create a linear scale. Then set the <code>output</code> variable to the scale called with an input argument of 50."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <script>",
+        "    // Add your code below this line",
+        "    ",
+        "    const scale = undefined; // Create the scale here",
+        "    const output = scale(); // Call the scale with an argument here",
+        "    ",
+        "    // Add your code above this line",
+        "    ",
+        "    d3.select(\"body\")",
+        "      .append(\"h2\")",
+        "      .text(output);",
+        "  ",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('h2').text() == '50', 'message: The text in the <code>h2</code> should be 50.');",
+        "assert(code.match(/\\.scaleLinear/g), 'message: Your code should use the <code>scaleLinear()</code> method.');",
+        "assert(output == 50 && code.match(/scale\\(\\s*?50\\s*?\\)/g), 'message: The <code>output</code> variable should call <code>scale</code> with an argument of 50.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fac367417b2b2512bdb",
+      "title": "Set a Domain and a Range on a Scale",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "By default, scales use the identity relationship - the input value maps to the output value. But scales can be much more flexible and interesting.",
+        "Say a data set has values ranging from 50 to 480. This in the input information for a scale, and is also known as the domain.",
+        "You want to map those points along the <code>x</code> axis on the SVG canvas, between 10 units and 500 units. This is the output information, which is also known as the range.",
+        "The <code>domain()</code> and <code>range()</code> methods set these values for the scale. Both methods take an array of at least two elements as an argument. Here's an example:",
+        "<blockquote>// Set a domain<br>// The domain covers the set of input values<br>scale.domain([50, 480]);<br>// Set a range<br>// The range covers the set of output values<br>scale.range([10, 500]);<br>scale(50) // Returns 10<br>scale(480) // Returns 500<br>scale(325) // Returns 323.37<br>scale(750) // Returns 807.67<br>d3.scaleLinear()</blockquote>",
+        "Notice that the scale uses the linear relationship between the domain and range values to figure out what the output should be for a given number. The minimum value in the domain (50) maps to the minimum value (10) in the range.",
+        "<h4>Instructions</h4>",
+        "Create a scale and set its domain to <code>[250, 500]</code> and range to <code>[10, 150]</code>.",
+        "<strong>Note</strong><br>You can chain the <code>domain()</code> and <code>range()</code> methods onto the <code>scale</code> variable."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <script>",
+        "    // Add your code below this line",
+        "    const scale = d3.scaleLinear();",
+        "    ",
+        "    ",
+        "    ",
+        "    // Add your code above this line",
+        "    const output = scale(50);",
+        "    d3.select(\"body\")",
+        "      .append(\"h2\")",
+        "      .text(output);",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert(code.match(/\\.domain/g), 'message: Your code should use the <code>domain()</code> method.');",
+        "assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500]), 'message: The <code>domain()</code> of the scale should be set to <code>[250, 500]</code>.');",
+        "assert(code.match(/\\.range/g), 'message: Your code should use the <code>range()</code> method.');",
+        "assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150]), 'message: The <code>range()</code> of the scale should be set to <code>[10, 150]</code>.');",
+        "assert($('h2').text() == '-102', 'message: The text in the <code>h2</code> should be -102.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fac367417b2b2512bdc",
+      "title": "Use the D3 Max and Min Functions",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "The D3 methods <code>domain()</code> and <code>range()</code> set that information for your scale based on the data. There are a couple methods to make that easier.",
+        "Often when you set the domain, you'll want to use the minimum and maximum values within the data set. Trying to find these values manually, especially in a large data set, may cause errors.",
+        "D3 has two methods - <code>min()</code> and <code>max()</code> to return this information. Here's an example:",
+        "<blockquote>const exampleData = [34, 234, 73, 90, 6, 52];<br>d3.min(exampleData) // Returns 6<br>d3.max(exampleData) // Returns 234</blockquote>",
+        "A dataset may have nested arrays, like the [x, y] coordinate pairs that were in the scatter plot example. In that case, you need to tell D3 how to calculate the maximum and minimum.",
+        "Fortunately, both the <code>min()</code> and <code>max()</code> methods take a callback function.",
+        "In this example, the callback function's argument <code>d</code> is for the current inner array. The callback needs to return the element from the inner array (the x or y value) over which you want to compute the maximum or minimum. Here's an example for how to find the min and max values with an array of arrays:",
+        "<blockquote>const locationData = [[1, 7],[6, 3],[8, 3]];<br>// Returns the smallest number out of the first elements<br>const minX = d3.min(locationData, (d) => d[0]);<br>// minX compared 1, 6, and 8 and is set to 1</blockquote>",
+        "<h4>Instructions</h4>",
+        "The <code>positionData</code> variable holds a 3-dimensional (3D) array. Use a D3 method to find the maximum value of the z coordinate (the third value) from the arrays and save it in the <code>output</code> variable.",
+        "<strong>Note</strong><br>Fun fact - D3 can plot 3D arrays."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <script>",
+        "    const positionData = [[1, 7, -4],[6, 3, 8],[2, 8, 3]]",
+        "    // Add your code below this line",
+        "    ",
+        "    const output = undefined; // Change this line",
+        "    ",
+        "    // Add your code above this line",
+        "    ",
+        "    d3.select(\"body\")",
+        "      .append(\"h2\")",
+        "      .text(output)",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert(output == 8 && $('h2').text() == '8', 'message: The text in the <code>h2</code> should be 8.');",
+        "assert(code.match(/\\.max/g), 'message: Your code should use the <code>max()</code> method.')"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fac367417b2b2512bdd",
+      "title": "Use Dynamic Scales",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "The D3 <code>min()</code> and <code>max()</code> methods are useful to help set the scale.",
+        "Given a complex data set, one priority is to set the scale so the visualization fits the SVG container's width and height. You want all the data plotted inside the SVG canvas so it's visible on the web page.",
+        "The example below sets the x-axis scale for scatter plot data. The <code>domain()</code> method passes information to the scale about the raw data values for the plot. The <code>range()</code> method gives it information about the actual space on the web page for the visualization.",
+        "In the example, the domain goes from 0 to the maximum in the set. It uses the <code>max()</code> method with a callback function based on the x values in the arrays. The range uses the SVG canvas' width (<code>w</code>), but it includes some padding, too. This puts space between the scatter plot dots and the edge of the SVG canvas.",
+        "<blockquote>const dataset = [<br>                  [ 34,    78 ],<br>                  [ 109,   280 ],<br>                  [ 310,   120 ],<br>                  [ 79,    411 ],<br>                  [ 420,   220 ],<br>                  [ 233,   145 ],<br>                  [ 333,   96 ],<br>                  [ 222,   333 ],<br>                  [ 78,    320 ],<br>                  [ 21,    123 ]<br>                ];<br>const w = 500;<br>const h = 500;<br><br>// Padding between the SVG canvas boundary and the plot<br>const padding = 30;<br>const xScale = d3.scaleLinear()<br>                 .domain([0, d3.max(dataset, (d) => d[0])])<br>                 .range([padding, w - padding]);</blockquote>",
+        "The padding may be confusing at first. Picture the x-axis as a horizontal line from 0 to 500 (the width value for the SVG canvas). Including the padding in the <code>range()</code> method forces the plot to start at 30 along that line (instead of 0), and end at 470 (instead of 500).",
+        "<h4>Instructions</h4>",
+        "Use the <code>yScale</code> variable to create a linear y-axis scale. The domain should start at zero and go to the maximum y value in the set. The range should use the SVG height (<code>h</code>) and include padding.",
+        "<strong>Note</strong><br>Remember to keep the plot right-side-up. When you set the range for the y coordinates, the higher value (height less padding) is the first argument, and the lower value is the second argument."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <script>",
+        "    const dataset = [",
+        "                  [ 34,    78 ],",
+        "                  [ 109,   280 ],",
+        "                  [ 310,   120 ],",
+        "                  [ 79,    411 ],",
+        "                  [ 420,   220 ],",
+        "                  [ 233,   145 ],",
+        "                  [ 333,   96 ],",
+        "                  [ 222,   333 ],",
+        "                  [ 78,    320 ],",
+        "                  [ 21,    123 ]",
+        "                ];",
+        "    ",
+        "    const w = 500;",
+        "    const h = 500;",
+        "    ",
+        "    // Padding between the SVG canvas boundary and the plot",
+        "    const padding = 30;",
+        "    ",
+        "    // Create an x and y scale",
+        "    ",
+        "    const xScale = d3.scaleLinear()",
+        "                    .domain([0, d3.max(dataset, (d) => d[0])])",
+        "                    .range([padding, w - padding]);",
+        "    ",
+        "    // Add your code below this line",
+        "    ",
+        "    const yScale = undefined;",
+        "                     ",
+        "                     ",
+        "    // Add your code above this line",
+        "    ",
+        "    const output = yScale(411); // Returns 30",
+        "    d3.select(\"body\")",
+        "      .append(\"h2\")",
+        "      .text(output)",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert(output == 30 && $('h2').text() == '30', 'message: The text in the <code>h2</code> should be 30.');",
+        "assert(JSON.stringify(yScale.domain()) == JSON.stringify([0, 411]), 'message: The <code>domain()</code> of yScale should be equivalent to <code>[0, 411]</code>.');",
+        "assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30]), 'message: The <code>range()</code> of yScale should be equivalent to <code>[470, 30]</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fac367417b2b2512bde",
+      "title": "Use a Pre-defined Scale to Place Elements",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "With the scales set up, it's time to map the scatter plot again. The scales are like processing functions that turn the x and y raw data into values that fit and render correctly on the SVG canvas. They keep the data within the screen's plotting area.",
+        "You set the coordinate attribute values for an SVG shape with the scaling function. This includes <code>x</code> and <code>y</code> attributes for <code>rect</code> or <code>text</code> elements, or <code>cx</code> and <code>cy</code> for <code>circles</code>. Here's an example:",
+        "<blockquote>shape<br>  .attr(\"x\", (d) => xScale(d[0]))</blockquote>",
+        "Scales set shape coordinate attributes to place the data points onto the SVG canvas. You don't need to apply scales when you display the actual data value, for example, in the <code>text()</code> method for a tooltip or label.",
+        "<h4>Instructions</h4>",
+        "Use <code>xScale</code> and <code>yScale</code> to position both the <code>circle</code> and <code>text</code> shapes onto the SVG canvas. For the <code>circles</code>, apply the scales to set the <code>cx</code> and <code>cy</code> attributes. Give them a radius of 5 units, too.",
+        "For the <code>text</code> elements, apply the scales to set the <code>x</code> and <code>y</code> attributes. The labels should be offset to the right of the dots. To do this, add 10 units to the x data value before passing it to the <code>xScale</code>."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <script>",
+        "    const dataset = [",
+        "                  [ 34,     78 ],",
+        "                  [ 109,   280 ],",
+        "                  [ 310,   120 ],",
+        "                  [ 79,   411 ],",
+        "                  [ 420,   220 ],",
+        "                  [ 233,   145 ],",
+        "                  [ 333,   96 ],",
+        "                  [ 222,    333 ],",
+        "                  [ 78,    320 ],",
+        "                  [ 21,   123 ]",
+        "                ];",
+        "    ",
+        "    const w = 500;",
+        "    const h = 500;",
+        "    const padding = 60;",
+        "    ",
+        "    const xScale = d3.scaleLinear()",
+        "                     .domain([0, d3.max(dataset, (d) => d[0])])",
+        "                     .range([padding, w - padding]);",
+        "    ",
+        "    const yScale = d3.scaleLinear()",
+        "                     .domain([0, d3.max(dataset, (d) => d[1])])",
+        "                     .range([h - padding, padding]);",
+        "    ",
+        "    const svg = d3.select(\"body\")",
+        "                  .append(\"svg\")",
+        "                  .attr(\"width\", w)",
+        "                  .attr(\"height\", h);",
+        "    ",
+        "    svg.selectAll(\"circle\")",
+        "       .data(dataset)",
+        "       .enter()",
+        "       .append(\"circle\")",
+        "       // Add your code below this line",
+        "       ",
+        "       ",
+        "       ",
+        "       // Add your code above this line",
+        "       ",
+        "    svg.selectAll(\"text\")",
+        "       .data(dataset)",
+        "       .enter()",
+        "       .append(\"text\")",
+        "       .text((d) =>  (d[0] + ",
+        " + d[1]))",
+        "       // Add your code below this line",
+        "       ",
+        "       ",
+        "       ",
+        "       // Add your code above this line",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert($('circle').length == 10, 'message: Your code should have 10 <code>circle</code> elements.');",
+        "assert(Math.round($('circle').eq(0).attr('cx')) == '91' && Math.round($('circle').eq(0).attr('cy')) == '368' && $('circle').eq(0).attr('r') == '5', 'message: The first <code>circle</code> element should have a <code>cx</code> value of approximately 91 and a <code>cy</code> value of approximately 368 after applying the scales. It should also have an <code>r</code> value of 5.');",
+        "assert(Math.round($('circle').eq(1).attr('cx')) == '159' && Math.round($('circle').eq(1).attr('cy')) == '181' && $('circle').eq(1).attr('r') == '5', 'message: The second <code>circle</code> element should have a <code>cx</code> value of approximately 159 and a <code>cy</code> value of approximately 181 after applying the scales. It should also have an <code>r</code> value of 5.');",
+        "assert(Math.round($('circle').eq(2).attr('cx')) == '340' && Math.round($('circle').eq(2).attr('cy')) == '329' && $('circle').eq(2).attr('r') == '5', 'message: The third <code>circle</code> element should have a <code>cx</code> value of approximately 340 and a <code>cy</code> value of approximately 329 after applying the scales. It should also have an <code>r</code> value of 5.');",
+        "assert(Math.round($('circle').eq(3).attr('cx')) == '131' && Math.round($('circle').eq(3).attr('cy')) == '60' && $('circle').eq(3).attr('r') == '5', 'message: The fourth <code>circle</code> element should have a <code>cx</code> value of approximately 131 and a <code>cy</code> value of approximately 60 after applying the scales. It should also have an <code>r</code> value of 5.');",
+        "assert(Math.round($('circle').eq(4).attr('cx')) == '440' && Math.round($('circle').eq(4).attr('cy')) == '237' && $('circle').eq(4).attr('r') == '5', 'message: The fifth <code>circle</code> element should have a <code>cx</code> value of approximately 440 and a <code>cy</code> value of approximately 237 after applying the scales. It should also have an <code>r</code> value of 5.');",
+        "assert(Math.round($('circle').eq(5).attr('cx')) == '271' && Math.round($('circle').eq(5).attr('cy')) == '306' && $('circle').eq(5).attr('r') == '5', 'message: The sixth <code>circle</code> element should have a <code>cx</code> value of approximately 271 and a <code>cy</code> value of approximately 306 after applying the scales. It should also have an <code>r</code> value of 5.');",
+        "assert(Math.round($('circle').eq(6).attr('cx')) == '361' && Math.round($('circle').eq(6).attr('cy')) == '351' && $('circle').eq(6).attr('r') == '5', 'message: The seventh <code>circle</code> element should have a <code>cx</code> value of approximately 361 and a <code>cy</code> value of approximately 351 after applying the scales. It should also have an <code>r</code> value of 5.');",
+        "assert(Math.round($('circle').eq(7).attr('cx')) == '261' && Math.round($('circle').eq(7).attr('cy')) == '132' && $('circle').eq(7).attr('r') == '5', 'message: The eighth <code>circle</code> element should have a <code>cx</code> value of approximately 261 and a <code>cy</code> value of approximately 132 after applying the scales. It should also have an <code>r</code> value of 5.');",
+        "assert(Math.round($('circle').eq(8).attr('cx')) == '131' && Math.round($('circle').eq(8).attr('cy')) == '144' && $('circle').eq(8).attr('r') == '5', 'message: The ninth <code>circle</code> element should have a <code>cx</code> value of approximately 131 and a <code>cy</code> value of approximately 144 after applying the scales. It should also have an <code>r</code> value of 5.');",
+        "assert(Math.round($('circle').eq(9).attr('cx')) == '79' && Math.round($('circle').eq(9).attr('cy')) == '326' && $('circle').eq(9).attr('r') == '5', 'message: The tenth <code>circle</code> element should have a <code>cx</code> value of approximately 79 and a <code>cy</code> value of approximately 326 after applying the scales. It should also have an <code>r</code> value of 5.');",
+        "assert($('text').length == 10, 'message: Your code should have 10 <code>text</code> elements.');",
+        "assert(Math.round($('text').eq(0).attr('x')) == '100' && Math.round($('text').eq(0).attr('y')) == '368', 'message: The first label should have an <code>x</code> value of approximately 100 and a <code>y</code> value of approximately 368 after applying the scales.');",
+        "assert(Math.round($('text').eq(1).attr('x')) == '168' && Math.round($('text').eq(1).attr('y')) == '181', 'message: The second label should have an <code>x</code> value of approximately 168 and a <code>y</code> value of approximately 181 after applying the scales.');",
+        "assert(Math.round($('text').eq(2).attr('x')) == '350' && Math.round($('text').eq(2).attr('y')) == '329', 'message: The third label should have an <code>x</code> value of approximately 350 and a <code>y</code> value of approximately 329 after applying the scales.');",
+        "assert(Math.round($('text').eq(3).attr('x')) == '141' && Math.round($('text').eq(3).attr('y')) == '60', 'message: The fourth label should have an <code>x</code> value of approximately 141 and a <code>y</code> value of approximately 60 after applying the scales.');",
+        "assert(Math.round($('text').eq(4).attr('x')) == '449' && Math.round($('text').eq(4).attr('y')) == '237', 'message: The fifth label should have an <code>x</code> value of approximately 449 and a <code>y</code> value of approximately 237 after applying the scales.');",
+        "assert(Math.round($('text').eq(5).attr('x')) == '280' && Math.round($('text').eq(5).attr('y')) == '306', 'message: The sixth label should have an <code>x</code> value of approximately 280 and a <code>y</code> value of approximately 306 after applying the scales.');",
+        "assert(Math.round($('text').eq(6).attr('x')) == '370' && Math.round($('text').eq(6).attr('y')) == '351', 'message: The seventh label should have an <code>x</code> value of approximately 370 and a <code>y</code> value of approximately 351 after applying the scales.');",
+        "assert(Math.round($('text').eq(7).attr('x')) == '270' && Math.round($('text').eq(7).attr('y')) == '132', 'message: The eighth label should have an <code>x</code> value of approximately 270 and a <code>y</code> value of approximately 132 after applying the scales.');",
+        "assert(Math.round($('text').eq(8).attr('x')) == '140' && Math.round($('text').eq(8).attr('y')) == '144', 'message: The ninth label should have an <code>x</code> value of approximately 140 and a <code>y</code> value of approximately 144 after applying the scales.');",
+        "assert(Math.round($('text').eq(9).attr('x')) == '88' && Math.round($('text').eq(9).attr('y')) == '326', 'message: The tenth label should have an <code>x</code> value of approximately 88 and a <code>y</code> value of approximately 326 after applying the scales.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fad367417b2b2512bdf",
+      "title": "Add Axes to a Visualization",
+      "required": [
+        {
+          "src": "https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"
+        }
+      ],
+      "description": [
+        "Another way to improve the scatter plot is to add an x-axis and a y-axis.",
+        "D3 has two methods <code>axisLeft()</code> and <code>axisBottom()</code> to render the y and x axes, respectively. (Axes is the plural form of axis). Here's an example to create the x-axis based on the <code>xScale</code> in the previous challenges:",
+        "<code>const xAxis = d3.axisBottom(xScale);</code>",
+        "The next step is to render the axis on the SVG canvas. To do so, you can use a general SVG component, the <code>g</code> element. The <code>g</code> stands for group.",
+        "Unlike <code>rect</code>, <code>circle</code>, and <code>text</code>, an axis is just a straight line when it's rendered. Because it is a simple shape, using <code>g</code> works.",
+        "The last step is to apply a <code>transform</code> attribute to position the axis on the SVG canvas in the right place. Otherwise, the line would render along the border of SVG canvas and wouldn't be visible.",
+        "SVG supports different types of <code>transforms</code>, but positioning an axis needs <code>translate</code>. When it's applied to the <code>g</code> element, it moves the whole group over and down by the given amounts. Here's an example:",
+        "<blockquote>const xAxis = d3.axisBottom(xScale);<br><br>svg.append(\"g\")<br>   .attr(\"transform\", \"translate(0, \" + (h - padding) + \")\")<br>   .call(xAxis);</blockquote>",
+        "The above code places the x-axis at the bottom of the SVG canvas. Then it's passed as an argument to the <code>call()</code> method.",
+        "The y-axis works is the same way, except the <code>translate</code> argument is in the form (x, 0). Because <code>translate</code> is a string in the <code>attr()</code> method above, you can use concatenation to include variable values for its arguments.",
+        "<h4>Instructions</h4>",
+        "The scatter plot now has an x-axis. Create a y-axis in a variable named <code>yAxis</code> using the <code>axisLeft()</code> method. Then render the axis using a <code>g</code> element. Make sure to use a <code>transform</code> attribute to translate the axis by the amount of padding units right, and 0 units down. Remember to <code>call()</code> the axis."
+      ],
+      "challengeSeed": [
+        "<body>",
+        "  <script>",
+        "    const dataset = [",
+        "                  [ 34,     78 ],",
+        "                  [ 109,   280 ],",
+        "                  [ 310,   120 ],",
+        "                  [ 79,   411 ],",
+        "                  [ 420,   220 ],",
+        "                  [ 233,   145 ],",
+        "                  [ 333,   96 ],",
+        "                  [ 222,    333 ],",
+        "                  [ 78,    320 ],",
+        "                  [ 21,   123 ]",
+        "                ];",
+        "    ",
+        "    const w = 500;",
+        "    const h = 500;",
+        "    const padding = 60;",
+        "    ",
+        "    const xScale = d3.scaleLinear()",
+        "                     .domain([0, d3.max(dataset, (d) => d[0])])",
+        "                     .range([padding, w - padding]);",
+        "    ",
+        "    const yScale = d3.scaleLinear()",
+        "                     .domain([0, d3.max(dataset, (d) => d[1])])",
+        "                     .range([h - padding, padding]);",
+        "    ",
+        "    const svg = d3.select(\"body\")",
+        "                  .append(\"svg\")",
+        "                  .attr(\"width\", w)",
+        "                  .attr(\"height\", h);",
+        "    ",
+        "    svg.selectAll(\"circle\")",
+        "       .data(dataset)",
+        "       .enter()",
+        "       .append(\"circle\")",
+        "       .attr(\"cx\", (d) => xScale(d[0]))",
+        "       .attr(\"cy\",(d) => yScale(d[1]))",
+        "       .attr(\"r\", (d) => 5);",
+        "    ",
+        "    svg.selectAll(\"text\")",
+        "       .data(dataset)",
+        "       .enter()",
+        "       .append(\"text\")",
+        "       .text((d) =>  (d[0] + \",\" + d[1]))",
+        "       .attr(\"x\", (d) => xScale(d[0] + 10))",
+        "       .attr(\"y\", (d) => yScale(d[1]))",
+        "    ",
+        "    const xAxis = d3.axisBottom(xScale);",
+        "    ",
+        "    svg.append(\"g\")",
+        "       .attr(\"transform\", \"translate(0,\" + (h - padding) + \")\")",
+        "       .call(xAxis);",
+        "    ",
+        "    // Add your code below this line",
+        "    ",
+        "    ",
+        "    ",
+        "    // Add your code above this line",
+        "  ",
+        "  </script>",
+        "</body>"
+      ],
+      "tests": [
+        "assert(code.match(/\\.axisLeft\\(yScale\\)/g), 'message: Your code should use the <code>axisLeft()</code> method with <code>yScale</code> passed as the argument.');",
+        "assert($('g').eq(1).attr('transform').match(/translate\\(60\\s*?,\\s*?0\\)/g), 'message: The y-axis <code>g</code> element should have a <code>transform</code> attribute to translate the axis by (60, 0).');",
+        "assert(code.match(/\\.call\\(yAxis\\)/g), 'message: Your code should call the <code>yAxis</code>.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/04-data-visualization/json-apis-and-ajax.json b/seed/challenges/04-data-visualization/json-apis-and-ajax.json
new file mode 100644
index 00000000000000..1097d10799abdd
--- /dev/null
+++ b/seed/challenges/04-data-visualization/json-apis-and-ajax.json
@@ -0,0 +1,849 @@
+{
+  "name": "JSON APIs and Ajax",
+  "order": 2,
+  "time": "2 hours",
+  "helpRoom": "Help",
+  "required": [
+    {
+      "link": "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"
+    }
+  ],
+  "challenges": [
+    {
+      "id": "587d7fad367417b2b2512be0",
+      "title": "Introduction to the JSON APIs and Ajax Challenges",
+      "description": [
+        [
+          "http://imgs.xkcd.com/comics/api.png",
+          "XKCD web comic with a user sitting at a computer reading the instructions for an API Guide for a site. The text below notes \"If you do things right, it can take people awhile to realize that your 'API documentation' is just instructions for how to look at your website.\"",
+          "Similar to how User Interfaces help people use programs, Application Programming Interfaces (APIs) help programs interact with other programs. APIs are tools that computers use to communicate with one another, in part to send and receive data. You can use API functionality in your page once you understand how to make requests and process data from it. Programmers often use Ajax technologies when working with APIs.<br><br>The term Ajax originated as an acronym for Asynchronous JavaScript And XML. It refers to a group of technologies that make asynchronous requests to a server to transfer data, then load any returned data into the page. An asynchronous process has a couple key properties. The browser does not stop loading a page to wait for the server's response. Also, the browser inserts updated data into part of the page without having to refresh the entire page.<br><br>User experience benefits from asynchronous processes in several ways. Pages load faster since the browser isn't waiting for the server to respond in the middle of a page render. Requests and transfers happen in the background, without interrupting what the user is doing. When the browser receives new data, only the necessary area of the page refreshes. These qualities especially enhance the user experience for single page applications.<br><br>The data transferred between the browser and server is often in a format called JavaScript Object Notation (JSON). JSON resembles JavaScript object literal syntax, except that it's transferred as a string. Once received, it can be converted into an object and used in a script.<br><br>This section covers how to transfer and use data using Ajax technologies with a Free Code Camp API.",
+          ""
+        ]
+      ],
+      "releasedOn": "",
+      "challengeSeed": [],
+      "tests": [],
+      "type": "Waypoint",
+      "challengeType": 7,
+      "isRequired": false,
+      "titleEs": "",
+      "descriptionEs": [
+        []
+      ],
+      "titleFr": "",
+      "descriptionFr": [
+        []
+      ],
+      "titleDe": "",
+      "descriptionDe": [
+        []
+      ]
+    },
+    {
+      "id": "587d7fad367417b2b2512be1",
+      "title": "Trigger Click Events with JavaScript",
+      "description": [
+        "This section covers how to get data from APIs. APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another.",
+        "You'll learn how to update HTML with the data we get from these APIs using a technology called Ajax.",
+        "You want your code to execute only once your page has finished loading. For that purpose, you can attach a JavaScript event to the document called <code>DOMContentLoaded</code>. Here's the code that does this:",
+        "<blockquote>document.addEventListener('DOMContentLoaded',function() {<br><br>});</blockquote>",
+        "Next, you can implement a click event handler that goes inside of the <code>DOMContentLoaded</code> function by adding the following code:",
+        "<code>document.getElementById('getMessage').onclick=function(){};</code>",
+        "<h4>Instructions</h4>",
+        "Add a click event handler inside of the <code>DOMContentLoaded</code> function for the element with id of <code>getMessage</code>."
+      ],
+      "challengeSeed": [
+        "<script>",
+        "  document.addEventListener('DOMContentLoaded',function(){",
+        "    // Add your code below this line",
+        "    ",
+        "    ",
+        "    // Add your code above this line",
+        "  });",
+        "</script>",
+        "<style>",
+        "  body {",
+        "    text-align: center;",
+        "    font-family: \"Helvetica\", sans-serif;",
+        "  }",
+        "  h1 {",
+        "    font-size: 2em;",
+        "    font-weight: bold;",
+        "  }",
+        "  .box {",
+        "    border-radius: 5px;",
+        "    background-color: #eee;",
+        "    padding: 20px 5px;",
+        "  }",
+        "  button {",
+        "    color: white;",
+        "    background-color: #4791d0;",
+        "    border-radius: 5px;",
+        "    border: 1px solid #4791d0;",
+        "    padding: 5px 10px 8px 10px;",
+        "  }",
+        "  button:hover {",
+        "    background-color: #0F5897;",
+        "    border: 1px solid #0F5897;",
+        "  }",
+        "</style>",
+        "<h1>Cat Photo Finder</h1> ",
+        "<p class=\"message box\">",
+        "  The message will go here",
+        "</p>",
+        "<p>",
+        "  <button id=\"getMessage\">",
+        "    Get Message",
+        "  </button>",
+        "</p>"
+      ],
+      "tests": [
+        "assert(code.match(/document\\.getElementById\\(\\s*?('|\")getMessage\\1\\s*?\\)/g), 'message: Your code should use the <code>document.getElementById</code> method to select the <code>getMessage</code> element.');",
+        "assert(code.match(/\\.onclick=function\\(\\s*?\\)\\s*?{\\s*?};/g), 'message: Your code should add an <code>onclick</code> event handler.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fad367417b2b2512be2",
+      "title": "Change Text with Click Events",
+      "description": [
+        "When the click event happens, you can use JavaScript to update an HTML element.",
+        "For example, when a user clicks the \"Get Message\" button, it changes the text of the element with the class <code>message</code> to say \"Here is the message\".",
+        "This works by adding the following code within the click event:",
+        "<code>document.getElementsByClassName('message')[0].innerHTML=\"Here is the message\";</code>",
+        "<h4>Instructions</h4>",
+        "Add code inside the <code>onclick</code> event handler to change the text inside the <code>message</code> element to say \"Here is the message\"."
+      ],
+      "challengeSeed": [
+        "<script>",
+        "  document.addEventListener('DOMContentLoaded',function(){",
+        "    document.getElementById('getMessage').onclick=function(){",
+        "      // Add your code below this line",
+        "      ",
+        "      ",
+        "      // Add your code above this line",
+        "    }",
+        "  });",
+        "</script>",
+        "<style>",
+        "  body {",
+        "    text-align: center;",
+        "    font-family: \"Helvetica\", sans-serif;",
+        "  }",
+        "  h1 {",
+        "    font-size: 2em;",
+        "    font-weight: bold;",
+        "  }",
+        "  .box {",
+        "    border-radius: 5px;",
+        "    background-color: #eee;",
+        "    padding: 20px 5px;",
+        "  }",
+        "  button {",
+        "    color: white;",
+        "    background-color: #4791d0;",
+        "    border-radius: 5px;",
+        "    border: 1px solid #4791d0;",
+        "    padding: 5px 10px 8px 10px;",
+        "  }",
+        "  button:hover {",
+        "    background-color: #0F5897;",
+        "    border: 1px solid #0F5897;",
+        "  }",
+        "</style>",
+        "<h1>Cat Photo Finder</h1> ",
+        "<p class=\"message box\">",
+        "  The message will go here",
+        "</p>",
+        "<p>",
+        "  <button id=\"getMessage\">",
+        "    Get Message",
+        "  </button>",
+        "</p>"
+      ],
+      "tests": [
+        "assert(code.match(/document\\.getElementsByClassName\\(\\s*?('|\")message\\1\\s*?\\)\\[0\\]\\.innerHTML\\s*?=\\s*?('|\")Here is the message\\2/g), 'message: Your code should use the <code>document.getElementsByClassName</code> method to select the element with class <code>message</code> and set its <code>innerHTML</code> to the given string.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fae367417b2b2512be3",
+      "title": "Get JSON with the JavaScript XMLHttpRequest Method",
+      "description": [
+        "You can also request data from an external source. This is where APIs come into play.",
+        "Remember that APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another.",
+        "Most web APIs transfer data in a format called JSON. JSON stands for JavaScript Object Notation.",
+        "JSON syntax looks very similar to JavaScript object literal notation. JSON has object properties and their current values, sandwiched between a <code>{</code> and a <code>}</code>.",
+        "These properties and their values are often referred to as \"key-value pairs\".",
+        "However, JSON transmitted by APIs are sent as <code>bytes</code>, and your application receives it as a <code>string</code>. These can be converted into JavaScript objects, but they are not JavaScript objects by default. The <code>JSON.parse</code> method parses the string and constructs the JavaScript object described by it.",
+        "You can request the JSON from Free Code Camp's Cat Photo API. Here's the code you can put in your click event to do this:",
+        "<blockquote>req=new XMLHttpRequest();<br>req.open(\"GET\",'/json/cats.json',true);<br>req.send();<br>req.onload=function(){<br>  json=JSON.parse(req.responseText);<br>  document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json);<br>};</blockquote>",
+        "Here's a review of what each piece is doing. The JavaScript <code>XMLHttpRequest</code> object has a number of properties and methods that are used to transfer data. First, an instance of the <code>XMLHttpRequest</code> object is created and saved in the <code>req</code> variable.",
+        "Next, the <code>open</code> method initializes a request - this example is requesting data from an API, therefore is a \"GET\" request. The second argument for <code>open</code> is the URL of the API you are requesting data from. The third argument is a Boolean value where <code>true</code> makes it an asynchronous request.",
+        "The <code>send</code> method sends the request. Finally, the <code>onload</code> event handler parses the returned data and applies the <code>JSON.stringify</code> method to convert the JavaScript object into a string. This string is then inserted as the message text.",
+        "<h4>Instructions</h4>",
+        "Update the code to create and send a \"GET\" request to the Free Code Camp Cat Photo API. Then click the \"Get Message\" button. Your Ajax function will replace the \"The message will go here\" text with the raw JSON output from the API."
+      ],
+      "challengeSeed": [
+        "<script>",
+        "  document.addEventListener('DOMContentLoaded',function(){",
+        "    document.getElementById('getMessage').onclick=function(){",
+        "      // Add your code below this line",
+        "      ",
+        "      ",
+        "      // Add your code above this line",
+        "    };",
+        "  });",
+        "</script>",
+        "<style>",
+        "  body {",
+        "    text-align: center;",
+        "    font-family: \"Helvetica\", sans-serif;",
+        "  }",
+        "  h1 {",
+        "    font-size: 2em;",
+        "    font-weight: bold;",
+        "  }",
+        "  .box {",
+        "    border-radius: 5px;",
+        "    background-color: #eee;",
+        "    padding: 20px 5px;",
+        "  }",
+        "  button {",
+        "    color: white;",
+        "    background-color: #4791d0;",
+        "    border-radius: 5px;",
+        "    border: 1px solid #4791d0;",
+        "    padding: 5px 10px 8px 10px;",
+        "  }",
+        "  button:hover {",
+        "    background-color: #0F5897;",
+        "    border: 1px solid #0F5897;",
+        "  }",
+        "</style>",
+        "<h1>Cat Photo Finder</h1> ",
+        "<p class=\"message box\">",
+        "  The message will go here",
+        "</p>",
+        "<p>",
+        "  <button id=\"getMessage\">",
+        "    Get Message",
+        "  </button>",
+        "</p>"
+      ],
+      "tests": [
+        "assert(code.match(/new\\s+?XMLHttpRequest\\(\\s*?\\)/g), 'message: Your code should create a new <code>XMLHttpRequest</code>.');",
+        "assert(code.match(/\\.open\\(\\s*?('|\")GET\\1\\s*?,\\s*?('|\")\\/json\\/cats\\.json\\2\\s*?,\\s*?true\\s*?\\)/g), 'message: Your code should use the <code>open</code> method to initialize a \"GET\" request to the Free Code Camp Cat Photo API.');",
+        "assert(code.match(/\\.send\\(\\s*\\)/g), 'message: Your code should use the <code>send</code> method to send the request.');",
+        "assert(code.match(/\\.onload=function\\(\\s*?\\)\\s*?{/g), 'message: Your code should have an <code>onload</code> event handler set to a function.');",
+        "assert(code.match(/JSON\\.parse\\(.*\\.responseText\\)/g), 'message: Your code should use the <code>JSON.parse</code> method to parse the <code>responseText</code>.');",
+        "assert(code.match(/document\\.getElementsByClassName\\(\\s*?('|\")message\\1\\s*?\\)\\[0\\]\\.innerHTML\\s*?=\\s*?JSON\\.stringify\\(.+?\\)/g), 'message: Your code should get the element with class <code>message</code> and change its inner HTML to the string of JSON data.');"
+      ],
+      "solutions": [
+
+      ],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fae367417b2b2512be4",
+      "title": "Access the JSON Data from an API",
+      "description": [
+        "In the previous challenge, you saw how to get JSON data from the Free Code Camp Cat Photo API.",
+        "Now you'll take a closer look at the returned data to better understand the JSON format. Recall some notation in JavaScript:",
+        "<blockquote>[ ] -> Square brackets represent an array<br>{ } -> Curly brackets represent an object<br>\" \" -> Double quotes represent a string. They are also used for key names in JSON</blockquote>",
+        "Understanding the structure of the data that an API returns is important because it influences how you retrieve the values you need.",
+        "On the right, click the \"Get Message\" button to load the Free Code Camp Cat Photo API JSON into the HTML.",
+        "The first and last character you see in the JSON data are square brackets <code>[ ]</code>. This means that the returned data is an array. The second character in the JSON data is a curly <code>{</code> bracket, which starts an object. Looking closely, you can see that there are three separate objects. The JSON data is an array of three objects, where each object contains information about a cat photo.",
+        "You learned earlier that objects contain \"key-value pairs\" that are separated by commas. In the Cat Photo example, the first object has <code>\"id\":0</code> where \"id\" is a key and 0 is its corresponding value. Similarly, there are keys for \"imageLink\", \"altText\", and \"codeNames\". Each cat photo object has these same keys, but with different values.",
+        "Another interesting \"key-value pair\" in the first object is <code>\"codeNames\":[\"Juggernaut\",\"Mrs. Wallace\",\"ButterCup\"]</code>. Here \"codeNames\" is the key and its value is an array of three strings. It's possible to have arrays of objects as well as a key with an array as a value.",
+        "Remember how to access data in arrays and objects. Arrays use bracket notation to access a specific index of an item. Objects use either bracket or dot notation to access the value of a given property. Here's an example that prints the \"altText\" of the first cat photo - note that the parsed JSON data in the editor is saved in a variable called <code>json</code>:",
+        "<blockquote>console.log(json[0].altText);<br>// Prints \"A white cat wearing a green helmet shaped melon on it's head.\"</blockquote>",
+        "<h4>Instructions</h4>",
+        "For the cat with the \"id\" of 2, print to the console the second value in the <code>codeNames</code> array. You should use bracket and dot notation on the object (which is saved in the variable <code>json</code>) to access the value."
+      ],
+      "challengeSeed": [
+        "<script>",
+        "  document.addEventListener('DOMContentLoaded',function(){",
+        "    document.getElementById('getMessage').onclick=function(){",
+        "      req=new XMLHttpRequest();",
+        "      req.open(\"GET\",'/json/cats.json',true);",
+        "      req.send();",
+        "      req.onload=function(){",
+        "        json=JSON.parse(req.responseText);",
+        "        document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json);",
+        "        // Add your code below this line",
+        "        ",
+        "        ",
+        "        // Add your code above this line",
+        "      };",
+        "    };",
+        "  });",
+        "</script>",
+        "<style>",
+        "  body {",
+        "    text-align: center;",
+        "    font-family: \"Helvetica\", sans-serif;",
+        "  }",
+        "  h1 {",
+        "    font-size: 2em;",
+        "    font-weight: bold;",
+        "  }",
+        "  .box {",
+        "    border-radius: 5px;",
+        "    background-color: #eee;",
+        "    padding: 20px 5px;",
+        "  }",
+        "  button {",
+        "    color: white;",
+        "    background-color: #4791d0;",
+        "    border-radius: 5px;",
+        "    border: 1px solid #4791d0;",
+        "    padding: 5px 10px 8px 10px;",
+        "  }",
+        "  button:hover {",
+        "    background-color: #0F5897;",
+        "    border: 1px solid #0F5897;",
+        "  }",
+        "</style>",
+        "<h1>Cat Photo Finder</h1> ",
+        "<p class=\"message box\">",
+        "  The message will go here",
+        "</p>",
+        "<p>",
+        "  <button id=\"getMessage\">",
+        "    Get Message",
+        "  </button>",
+        "</p>"
+      ],
+      "tests": [
+        "assert(code.match(/(?:json\\[2\\]\\.codeNames\\[1\\]|json\\[2\\]\\[('|\")codeNames\\1\\]\\[1\\])/g), 'message: Your code should use bracket and dot notation to access the proper code name, and print \"Loki\" to the console.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fae367417b2b2512be5",
+      "title": "Convert JSON Data to HTML",
+      "description": [
+        "Now that you're getting data from a JSON API, you can display it in the HTML.",
+        "You can use a <code>forEach</code> method to loop through the data since the cat photo objects are held in an array. As you get to each item, you can modify the HTML elements.",
+        "First, declare an html variable with <code>var html = \"\";</code>.",
+        "Then, loop through the JSON, adding HTML to the variable that wraps the key names in <code>strong</code> tags, followed by the value. When the loop is finished, you render it.",
+        "Here's the code that does this:",
+        "<blockquote>json.forEach(function(val) {</br>  var keys = Object.keys(val);</br>  html += \"&lt;div class = 'cat'&gt;\";</br>  keys.forEach(function(key) {</br>    html += \"&lt;strong&gt;\" + key + \"&lt;/strong&gt;: \" + val[key] + \"&lt;br&gt;\";</br>  });</br>  html += \"&lt;/div&gt;&lt;br&gt;\";</br>});</blockquote>",
+        "<h4>Instructions</h4>",
+        "Add a <code>forEach</code> method to loop over the JSON data and create the HTML elements to display it."
+      ],
+      "challengeSeed": [
+        "<script>",
+        "  document.addEventListener('DOMContentLoaded',function(){",
+        "    document.getElementById('getMessage').onclick=function(){",
+        "      req=new XMLHttpRequest();",
+        "      req.open(\"GET\",'/json/cats.json',true);",
+        "      req.send();",
+        "      req.onload=function(){",
+        "        json=JSON.parse(req.responseText);",
+        "        var html = \"\";",
+        "        // Add your code below this line",
+        "        ",
+        "        ",
+        "        ",
+        "        // Add your code above this line",
+        "        document.getElementsByClassName('message')[0].innerHTML=html;",
+        "      };",
+        "    };",
+        "  });",
+        "</script>",
+        "<style>",
+        "  body {",
+        "    text-align: center;",
+        "    font-family: \"Helvetica\", sans-serif;",
+        "  }",
+        "  h1 {",
+        "    font-size: 2em;",
+        "    font-weight: bold;",
+        "  }",
+        "  .box {",
+        "    border-radius: 5px;",
+        "    background-color: #eee;",
+        "    padding: 20px 5px;",
+        "  }",
+        "  button {",
+        "    color: white;",
+        "    background-color: #4791d0;",
+        "    border-radius: 5px;",
+        "    border: 1px solid #4791d0;",
+        "    padding: 5px 10px 8px 10px;",
+        "  }",
+        "  button:hover {",
+        "    background-color: #0F5897;",
+        "    border: 1px solid #0F5897;",
+        "  }",
+        "</style>",
+        "<h1>Cat Photo Finder</h1> ",
+        "<p class=\"message box\">",
+        "  The message will go here",
+        "</p>",
+        "<p>",
+        "  <button id=\"getMessage\">",
+        "    Get Message",
+        "  </button>",
+        "</p>"
+      ],
+      "tests": [
+        "assert(code.match(/json\\.forEach/g), 'message: Your code should use a <code>forEach</code> method to loop over the JSON data from the API.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fae367417b2b2512be6",
+      "title": "Render Images from Data Sources",
+      "description": [
+        "The last few challenges showed that each object in the JSON array contains an <code>imageLink</code> key with a value that is the URL of a cat's image.",
+        "When you're looping through these objects, you can use this <code>imageLink</code> property to display this image in an <code>img</code> element.",
+        "Here's the code that does this:",
+        "<code>html += \"&lt;img src = '\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'&gt;\";</code>",
+        "<h4>Instructions</h4>",
+        "Add code to use the <code>imageLink</code> and <code>altText</code> properties in an <code>img</code> tag."
+      ],
+      "challengeSeed": [
+        "<script>",
+        "  document.addEventListener('DOMContentLoaded',function(){",
+        "    document.getElementById('getMessage').onclick=function(){",
+        "      req=new XMLHttpRequest();",
+        "      req.open(\"GET\",'/json/cats.json',true);",
+        "      req.send();",
+        "      req.onload=function(){",
+        "        json=JSON.parse(req.responseText);",
+        "        var html = \"\";",
+        "        json.forEach(function(val) {",
+        "          html += \"<div class = 'cat'>\";",
+        "          // Add your code below this line",
+        "          ",
+        "          ",
+        "          // Add your code above this line",
+        "          html += \"</div><br>\";",
+        "        });",
+        "        document.getElementsByClassName('message')[0].innerHTML=html;",
+        "      };",
+        "     };",
+        "  });",
+        "</script>",
+        "<style>",
+        "  body {",
+        "    text-align: center;",
+        "    font-family: \"Helvetica\", sans-serif;",
+        "  }",
+        "  h1 {",
+        "    font-size: 2em;",
+        "    font-weight: bold;",
+        "  }",
+        "  .box {",
+        "    border-radius: 5px;",
+        "    background-color: #eee;",
+        "    padding: 20px 5px;",
+        "  }",
+        "  button {",
+        "    color: white;",
+        "    background-color: #4791d0;",
+        "    border-radius: 5px;",
+        "    border: 1px solid #4791d0;",
+        "    padding: 5px 10px 8px 10px;",
+        "  }",
+        "  button:hover {",
+        "    background-color: #0F5897;",
+        "    border: 1px solid #0F5897;",
+        "  }",
+        "</style>",
+        "<h1>Cat Photo Finder</h1> ",
+        "<p class=\"message box\">",
+        "  The message will go here",
+        "</p>",
+        "<p>",
+        "  <button id=\"getMessage\">",
+        "    Get Message",
+        "  </button>",
+        "</p>"
+      ],
+      "tests": [
+        "assert(code.match(/val\\.imageLink/g), 'message: You should use the <code>imageLink</code> property to display the images.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fae367417b2b2512be7",
+      "title": "Pre-filter JSON",
+      "description": [
+        "If you don't want to render every cat photo you get from the Free Code Camp Cat Photo API, you can pre-filter the JSON before looping through it.",
+        "Given that the JSON data is stored in an array, you can use the <code>filter</code> method to filter out the cat whose \"id\" key has a value of 1.",
+        "Here's the code to do this:",
+        "<blockquote>json = json.filter(function(val) {<br>  return (val.id !== 1);<br>});</blockquote>",
+        "<h4>Instructions</h4>",
+        "Add code to <code>filter</code> the json data to remove the cat with the \"id\" value of 1."
+      ],
+      "challengeSeed": [
+        "<script>",
+        "  document.addEventListener('DOMContentLoaded',function(){",
+        "    document.getElementById('getMessage').onclick=function(){",
+        "      req=new XMLHttpRequest();",
+        "      req.open(\"GET\",'/json/cats.json',true);",
+        "      req.send();",
+        "      req.onload=function(){",
+        "        json=JSON.parse(req.responseText);",
+        "        var html = \"\";",
+        "        // Add your code below this line",
+        "        ",
+        "        ",
+        "        // Add your code above this line",
+        "         json.forEach(function(val) {",
+        "           html += \"<div class = 'cat'>\"",
+        "           ",
+        "           html += \"<img src = '\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'>\"",
+        "           ",
+        "           html += \"</div>\"",
+        "         });",
+        "         document.getElementsByClassName('message')[0].innerHTML=html;",
+        "       };",
+        "     }; ",
+        "  });",
+        "</script>",
+        "<style>",
+        "  body {",
+        "    text-align: center;",
+        "    font-family: \"Helvetica\", sans-serif;",
+        "  }",
+        "  h1 {",
+        "    font-size: 2em;",
+        "    font-weight: bold;",
+        "  }",
+        "  .box {",
+        "    border-radius: 5px;",
+        "    background-color: #eee;",
+        "    padding: 20px 5px;",
+        "  }",
+        "  button {",
+        "    color: white;",
+        "    background-color: #4791d0;",
+        "    border-radius: 5px;",
+        "    border: 1px solid #4791d0;",
+        "    padding: 5px 10px 8px 10px;",
+        "  }",
+        "  button:hover {",
+        "    background-color: #0F5897;",
+        "    border: 1px solid #0F5897;",
+        "  }",
+        "</style>",
+        "<h1>Cat Photo Finder</h1> ",
+        "<p class=\"message box\">",
+        "  The message will go here",
+        "</p>",
+        "<p>",
+        "  <button id=\"getMessage\">",
+        "    Get Message",
+        "  </button>",
+        "</p>"
+      ],
+      "tests": [
+        "assert(code.match(/json\\.filter/g), 'message: Your code should use the <code>filter</code> method.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7faf367417b2b2512be8",
+      "title": "Get Geolocation Data",
+      "description": [
+        "Another cool thing you can do is access your user's current location. Every browser has a built in navigator that can give you this information.",
+        "The navigator will get the user's current longitude and latitude.",
+        "You will see a prompt to allow or block this site from knowing your current location. The challenge can be completed either way, as long as the code is correct.",
+        "By selecting allow, you will see the text on the output phone change to your latitude and longitude.",
+        "Here's code that does this:",
+        "<blockquote>if (navigator.geolocation){<br>  navigator.geolocation.getCurrentPosition(function(position) {<br>    document.getElementById('data').innerHTML=\"latitude: \"+ position.coords.latitude +  \"&lt;br&gt;longitude: \" +  position.coords.longitude;<br>  });<br>}</blockquote>",
+        "First, it checks if the <code>navigator.geolocation</code> object exists. If it does, the <code>getCurrentPosition</code> method on that object is called, which initiates an asynchronous request for the user's position. If the request is successful, the callback function in the method runs. This function accesses the <code>position</code> object's values for latitude and longitude using dot notation and updates the HTML.",
+        "<h4>Instructions</h4>",
+        "Add the example code inside the <code>script</code> tags to check a user's current location and insert it into the HTML."
+      ],
+      "challengeSeed": [
+        "<script>",
+        "  // Add your code below this line",
+        "  ",
+        "  ",
+        "  // Add your code above this line",
+        "</script>",
+        "<h4>You are here:</h4>",
+        "<div id=\"data\">",
+        "",
+        "</div>"
+      ],
+      "tests": [
+        "assert(code.match(/navigator\\.geolocation\\.getCurrentPosition/g), 'message: Your code should use <code>navigator.geolocation</code> to access the user&#39;s current location.');",
+        "assert(code.match(/position\\.coords\\.latitude/g), 'message: Your code should use <code>position.coords.latitude</code> to display the user&#39;s latitudinal location.');",
+        "assert(code.match(/position\\.coords\\.longitude/g), 'message: Your code should use <code>position.coords.longitude</code> to display the user&#39;s longitudinal location.');",
+        "assert(code.match(/document\\.getElementById\\(\\s*?('|\")data\\1\\s*?\\)\\.innerHTML/g), 'message: You should display the user&#39;s position within the <code>data</code> div element.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7faf367417b2b2512be9",
+      "title": "Post Data with the JavaScript XMLHttpRequest Method",
+      "description": [
+        "In the previous examples, you received data from an external resource. You can also send data to an external resource, as long as that resource supports Ajax requests and you know the URL.",
+        "JavaScript's <code>XMLHttpRequest</code> method is also used to post data to a server. Here's an example:",
+        "<blockquote>req=new XMLHttpRequest();<br>req.open(\"POST\",url,true);<br>req.setRequestHeader('Content-Type','text/plain');<br>req.onreadystatechange=function(){<br>  if(req.readyState==4 && req.status==200){<br>    document.getElementsByClassName('message')[0].innerHTML=req.responseText;<br>  }<br>};<br>req.send(userName);</blockquote>",
+        "You've seen several of these methods before. Here the <code>open</code> method initializes the request as a \"POST\" to the given URL of the external resource, and uses the <code>true</code> Boolean to make it asynchronous.",
+        "The <code>setRequestHeader</code> method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the <code>open</code> method, but before the <code>send</code> method. The two parameters are the name of the header and the value to set as the body of that header.",
+        "Next, the <code>onreadystatechange</code> event listener handles a change in the state of the request. A <code>readyState</code> of 4 means the operation is complete, and a <code>status</code> of 200 means it was a successful request. The document's HTML can be updated.",
+        "Finally, the <code>send</code> method sends the request with the <code>userName</code> value, which was given by the user in the <code>input</code> field.",
+        "<h4>Instructions</h4>",
+        "Update the code to create and send a \"POST\" request. Then enter your name in input box and click \"Send Message\". Your Ajax function will replace \"Reply from Server will be here.\" with the reply of the server. In this case, it is your name appended with \" loves cats\"."
+      ],
+      "challengeSeed": [
+        "<script>",
+        "  document.addEventListener('DOMContentLoaded',function(){",
+        "    document.getElementById('sendMessage').onclick=function(){",
+        "    ",
+        "      var userName=document.getElementById('name').value;",
+        "      // Add your code below this line",
+        "      ",
+        "      ",
+        "      // Add your code above this line",
+        "    };",
+        "  });",
+        "</script>",
+        "<style>",
+        "  body {",
+        "    text-align: center;",
+        "    font-family: \"Helvetica\", sans-serif;",
+        "  }",
+        "  h1 {",
+        "    font-size: 2em;",
+        "    font-weight: bold;",
+        "  }",
+        "  .box {",
+        "    border-radius: 5px;",
+        "    background-color: #eee;",
+        "    padding: 20px 5px;",
+        "  }",
+        "  button {",
+        "    color: white;",
+        "    background-color: #4791d0;",
+        "    border-radius: 5px;",
+        "    border: 1px solid #4791d0;",
+        "    padding: 5px 10px 8px 10px;",
+        "  }",
+        "  button:hover {",
+        "    background-color: #0F5897;",
+        "    border: 1px solid #0F5897;",
+        "  }",
+        "</style>",
+        "<h1>Cat Friends</h1> ",
+        "<p class=\"message box\">",
+        "  Reply from Server will be here",
+        "</p>",
+        "<p>",
+        "  <label for=\"name\">Your name:",
+        "    <input type=\"text\" id=\"name\"/>",
+        "  </label>",
+        "  <button id=\"sendMessage\">",
+        "    Send Message",
+        "  </button>",
+        "</p>"
+      ],
+      "tests": [
+        "assert(code.match(/new\\s+?XMLHttpRequest\\(\\s*?\\)/g), 'message: Your code should create a new <code>XMLHttpRequest</code>.');",
+        "assert(code.match(/\\.open\\(\\s*?('|\")POST\\1\\s*?,\\s*?url\\s*?,\\s*?true\\s*?\\)/g), 'message: Your code should use the <code>open</code> method to initialize a \"POST\" request to the server.');",
+        "assert(code.match(/\\.setRequestHeader\\(\\s*?('|\")Content-Type\\1\\s*?,\\s*?('|\")text\\/plain\\2\\s*?\\)/g), 'message: Your code should use the <code>setRequestHeader</code> method.');",
+        "assert(code.match(/\\.onreadystatechange\\s*?=/g), 'message: Your code should have an <code>onreadystatechange</code> event handler set to a function.');",
+        "assert(code.match(/document\\.getElementsByClassName\\(\\s*?('|\")message\\1\\s*?\\)\\[0\\]\\.innerHTML\\s*?=\\s*?.+?\\.responseText/g), 'message: Your code should get the element with class <code>message</code> and change its inner HTML to the <code>responseText</code>.');",
+        "assert(code.match(/\\.send\\(\\s*?userName\\s*?\\)/g), 'message: Your code should use the <code>send</code> method.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/04-video-challenges/accessibility.json b/seed/challenges/04-video-challenges/accessibility.json
deleted file mode 100644
index 917e978c286634..00000000000000
--- a/seed/challenges/04-video-challenges/accessibility.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "Accessibility",
-  "order": 5.5,
-  "time": "0 hours",
-  "isComingSoon": true,
-  "challenges": [
-    {
-      "id": "bd7128d8c441eddfbeb5bddd",
-      "title": "Learn Accessibility Challenges",
-      "description": [],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Accessibility"
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/04-video-challenges/agile.json b/seed/challenges/04-video-challenges/agile.json
deleted file mode 100644
index 3d56841bcff421..00000000000000
--- a/seed/challenges/04-video-challenges/agile.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "Agile",
-  "order": 6,
-  "time": "0 hours",
-  "isComingSoon": true,
-  "challenges": [
-    {
-      "id": "bd7128d8c441eddfbec5bdde",
-      "title": "Learn Agile Challenges",
-      "description": [],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Agile"
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/04-video-challenges/bigonotation.json b/seed/challenges/04-video-challenges/bigonotation.json
deleted file mode 100644
index 84f1554cc75cfb..00000000000000
--- a/seed/challenges/04-video-challenges/bigonotation.json
+++ /dev/null
@@ -1,118 +0,0 @@
-{
-  "name": "Big O Notation",
-  "order": 4,
-  "time": "30 minutes",
-  "challenges": [
-    {
-      "id": "56b15f15632298c12f31517b",
-      "title": "What It Is and Why You Should Care",
-      "description": [
-        "Time complexity is a way of discussing how long specific algorithms take. This is useful in streamlining software so it works as fast as possible.",
-        "When you're writing code, you should be aware of how long it's going to take to execute. Nobody wants to create a product that users find frustrating due to slow use.",
-        "Time complexity is talked about in relation to an algorithm, a collection of one or more functions.",
-        "Big O Notation specifically helps you identify when an algorithm wouldn't 'scale' well, or work well with varying amounts of users, information, or other inputs.",
-        "This does NOT correspond with Moore's law - no matter how big and fast your computer is, if the algorithm is exponentially inefficient, it's realistically unusable.",
-        "Additionally, questions about Big O Notation and time complexity can be used as interview questions.",
-        "Your employers will want to know that the code you write will not take too long to load on the page for the users, and knowledge of Big O Notation shows that you're cognizant of that while writing your code.",
-        "The take-away from this video is that Big O Notation helps you identify where there could be problems (sometimes BIG problems) in speed and memory when your site or app grows."
-      ],
-      "challengeSeed": [
-        "KSNx22U4uWE"
-      ],
-      "tests": [
-        [
-          "If an algorithm is efficient for small amounts of data, it will be equally efficient for large amounts of data.",
-          false,
-          "It depends on the algorithm and the data it's processing."
-        ],
-        [
-          "Big O Notation reflects the speed of an algorithm in terms of the expected input.",
-          true
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "¿Qué es y porque te debe interesar?",
-          "description": [
-            "La complejidad temporal es una forma de discutir cunto tiempo toma un algoritmo específico.  Esto es útil al ajustar software para que opere tan rápido como sea posible.",
-            "Cuando escribes código, debes tener en cuenta cuanto se va a demorar su ejecución. Nadie quiere crear un producto que fruste a los usuarios por su lentitud.",
-            "Se habla de complejidad temporal en relación con un algoritmo, una colección de una o más funciones.",
-            "La notación O mayúscula ayuda a identificar de manera específica cuando un algoritmo no 'escalaría' bien, o no funcionaría bien con una cantidad que varia de usuarios, de información o de algún otro recurso.",
-            "Esto no tiene correspondencia con la ley de Moore - no importa cuando grande y rápido sea tu computador, si un algoritmo es exponencialmente ineficiente, en realidad no es utilizable.",
-            "Además, pueden haber preguntas en entrevistas sobre la notación O mayúscula y de complejidad temporal.",
-            "Tu empleador podrá querer saber que el código que escribes no tardará demasiado en cargar en la página de los usuarios, y el conocimiento de la notación O mayúscula muestra que reconoces esto mientras escribies tu código.",
-            "Lo que esperamos que te quede de este video es que la notación O mayúscula te ayuda a identificar cuando podría haber problemas (en ocasiones problemas MAYÚSCULOS) en velocidad y memoria cuando tu sitio o aplicación crezcan."
-          ]
-        }
-      }
-    },
-    {
-      "id": "56b15f15632298c12f31517a",
-      "title": "A Few Examples",
-      "description": [
-        "Time complexity is commonly estimated by counting the number of elementary operations (elementary operation = an operation that takes a fixed amount of time to perform) performed in the algorithm.",
-        "Time complexity is classified by the nature of the function O(n). O represents the function, and (n) represents the number of elements to be acted on.",
-        "Worst-case time complexity, the longest it could possibly take with any valid input, is the most common way to express time complexity.",
-        "When you discuss Big-O notation, that is generally referring to the worst case scenario.",
-        "For example, if we have to search two lists for common entries, we will calculate as if both entries would be at the very end of each list, just to be safe that we don't underestimate how long it could take.",
-        "O(1) - determining if a number is odd or even. O(1) is a static amount of time, the same no matter how much information is there or how many users there are.",
-        "O(log N) - finding a word in the dictionary (using binary search). Binary search is an example of a type of 'divide and conquer' algorithm.",
-        "O(N) - reading a book",
-        "O(N log N) - sorting a deck of playing cards (using merge sort)",
-        "O(N^2) - checking if you have everything on your shopping list in your cart",
-        "O(infinity) - tossing a coin until it lands on heads",
-        "As a rule of thumb, anything with N^2 or any other exponent is NOT a good algorithm for a site with multiple users.",
-        "If your algorithm slows down exponentially with the input, you're going to want to look for a more efficient way to solve that problem.",
-        "Whenever you’re coding loops within loops, you want to be especially mindful of time complexity.",
-        "Big O Cheat Sheet is the place to look once you can classify your algorithm, like as a 'merge-sort' or a 'quick-sort'.",
-        "<a href='http://bigocheatsheet.com/' target='_blank'>bigocheatsheet.com/</a>",
-        "Princeton Coursera course is NOT for the faint of heart. With examples and practice in Java, this course will cover iterating over data specifically with Java, sorting, and searching algorithms.",
-        "<a href='http://coursera.org/course/algs4partI' target='_blank'>coursera.org/course/algs4partI</a>"
-      ],
-      "challengeSeed": [
-        "-Eiw_-v__Vo"
-      ],
-      "tests": [
-        [
-          "Algorithms expressed exponentially like O(C^N), where C is a constant can work well in certain situations, so you shouldn't avoid them completely.",
-          false,
-          "While they can work in certain small scale situations, they aren't good practice because they will not work larger scale."
-        ],
-        [
-          "All algorithms can be broken down to complete in a static amount of time if you do it effectively.",
-          false,
-          "Not all algorithms can be simplified to that extent, but you should always try to find the simplest way to solve your problem."
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Unos pocos ejemplos",
-          "description": [
-            "La complejidad en tiempo comunmente se estima contando la cantidad de operaciones elementales que un algoritmo efectua (una operación elemental es una cuya ejecución requiere una cantidad de tiempo fijo).",
-            "La complejidad temporal se clasifica por la naturaleza de la función O(n) donde O representa una función matemática para el tiempo que tarda el algoritmo y n representa la cantidad de elementos sobre los que actua el algoritmo.",
-            "La complejidad en el peor caso, es la que más se demoraría con una entrada válida, es la forma más comun de expresar la complejidad.",
-            "Cuando discutes la notación O mayúscula, esta se refiere al peor caso.",
-            "Por ejemplo, si debemos buscar elementos comunes en dos listas, haremos el cálculo suponiendo que los elementos comunes estuvieran justamente al final de cada una de las lista, para no subestimar cuando nos tomaría encontrarlos.",
-            "O(1) - por ejemplo determinar si un número es par o impar, tarda lo mismo sin importar cuanta información haya o cuantos usuarios haya.",
-            "O(log N) - encontrar una palabra en un diccionario (utilizando búsqueda binaria). La búsqueda binaria es un ejemplo de un tipo de algoritmo 'divide y vencerás'.",
-            "O(N) - leer un libro",
-            "O(N log N) - ordenar una plia de cartas (usando ordenamiento por mezcla)",
-            "O(N^2) - revisar que todo lo de una lista de compras está en el carrito de compras",
-            "O(infinito) - lanzar una moneda hasta que caiga cara",
-            "Como regla, todo lo que sea N^2 o cualquier exponente mayor no es un buen algoritmo para un sitio con muchos usuarios.",
-            "Si tu algoritmo se hace más lento de manera exponencial a medida que aumenta la entrada, querrás buscar una forma más eficiente de resolver el problema.",
-            "Siempre que programes ciclos dentro de ciclos, querrás ser especialmente cuidadoso de la complejidad temporal.",
-            "La hoja de copialina de la notación O mayúscula es el lugar donde mirar para clasificar tu algoritmo, como el de un 'ordenamiento por mezcla' o un 'ordenamiento rápido'.",
-            "<a href='http://bigocheatsheet.com/' target='_blank'>bigocheatsheet.com/</a>",
-            "El curso de Coursera de Princeton no es para débiles de corazón. Con ejemplos y prácticas en Java, este curso cubre iteración sobre los datos especifcamente algoritmos de ordenamiento y búsqueda.",
-            "<a href='http://coursera.org/course/algs4partI' target='_blank'>coursera.org/course/algs4partI</a>"
-          ]
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/04-video-challenges/chromedevtools.json b/seed/challenges/04-video-challenges/chromedevtools.json
deleted file mode 100644
index 7bd281024f3075..00000000000000
--- a/seed/challenges/04-video-challenges/chromedevtools.json
+++ /dev/null
@@ -1,369 +0,0 @@
-{
-  "name": "Chrome Developer Tools",
-  "order": 3,
-  "time": "1 hour",
-  "challenges": [
-    {
-      "id": "56b15f15632298c12f315184",
-      "title": "Elements",
-      "description": [
-        "This is basic info and a mini-lesson on the Elements tab of Chrome Dev Tools. Check out more in-depth documentation here: <a href='https://developers.google.com/web/tools/chrome-devtools/inspect-styles/' target='_blank'>developers.google.com/web/tools/chrome-devtools/inspect-styles/</a>",
-        "We will be using the webpage mckellen.com/ per suggestion of Free Code Camp user kmiasko.",
-        "If you right click and select 'Inspect element', you can have access to the elements tab. You can change text, background color, text color, and any other CSS or HTML you'd like!",
-        "These changes don't set up automatically, so don't use this as an IDE or a place to create or edit anything you want to save. You can set up something called 'persistent authoring' to save.",
-        "Cascade, inherit, and other CSS rules still apply, so keep that in mind as you play around. Additionally, overridden styles will be shown as having a strike through them.",
-        "It should also be noted that all of the code you're seeing in this 'tree' is current HTML, not the original when the page loaded. If you use JavaScript or jQuery to change something, it will be updated on this tree.",
-        "Padding, border, and margins are easily inspected and edited using the colorful box on the right or bottom side.",
-        "Please check out the Chrome Dev Tools documentation at <a href='http://developers.google.com/web/tools/chrome-devtools/' target='_blank'>developers.google.com/web/tools/chrome-devtools/</a>"
-      ],
-      "challengeSeed": [
-        "oz32JxUx1Fk"
-      ],
-      "tests": [
-        [
-          "The elements tab is where you should go if you want to edit HTML and CSS of an existing web page.",
-          true
-        ],
-        [
-          "Any changes you make are saved, so it's safe to use as an editing tool.",
-          false,
-          "These changes are temporary, so if you find a great fix or idea, put it into your own documents so you don't lose your progress!"
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Elementos",
-          "description": [
-            "Esta es información básica y una mini-lección sobre la pestaña Elements en las herramientas de desarrollo de Chrome. Echa un vistazo a la documentación más detallada aquí: <a href='https://developers.google.com/web/tools/chrome-devtools/inspect-styles/' target='_blank'>developers.google.com/web/tools/chrome-devtools/inspect-styles/</a>",
-            "Vamos a utilizar la página web mckellen.com/ por sugerencia del usuario de FreeCodeCamp kmiasko.",
-            "Si pulsas con el botón derecho y seleccionas 'Inspeccionar elemento', tendrás acceso a la pestaña elements. ¡Puedes cambiar el texto, el color de fondo, el color de texto y cualquier otra propiedad CSS o elemento HTML que desees!",
-            "Estos cambios no se establecen de forma automática, por lo que no debes usar el inspector como un IDE o como un lugar para crear o editar cualquier cosa que desees guardar. Puedes configurar algo que se llama 'autoría persistente' para salvar.",
-            "Las reglas de CSS como cascada, herencia y otras se aplican, así que tenlo en cuenta a medida que juegas. Además, los estilos anulados se muestran con un tachado sobre ellos. ",
-            "También hay que señalar que todo el código que veas en ese 'árbol' es código HTML actual, no el original que había cuando se cargó la página. Si utilizas jQuery o JavaScript para cambiar algo, esté árbol se actualizará.",
-            "El relleno, los bordes y los márgenes se inspeccionan fácilmente y puedes editarlos usando la caja con colores que encontrarás al lado derecho o en la parte de abajo.",
-            "Por favor, echa un vistazo a la documentación de las herramientas de desarrollo de Chrome en <a href='http://developers.google.com/web/tools/chrome-devtools/' target='_blank'>developers.google.com/web/tools/chrome-devtools/</a>"
-          ]
-        }
-      }
-    },
-    {
-      "id": "56b15f15632298c12f315183",
-      "title": "Network",
-      "description": [
-        "The network tab helps answer questions like 'Which element or part of the page took the longest?' or 'What initiated a request?'.",
-        "The network panel records detailed information about how long each element of your page or app takes to load.",
-        "Every request is recorded in the log, which can be found lower in the network panel.",
-        "If you look at the line on the side, you'll notice a pattern of colors. Those colors each represent a different type of content in the request.",
-        "The longer the line is a certain color, the longer that type of content took in that request. Ultimately, you want short lines, and if any request has long lines, you know what may be slowing down the web page.",
-        "If you click a request in the log, you can get even more detailed information.",
-        "Check out more in-depth documentation here: <a href='https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading' target='_blank'>developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading</a>"
-      ],
-      "challengeSeed": [
-        "dsVbhlBIfz0"
-      ],
-      "tests": [
-        [
-          "The Network tab is a good place to look to determine what requests are being made and how long they're taking.",
-          true
-        ],
-        [
-          "Like all of the tabs in Chrome Developer tools, there are many ways to view and utilize the information it offers.",
-          true
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "red",
-          "description": [
-            "La pestaña network (red) ayuda a responder preguntas como '¿Qué elemento o parte de la página fue el más demorado?' o '¿Qué inició una petición?'",
-            "El panel de red registra información detallada sobre cuánto tarda en cargar cada elemento de su página o aplicación.",
-            "Cada solicitud se registra en la bitácora, que se puede encontrar en la parte inferior del panel de red.",
-            "Si te fijas en la línea al lado derecho, te darás cuenta de un patrón de colores. Cada color representa un tipo diferente de contenido en la solicitud. ",
-            "Cuanto más larga sea la línea de un color determinado, tanto más tiempo tomó ese tipo de contenido en la solicitud. En últimas quieres líneas cortas, y si cualquier solicitud tiene largas líneas, sabes que puede estar ralentizando la página web.",
-            "Si pulsas sobre una solicitud en la bitácora, podrás obtener información más detallada.",
-            "Consulta más documentación detallada aquí: <a href='https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading' target='_blank'>developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading</a>"
-          ]
-        }
-      }
-    },
-    {
-      "id": "56b15f15632298c12f315182",
-      "title": "Sources",
-      "description": [
-        "The 'Sources' tab is most useful for debugging JavaScript. The bigger your project is, the harder it can be to find exactly where a problem occurs.",
-        "You can select different parts of the code to be 'breakpoints', checkpoints that will stop the code at that exact moment.",
-        "There are different breakpoints you can watch for, like for a specific line of code, on a DOM event, a server request called XMLHTTP request, or a JavaScript event.",
-        "When you set a breakpoint, the browser pauses everything when it interprets that line of code or event.",
-        "By slowing everything down and giving yourself a chance to examine what's happening at every spot you've set, you can keep track of exactly what's happening in the page or app.",
-        "Once all of the breakpoints are set, you can step through the code and examine the state of your page or app at every breakpoint.",
-        "Just like with elements, you can live-edit through Dev Tools, but remember to save those changes however you can so your progress isn't lost.",
-        "Check out more in-depth documentation here: <a href='https://developers.google.com/web/tools/chrome-devtools/javascript/add-breakpoints' target='_blank'>developers.google.com/web/tools/chrome-devtools/javascript/add-breakpoints/</a>"
-      ],
-      "challengeSeed": [
-        "CoESC2XGZLg"
-      ],
-      "tests": [
-        [
-          "Debugging can be done easily in the 'Sources' tab of Chrome Dev Tools.",
-          true
-        ],
-        [
-          "These breakpoints are already established, but you can edit where they are in the code.",
-          false,
-          "You set up all of the breakpoints in the debugger."
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Fuentes",
-          "description": [
-            "La pestaña 'fuentes' es más útil para la depuración de JavaScript. Cuanto más grande sea tu proyecto, tanto más difícil resulta encontrar exactamente dónde se produce un problema. ",
-            "Puedes seleccionar diferentes partes del código para ser 'puntos de interrupción', puestos de control que detendrán la ejecución del código en ese preciso momento. ",
-            "Hay diferentes puntos de interrupción que puedes establecer, por ejemplo una línea de código específica, un evento del DOM, una petición del servidor llamada solicitud XMLHTTP, o un evento de JavaScript.",
-            "Cuando estableces un punto de interrupción, el navegador detiene todo cuando llega a interpretar esa línea de código o evento.",
-            "Al reducir la velocidad de todo y darte la oportunidad de examinar lo que está sucediendo en cada punto que hayas configurado, podrás controlar exactamente lo que está sucediendo en la página o aplicación.",
-            "Una vez has establecido todos los puntos de interrupción, puedes recorrer el código y examinar el estado de tu página o aplicación en cada punto de interrupción.",
-            "Al igual que con los elementos, puedes editar en vivo mediante las herramientas de desarrollo, pero recuerda que debes guardar esos cambios para que no pierdas tu progreso.",
-            "Revisa documentación más detallada aquí: <a href='https://developers.google.com/web/tools/chrome-devtools/javascript/add-breakpoints' target='_blank'>developers.google.com/web/tools/chrome-devtools/javascript/add-breakpoints/</a>"
-          ]
-        }
-      }
-    },
-    {
-      "id": "56b15f15632298c12f315181",
-      "title": "Timeline",
-      "description": [
-        "The Timeline panel lets you record and analyze all the activity in your application as it runs. It's the best place to start investigating perceived performance issues in your application.",
-        "Just like you use network to find out how long things take to communicate with the internet and you use sources to find out where something is broken, you can use the timeline to figure out what's going on and how long it takes in even more detail.",
-        "With the timeline you record events using the small circle button. You can record (or capture) stacks, profile js, memory, and paint (CSS).",
-        "When you record (capture) these, it sets them up in small, detailed logs that you can organize many ways to fit you.",
-        "All of this will help you to better understand what's happening in the browser, particularly which events require more browser memory than others.",
-        "When you're using timeline, remember to use this 'clear' button and to start recording before you load the page, depending on what you want to capture.",
-        "You'll notice that when you record JS events, clicking on the title or 'function call' on the left will take you to the document and line of that function using the resource panel.",
-        "Check out more in-depth documentation here: <a href='https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool' target='_blank'>developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool</a>"
-      ],
-      "challengeSeed": [
-        "mxsZlsG8tKA"
-      ],
-      "tests": [
-        [
-          "The 'Timeline' tab records how long it takes APIs to return information.",
-          false,
-          "The 'Timeline' tab is best utilized as a starting place for performance issues that relate to speed and memory usage"
-        ],
-        [
-          "You need to press 'record' to start capturing information when using the 'Timeline' tab.",
-          true
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Línea de tiempo",
-          "description": [
-            "El panel Línea de tiempo te permite grabar y analizar toda la actividad en tu aplicación mientras se ejecuta. Es el mejor lugar para comenzar a investigar los problemas de rendimiento que percibas en tu aplicación. ",
-            "Al igual que usas el panel de red para averiguar cuánto tiempo toman las partes de la página para comunicarse con el Internet y utilizas fuentes para averiguar dónde algo se daña, puedes utilizar la línea de tiempo para averiguar con más detalle lo que está pasando y el tiempo que tarda.",
-            "En el panel línea de tiempo grabas acontecimientos con el pequeño botón circular. Puedes grabar (o capturar) pilas, perfiles js, la memoria y la presentación (CSS). ",
-            "Al grabarlos (capturalos), quedan en pequeños y detallados registros que puedes organizar de muchas maneras para que se adapten a tus necesidades.",
-            "Todo esto te ayudará a entender mejor lo que está pasando en el navegador, en particular cuáles eventos requieren más memoria del navegador.",
-            "Cuando uses la línea de tiempo, recuerda que debes utilizar el botón 'limpiar' (clear) para iniciar la grabación y antes de cargar la página, dependiendo de lo que desees capturar.",
-            "Te darás cuenta de que cuando grabas eventos JS, al pulsar en el título o en una 'llamada a una función' al lado izquierdo, te llevará al documento y a la línea de esa función en el panel de recursos. ",
-            "Revisa documentación más detallada aquí: <a href='https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool' target='_blank'>developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool</a>"
-          ]
-        }
-      }
-    },
-    {
-      "id": "56b15f15632298c12f315180",
-      "title": "Profiles",
-      "description": [
-        "The Profiles panel lets you profile the execution time and memory usage of a web app or page. This primarily applies to the JavaScript running on your page or app.",
-        "There are three types of profiles you can collect: CPU profile, HEAP snapshot, and HEAP profile. HEAP profiles have more to do with memory usage, while a CPU profile has more to do with JavaScript performance.",
-        "A profiler called V8 is used while your code runs to pinpoint what in the JavaScript takes the most time, making it easy to optimize your code.",
-        "Each of these profiles can be viewed on the left, and you can take multiple profiles of each. Overall, the profiles tab is helpful when optimizing code.",
-        "Check out more in-depth documentation here: <a href='https://developers.google.com/web/tools/chrome-devtools/memory-problems/allocation-profiler' target='_blank'>developers.google.com/web/tools/chrome-devtools/memory-problems/allocation-profiler</a>"
-      ],
-      "challengeSeed": [
-        "fvfqnFYXF_8"
-      ],
-      "tests": [
-        [
-          "When you take a profile or a snapshot, the information that's collected will be viewable in only one format.",
-          false,
-          "Like all of the tabs in Chrome Dev Tools, there are multiple ways to view and interpret information."
-        ],
-        [
-          "After hitting 'record', consider refreshing the page depending on what data you are trying to capture. ",
-          true
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Perfiles",
-          "description": [
-            "El panel Perfiles te permite perfilar el tiempo de ejecución y el uso de memoria de una aplicación web o de una página. Esto se aplica principalmente a la ejecución de JavaScript en su página o aplicación. ",
-            "Hay tres tipos de perfiles que se pueden recolectar: el perfil de la CPU, instantáneas de la memoria con estructura montón (Heap), y el perfil de la memoria con estructura montón. Los perfiles de memoria en estructura montón tienen más que ver con el uso de memoria, mientras que un perfil de la CPU tiene más que ver con el rendimiento de JavaScript. ",
-            "Un perfilador llamado V8 se usa mientras se ejecuta el código para identificar lo que en el JavaScript toma mucho tiempo, facilitándote de esta forma optimizar tu código.",
-            "Cada uno de estos perfiles se puede ver a la izquierda, y se puede tomar múltiples perfiles de cada uno. En general, la pestaña de perfiles es muy útil cuando deseas optimizar tu código. ",
-            "Revisa documentación más detallada aquí: <a href='https://developers.google.com/web/tools/chrome-devtools/memory-problems/allocation-profiler' target='_blank'>developers.google.com/web/tools/chrome-devtools/memory-problems/allocation-profiler</a>"
-          ]
-        }
-      }
-    },
-    {
-      "id": "56b15f15632298c12f31517f",
-      "title": "Resources",
-      "description": [
-        "The Resources panel lets you inspect resources that are loaded in the inspected page including IndexedDB or Web SQL databases, local and session storage, cookies, Application Cache, images, fonts, and style sheets.",
-        "You can view and edit all of this information within the browser.",
-        "As you get into more advanced web building, play around with the resources panel and see how it can help you understand the requirements of your app and page in real time.",
-        "Check out more in-depth documentation here: <a href='http://developers.google.com/web/tools/iterate/manage-data/index' target='_blank'>developers.google.com/web/tools/iterate/manage-data/index</a>"
-      ],
-      "challengeSeed": [
-        "Po2cW_K0ZYE"
-      ],
-      "tests": [
-        [
-          "The 'Resources' tab helps you view external resources such as SQL and cookies.",
-          true
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Recursos",
-          "description": [
-            "El panel de Recursos te permite inspeccionar los recursos que se cargan en la página, incluyendo IndexedDB o bases de datos SQL Web, almacenamiento local y de sesión, las galletas (cookies), memoria caché de aplicaciones, imágenes, fuentes y hojas de estilo.",
-            "Puedes ver y editar toda esta información dentro del navegador.",
-            "A medida que vayas construyendo aplicaciones web más avanzadas, juega con el panel de recursos y verás cómo te ayudará a entender los requisitos de tu aplicación y de tu página en tiempo real.",
-            "Revisa documentación más detallada aquí: <a href='http://developers.google.com/web/tools/iterate/manage-data/index' target='_blank'>developers.google.com/web/tools/iterate/manage-data/index</a>"
-          ]
-        }
-      }
-    },
-    {
-      "id": "56b15f15632298c12f31517e",
-      "title": "Audits",
-      "description": [
-        "The Audit tool walks you through how to improve your page step by step.",
-        "In this video, we use this tool on the quote generator that I made as a front end development project.",
-        "The suggestions you'd get using the Audit tool are generated automatically.",
-        "This is important to keep in mind so you can contextualize them with your other knowledge of your site.",
-        "Sometimes, it might be right, but sometimes, for your situation it might be wrong.",
-        "Use this tool when you want to improve your site or app, but you aren't sure where to start."
-      ],
-      "challengeSeed": [
-        "Z4F0sLwMP8g"
-      ],
-      "tests": [
-        [
-          "The Audit tab will suggest ways to improve a webpage.",
-          true
-        ],
-        [
-          "While you don't NEED to do everything suggested, you probably should.",
-          false,
-          "If you don't understand an error or suggestion, do more research before making major changes."
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Las auditorías",
-          "description": [
-            "La herramienta de auditoría te guía para mejorar tu página paso a paso.",
-            "En este vídeo, se utiliza esta herramienta con un generador de citas aleatorias desarrollado como uno de los proyectos de desarrollo de interfaces.",
-            "Las sugerencias que se ven, se generan automáticamente con la función de auditoría.",
-            "Es importante tenerlas en cuenta para contextualizarlos con el resto de conocimiento que tienes de tu sitio.",
-            "A veces, puede ser que sea lo acertado, pero en ocasiones, por tu situación las sugerencias que da son equivocadas.",
-            "Usa esta herramienta cuando desees mejorar tu sitio o aplicación, pero no sepas por dónde empezar."
-          ]
-        }
-      }
-    },
-    {
-      "id": "56b15f15632298c12f31517d",
-      "title": "Console",
-      "description": [
-        "The Console panel provides two primary functions: logging diagnostic information in the development process and providing a shell prompt which can be used to interact with the document and Dev Tools.",
-        "When using the console, you can view raw or structured data by using standard JS statements and console-specific commands.",
-        "An example of structured data would be the information returned from an API in JSON. I used this a lot when I was building my first front end development projects for Free Code Camp.",
-        "You should know that messages stack up, and you can clear them by typing and entering 'clear()'. You can also save the log by selecting 'Preserve Log'.",
-        "There are different commands that will log differently, like console.log() for basic logging, console.error() & console.warn() for 'eye catching stuff'.",
-        "The console can track exceptions, which basically means when something goes wrong. It can even pause the code during those exceptions, a function that you might remember from the 'Source' tab.",
-        "Check out more in-depth documentation here: <a href='https://developers.google.com/web/tools/chrome-devtools/console/' target='_blank'>developers.google.com/web/tools/chrome-devtools/console/</a>"
-      ],
-      "challengeSeed": [
-        "zMg3PO8MtyI"
-      ],
-      "tests": [
-        [
-          "The console in Chrome Dev Tools has many similarities to the console of a computer.",
-          true
-        ],
-        [
-          "This video is in-depth and covers everything you need to know.",
-          false,
-          "Please review the documentation linked in the description."
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Consola",
-          "description": [
-            "El panel de la consola ofrece dos funciones principales: registro de datos de diagnóstico en el proceso de desarrollo y proporcionar un intérprete de órdenes que puedes utilizar para interactuar con el documento y las Herramientas de desarrollo",
-            "Al utilizar la consola, puedes ver los datos en bruto o estructurados mediante instrucciones estándar JS y órdenes específicas para la consola.",
-            "Un ejemplo de datos estructurados sería la información JSON que devuelva una API. Muy útil cuando se construyen las primeras aplicaciones de desarrollo de interfaces para FreeCodeCamp.",
-            "Debes saber que los mensajes se apilan y que puedes limpiarlos escribiendo <code>clear()</code>. También puedes guardar la bitácora seleccionando 'Preserve Log'. ",
-            "Hay diferentes órdenes que registrarán en bitácoras de manera diferente, como console.log() para registrar información básica, console.error() y console.warn() para registrar en bitácoras 'información llamativa'.",
-            "La consola puede realizar un seguimiento de excepciones, que básicamente registra cuando algo sale mal. Puede incluso hacer una pausa en el código durante esas excepciones, función que posiblemente recuerdes de la pestaña 'Fuente'. ",
-            "Revisa documentación más detallada aquí: <a href='https://developers.google.com/web/tools/chrome-devtools/console/' target='_blank'>developers.google.com/web/tools/chrome-devtools/console/</a>"
-          ]
-        }
-      }
-    },
-    {
-      "id": "56b15f15632298c12f31517c",
-      "title": "Summary",
-      "description": [
-        "1.) Chrome Dev Tools are awesome, and the more you can dive in and try to use them, the faster your skill level will grow.",
-        "2.) Use the documentation, even if you've never read documentation before: <a href='http://developers.google.com/web/tools/chrome-devtools/' target='_blank'>developers.google.com/web/tools/chrome-devtools/</a>",
-        "3.) Once you start to get comfortable in one tab, stretch yourself. Working effectively with all of the tabs will serve you exponentially more than sticking in your comfort zone."
-      ],
-      "challengeSeed": [
-        "ssU_F-bbQyk"
-      ],
-      "tests": [
-        [
-          "Device mode allows you to view your page in different sizes of screens with different network connections.",
-          true
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Resumen",
-          "description": [
-            ", Las herramientas de desarrollo de Chrome son impresionantes, y cuanto más te puedas sumergir y tratar de utilizarlas, más rápido aumentará tu nivel. ",
-            ", Utiliza la documentación, incluso si nunca has leído documentación antes: <a href='http://developers.google.com/web/tools/chrome-devtools/' target='_blank'>developers.google.com/web/tools/chrome-devtools/</a> ",
-            ", Una vez que comiences a sentirte cómodo en una pestaña, rétate aprendiendo a usar una diferente. Trabajar eficazmente con todas las pestañas te servirá exponencialmente más que pegarte en tu zona de confort."
-          ]
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/04-video-challenges/computer-basics.json b/seed/challenges/04-video-challenges/computer-basics.json
deleted file mode 100644
index ca7582fd28b4bf..00000000000000
--- a/seed/challenges/04-video-challenges/computer-basics.json
+++ /dev/null
@@ -1,1247 +0,0 @@
-{
-  "name": "Computer Basics",
-  "order": 0,
-  "time": "2 hours",
-  "challenges": [
-    {
-      "id": "bd7128d8c441eddfbeb5bddf",
-      "title": "The 4 Basic Parts of a Computer",
-      "description": [
-        "At the very least, a machine needs these four basic parts to be considered a computer.",
-        "Today we're going to talk about the basics of computer hardware.",
-        "Computers are made up of 4 basic parts: the input, output, CPU, and memory.",
-        "The input is what you're putting into the computer.",
-        "Think about mouse, keyboard, microphone, any way you're getting data into the computer.",
-        "The output is what you're watching on your monitor or listening to on your speakers.",
-        "These can both be any format like text, numbers, videos, images, what have you, it doesn't matter.",
-        "CPU stands for central processing unit, and that's what we all think of when we think of a computer.",
-        "It's what does the functions, it's what runs the software, it manipulates the data.",
-        "The memory is where we store data and information.",
-        "Now, the CPU has exclusive access to this memory.",
-        "You can't get to the memory from the input or the output without the use of the CPU.",
-        "So, just to review, we've got 4 basic parts of the computer: the input, the output, CPU, and memory."
-      ],
-      "challengeSeed": [
-        "q7tlgZg4Q1o"
-      ],
-      "tests": [
-        [
-          "The computer only has 3 basic parts.",
-          false,
-          "The computer has 4 basic parts: input, output, CPU, and memory"
-        ],
-        [
-          "CPU stands for Central Processing Unit.",
-          true
-        ],
-        [
-          "All parts can access the memory",
-          false,
-          "Only the CPU has access to the memory"
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Las 4 partes básicas de un computador",
-          "description": [
-            "Una máquina necesita por lo menos cuatro partes básicas para ser considerada un computador.",
-            "Hoy vamos a hablar acerca de conceptos básicos de hardware.",
-            "Los computadores se componen de 4 partes básicas: Los dispositivos de entrada, los dispositivos de salida, la CPU y la memoria.",
-            "Los dispositivos de entrada te permiten ingresar información al computador.",
-            "Piensa en el ratón, teclado, micrófono, con todos estos estás ingresando información al computador.",
-            "Son ejemplos de dispositivos de salida tu monitor donde ves esto, o los altavoces que producen los sonidos que escuchas.",
-            "La información que entra y sale por esos dispositivos puede estar en diversos formatos como texto, números, vídeos, imágenes, lo que tengas.",
-            "CPU significa unidad central de procesamiento, y es en lo que todos pensamos cuando pensamos en un computador.",
-            "Es lo que lo hace funcionar, es lo que ejecuta el software, es lo que manipula los datos.",
-            "La memoria es donde almacenamos los datos y la información.",
-            "Ahora, la CPU tiene acceso exclusivo a esta memoria.",
-            "No se puede llegar a la memoria desde la entrada o desde la salida sin el uso de la CPU.",
-            "Por lo tanto, sólo para repasar, tenemos 4 partes básicas de la computadora: los dispositivos de entrada, los dispositivos de salida, la CPU y la memoria."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7127d8c441eddfbeb5bddf",
-      "title": "More Computer Hardware",
-      "description": [
-        "In this video we cover the basic functions of a motherboard, expansion slots, and power supply.",
-        "Let's quickly review - the 4 basic parts of a computer are the input, like the mouse or the keyboard, the output, which is seen on the monitor or heard on the speakers, the CPU, the central processing unit, and the memory.",
-        "Now memory can be short term memory, called RAM, or longer term memory.",
-        "That's usually as a hard drive, but it can also be a CD-ROM or a flash drive, anything like that.",
-        "In addition to those four basic parts, we have three more things we're going to discuss today: the motherboard, expansion cards, and power supply.",
-        "The motherboard is what connects everything.",
-        "While the data's flying around over here trying to figure out where to go, the motherboard helps route it so it goes to the right place.",
-        "Expansion cards are sound cards, video cards, that kind of thing that can really up your experience as a user.",
-        "Power supply is, as it sounds, what gets power to the computer.",
-        "It's usually that part that has a fan on it to keep it from overheating.",
-        "So let's do a quick review.",
-        "In addition to the four basic parts of input, output, CPU, and memory, we also usually have a motherboard, expansion cards, and a power supply."
-      ],
-      "challengeSeed": [
-        "xj9mFD71Vfc"
-      ],
-      "tests": [
-        [
-          "The power supply isn't a necessary part of a computer since it's not one of the 4 main parts.",
-          false,
-          "The computer needs power!"
-        ],
-        [
-          "A motherboard connects all of the working parts in a computer.",
-          true
-        ],
-        [
-          "Memory is usually categorized into 3 parts.",
-          false,
-          "Only 2 parts, RAM and long term memory such as a hard drive"
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Más Hardware",
-          "description": [
-            "En este video cubrimos las funciones básicas de una placa base, tarjetas de expansión, y la fuente de poder.",
-            "Vamos a revisar rápidamente - las 4 partes básicas de un computador son dispositivos de entrada, como el ratón o el teclado, dispositivos de salida, monitor o altavoces, la CPU, la unidad central de procesamiento, y la memoria.",
-            "Ahora la memoria puede ser memoria a corto plazo, llamada memoria RAM, o memoria de largo plazo.",
-            "Eso es por lo general un disco duro, pero también puede ser un CD-ROM o una unidad flash, o algo por el estilo.",
-            "Además de esas cuatro partes básicas, trataremos tres partes más hoy: La placa base, las tarjetas de expansión, y la fuente de poder",
-            "La placa base es lo que conecta todo.",
-            "Si bien los datos vuelan de un lado a otro tratando de averiguar a dónde ir, la placa base que ayuda a establecer rutas para que lleguen al lugar correcto.",
-            "Las tarjetas de expansión son las tarjetas de sonido, las tarjetas de vídeo, ese tipo de cosas que pueden mejorar tu experiencia como usuario.",
-            "La fuente de poder es, como suena, lo que le da energía a la computadora.",
-            "Por lo general es la parte que tiene un ventilador en él para evitar que se sobrecaliente.",
-            "Así que vamos a hacer un repaso rápido.",
-            "Además de las cuatro partes básicas dispositivos de entrada, dispositivos de salida, CPU, y la memoria, también por lo general tenemos una placa base, las tarjetas de expansión, y una fuente de poder."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7129d8a441eddfbeb5bddf",
-      "title": "Chips and Moore's Law",
-      "description": [
-        "We discuss what constitutes a chip and why technology gets cheaper every year.",
-        "In this video we are going to be talking about chips and something called Moore's Law.",
-        "You've probably noticed over the last 10 or so years, if you're going to go buy an MP3 player, you can get a lot more storage for a lot lower price.",
-        "You probably have even done the thing where you're at the store and you think, \"Well, I can get one now, or I could wait 6 months and see how far the price has dropped\", which might sound ridiculous but this is actually a trend that's been happening for a long time.",
-        "Let's talk about what makes a chip.",
-        "A chip is full of these little things called transistors, which are switches that can either be a 1 or a 0 (noticing a theme here?).",
-        "All of these transistors fit onto a chip, and that's how it stores information.",
-        "What makes these chips larger/faster is the amount of transistors on a single chip.",
-        "Moore's Law is the observation that the amount of transistors fit on each chip has doubled every two years since 1965.",
-        "This is important because it's making technology more affordable and accessible."
-      ],
-      "challengeSeed": [
-        "IDsEEMkG9uY"
-      ],
-      "tests": [
-        [
-          "Chips have transistors, little switches that can store a 1 or a 0.",
-          true
-        ],
-        [
-          "Moore's Law is the observation that technology doubles in speed every year.",
-          false,
-          "Moore's Law is the observation that the number of transistors per chip doubles every 2 years)."
-        ],
-        [
-          "Moore's Law has slowed down in recent years.",
-          true,
-          "As of 2015, the pace of Moore's law has indeed slowed. Brian Krzanich, CEO of Intel, announced that 'our cadence today is closer to two and a half years than two.'"
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Chips y la Ley de Moore",
-          "description": [
-            "Discutiremos lo que constituye un chip y por qué la tecnología se vuelve más barata cada año.",
-            "En este video vamos a estar hablando sobre chips y algo que se llama la Ley de Moore.",
-            "Probablemente has notado en los últimos 10 años más o menos, que si vas a ir a comprar un reproductor de MP3, podrás obtener cada vez más espacio de almacenamiento por un precio cada vez más bajo.",
-            "Es probable que incluso hayas estado en la tienda y hayas pensado, \"Bueno, puedo conseguir uno ahora, o podría esperar 6 meses y ver hasta qué punto el precio ha bajado\", lo que podría sonar ridículo pero esto es en realidad una tendencia que ha estado ocurriendo durante mucho tiempo. ",
-            "Vamos a hablar de como está hecho un chip.",
-            "Un chip está lleno de estas pequeñas cosas llamadas transistores, que son interruptores que pueden ser un 1 o un 0 (¿ves un tema aquí?).",
-            "Todos estos transistores caben en un chip, y es así como se almacena la información.",
-            "Lo que hace que estos chips sean más grandes o más rápidos es la cantidad de transistores en un solo chip.",
-            "La Ley de Moore es la observación de que la cantidad de transistores que caben en un chip se ha duplicado cada dos años desde 1965.",
-            "Esto es importante porque hace que la tecnología sea más económica y accesible."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7126d8c441eddfbeb5bddf",
-      "title": "Intro to Binary Code",
-      "description": [
-        "What binary looks like, and what it can mean.",
-        "0's and 1's can turn be interpreted into far more complex data.",
-        "Today we're going to talk a little bit about binary code.",
-        "Binary code is a really simple computer language where there are only 1's and 0's, that are either on or off, 1 being on and 0 being off.",
-        "Those 1's and 0's can be pretty much anything, but generally they are just numbers, letters, and symbols.",
-        "We're going to go into how you decode a number in binary, but as you can probably guess, translating binary can be done with a quick Google search.",
-        "The most important part of this is you understand the concept that even simple things like 1's and 0's can translate into something really complex that is the basis for all of the computer languages that exist today."
-      ],
-      "challengeSeed": [
-        "veugT7A9psY"
-      ],
-      "tests": [
-        [
-          "1's and 0's are how we talk about little switches being on and off.",
-          true
-        ],
-        [
-          "1 means on, and 0 means off.",
-          true
-        ],
-        [
-          "There are some things which cannot be translated into binary.",
-          false,
-          "everything can be expressed through binary code!"
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Introducción a código binario",
-          "description": [
-            "Cómo se ve lo binario, y lo que puede significar.",
-            "Los 0s y 1s pueden interpretarse como datos mucho más complejos.",
-            "Hoy vamos a hablar un poco sobre el código binario.",
-            "El código binario es un lenguaje para el computador muy simple, donde sólo hay secuencias de 1s y 0s, que representan estado encendido o estado apagado, siendo 1 encendido y el 0 apagado.",
-            "Aquellos 1s y 0s pueden ser casi cualquier cosa, pero por lo general son sólo números, letras y símbolos.",
-            "Vamos a revisar cómo decodificar un número en binario, pero como podrás adivinar, la traducción binaria se puede hacer con una rápida búsqueda en Google.",
-            "La parte más importante de esto es que entiendas el concepto de que incluso cosas simples como 1s y 0s se pueden traducir en algo muy complejo, que es la base para todos los lenguajes de programación existentes en la actualidad."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7125d8c441eddfbeb5bddf",
-      "title": "Decoding a Binary Number",
-      "description": [
-        "In this video, we decode a number written in binary notation.",
-        "Let's talk about the binary numeral system, also known as a bunch of 1's and 0's over and over again.",
-        "We're going to start by labeling, starting backwards, how many numbers there are.",
-        "(In this video there are 7, but we start at 0, so we only get up to 6.) Pretty straightforward.",
-        "The next step is to take 2 to the power of whatever place it is, a 2 to the 0, 2 to the 1, all the way up to the largest placeholder.",
-        "Then, all we have to do is fill in some mathematical blanks by completing the exponential 2 problems.",
-        "If there is a 1, we keep that number (the two to the exponent solution) and add it to other \"1\" or \"on\" numbers.",
-        "If it's a 0, we disregard it.",
-        "In this video, our number adds up to 75."
-      ],
-      "challengeSeed": [
-        "xXLj5MbrI44"
-      ],
-      "tests": [
-        [
-          "1 == on and 0 == off",
-          true
-        ],
-        [
-          "Not all numbers can be expressed through binary numeral notation.",
-          false,
-          "All numbers can!"
-        ],
-        [
-          "If we have the opportunity to include base 2 to every given power, we can create any number.",
-          true
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "decodificar un número binario",
-          "description": [
-            "En este vídeo, decodificaremos un número escrito en notación binaria.",
-            "Hablemos sobre el sistema de numeración binario, también conocido como un montón de 1s y 0s una y otra vez.",
-            "Vamos a empezar por la numeración de las posiciones, observando de atrás hacia adelante, comenzando en 0 hasta llegar a la cantidad de dígitos del número menos uno.",
-            "(En este video hay 7, pero como comenzamos a numerar en 0, llegamos hasta 6.) Muy claro.",
-            "El siguiente paso es tomar 2 a la potencia de la posición, un 2 a la 0, 2 a la 1, y así sucesivamente hasta la posición de mayor numeración.",
-            "Entonces, todo lo que tenemos que hacer es llenar algunos espacios en blanco completando las potencias de 2.",
-            "Si hay un 1, dejamos el número (2 a la potencia de la posición) y lo agregamos a los números de otras posiciones que estén en  \"1\" o \"encendidas\".",
-            "Si es un 0, hacemos caso omiso del número de esa posición.",
-            "En este video, la suma de los números da 75."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7122d8c441eddfbeb5bddf",
-      "title": "Binary Bytes",
-      "description": [
-        "Binary does more than express numbers - through bytes, it can symbolize all alphanumeric symbols, which can then be interpreted into more complex code.",
-        "Let's talk about the most basic level that a computer can understand other languages like JavaScript.",
-        "The most basic thing is a bit, up or down, 1 or 0.",
-        "After that there's a byte, 8 bits.",
-        "All numbers (255 and less), letters, and symbols can be translated into bytes that the computer can understand.",
-        "So, all of the numbers, letters, and symbols in your JavaScript can be translated.",
-        "There are a lot of languages that computers can work with, and what I want you to get away from this video is that all data in your computer boils down to binary bytes."
-      ],
-      "challengeSeed": [
-        "wr7H6oUwYUU"
-      ],
-      "tests": [
-        [
-          "All digits, letters, and symbols have a binary byte translation.",
-          true
-        ],
-        [
-          "It's good practice to memorize these.",
-          false,
-          "You can just look these up as needed."
-        ],
-        [
-          "Everything can be expressed in binary, even pictures, sound, and video",
-          true
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Bytes en binario",
-          "description": [
-            "En binario se puede hacer más que representar números - mediante bytes, puede simbolizar todos los símbolos alfanuméricos, los cuales pueden ser interpretados en códigos más complejos",
-            "Vamos a hablar sobre el nivel más básico que un computador puede comprender otros lenguajes como JavaScript.",
-            "Lo más básico es un bit, arriba o abajo, 1 ó 0.",
-            "Después de eso hay un byte de 8 bits.",
-            "Todos los números (255 y menos), las letras y símbolos se pueden traducir en bytes que el computador puede entender.",
-            "Por lo tanto, todos los números, letras y símbolos en su código JavaScript se puede traducir.",
-            "Hay una gran cantidad de lenguajes con los cuales los computadores pueden operar, y lo que quiero que te quede de este video es que todos los datos en tu computador se reducen a bytes binarios."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7124d8c441eddfbeb5bddf",
-      "title": "How To Measure Data Size",
-      "description": [
-        "How the size/amount of data is measured, starting from a bit and going all the way up to a petabyte.",
-        "Today we're going to be talking about Data Size.",
-        "The smallest size we can have is called a bit.",
-        "That bit can only be a 1 or a 0, and that goes back go binary we've been talking about.",
-        "After that, we've got a Nibble, which is 4 bits, which isn't common but it's adorable.",
-        "The Byte, which is very common, is 8 bits.",
-        "A lot of things are expressed in binary Bytes.",
-        "After we get past the tiny bit and the small Byte, we get bigger really fast.",
-        "The next step up is a Kilobyte, 1024 Bytes, or 8192 bits.",
-        "After that there's Megabyte, or 1024 Bytes to the power of two.",
-        "Then it's Gigabyte, 1024 Bytes to the power of three; Terabyte, 1024 Bytes to the power of 4, and Petabyte, 1024 to the power of 5.",
-        "These get much bigger really quickly!"
-      ],
-      "challengeSeed": [
-        "_uWzpyr_5qk"
-      ],
-      "tests": [
-        [
-          "A Byte is the smallest possible amount of data.",
-          false,
-          "A Byte is 8 bits."
-        ],
-        [
-          "A bit is the smallest possible amount of data.",
-          true
-        ],
-        [
-          "A Kilobyte is 1024 Bytes.",
-          true
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Cómo medir el tamaño de los datos",
-          "description": [
-            "¿Cómo se mide el tamaño/cantidad de datos, a partir de un bit y continuando hasta un petabyte.",
-            "Hoy vamos a estar hablando de tamaño de los datos.",
-            "El tamaño más pequeño que podemos tener se llama un <em>bit</em>.",
-            "Ese bit sólo puede ser un 1 o un 0, y se refiere a la codificación binaria de la que hemos estado hablando.",
-            "Después de eso, tenemos un <em>nibble</em>, que consta de 4 bits, que no es común, pero es adorable.",
-            "El <em>byte</em>, que es muy común, se trata de 8 bits.",
-            "Una gran cantidad de cosas se expresan en bytes binarios.",
-            "Después de pasar por el bit y el byte, empezamos a crecer en tamaño realmente rápido.",
-            "El siguiente paso es un kilobyte, 1024 bytes, o 8192 bits.",
-            "Después de eso no hay Megabyte, o 1024 bytes a la potencia de dos.",
-            "Entonces es Gigabyte, 1024 Bytes a la tercera potencia; Terabyte, 1024 bytes a la cuarta potencia y petabyte que es 1024 a la quinta potencia.",
-            "!Crecieron realmente rápidamente!"
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7123d8c441eddfbeb5bddf",
-      "title": "Measuring Data Speed",
-      "description": [
-        "Data speed and data size are measured differently.",
-        "In this video, we cover how data speed is measured.",
-        "Let's talk about data speed.",
-        "Data speed, unlike data size, is usually measured in bits per second, whereas data size is usually measured in bytes.",
-        "Once we start talking exponentially, that makes a really big difference.",
-        "How we talk about speed really depends on what we're talking about.",
-        "In audio download, we talk about kilobits per second.",
-        "In internet, we use megabits per second.",
-        "In network speed, we talk about gigabits per second (one billion bits per second!).",
-        "The main takeaway here is that speed is usually measured in bits per second and size is measured in bytes.",
-        "Additionally, if you have an internet speed that says however many bits per second, keep in mind they are talking about something 8 times less than bytes, how you are thinking about data."
-      ],
-      "challengeSeed": [
-        "Ulln8JIYzqY"
-      ],
-      "tests": [
-        [
-          "Data speed is measured in bits per second.",
-          true
-        ],
-        [
-          "Data size is measured in bits.",
-          false,
-          "Size is bytes and speed is bits per second."
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "medición de la velocidad de datos",
-          "description": [
-            "La velocidad de datos y el tamaño de los datos se miden de manera diferente.",
-            "En este video, cubrimos cómo se mide la velocidad de los datos.",
-            "Hablemos sobre la velocidad de datos.",
-            "La velocidad de datos, a diferencia de tamaño de los datos, por lo general se mide en bits por segundo, mientras que el tamaño se mide en bits.",
-            "Una vez que empecemos a hablar de forma exponencial, esto hará una gran diferencia.",
-            "Cuando hablemos de velocidad dependerá del contexto al que nos refiramos.",
-            "En descarga de audio, hablamos de kilobits por segundo.",
-            "En Internet, utilizamos megabits por segundo.",
-            "En la velocidad de red, hablamos de gigabits por segundo (¡mil millones de bits por segundo!).",
-            "La conclusión principal es que la velocidad se mide generalmente en bits por segundo mientras que el tamaño se mide en bytes.",
-            "Además, si tienes una velocidad de internet de cierta cantidad de bits por segundo, ten en cuenta que te están hablando de algo que es la octava parte de la cantidad en bytes, que es la manera típica como mides tamaños de datos."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7121d8c441eddfbeb5bddf",
-      "title": "Types of Computers",
-      "description": [
-        "This video covers the basics of supercomputers, servers, workstations, PCs, and microcontrollers.",
-        "Let's discuss the different types of computers.",
-        "The biggest type is called a super computer, a computer with lots of CPUs that work on the same problem at the same time using a technique called parallel processing.",
-        "The next type is called a server.",
-        "A server holds and accesses lots of data or programs.",
-        "Free Code Camp is hosted on a server which stores all of that information.",
-        "Let's talk now about a workstation computer - a computer that may look similar to a personal computer, but has a lot more power and is a lot pricier.",
-        "Toy Story was built on workstation computers.",
-        "Now, personal computers are by far the most common.",
-        "Maybe you've heard \"I'm a Mac!\" or \"I'm a PC!\", something indicating they're different, but really my own personal MacBook is still a PC, a personal computer.",
-        "It's both a Mac and a PC.",
-        "The last type of computer we'll talk about is a microcontroller, the type of computer you might have in your car that is really good at a small specialized task, but wouldn't be used the same way a PC would be."
-      ],
-      "challengeSeed": [
-        "rZnaB8d_ZOw"
-      ],
-      "tests": [
-        [
-          "The most common type of computer is a Personal Computer, a PC.",
-          true
-        ],
-        [
-          "What makes Supercomputers 'super' is when multiple CPUs work on one problem, called parallel processing.",
-          true
-        ],
-        [
-          "Microcontrollers and workstation computers can perform roughly the same tasks.",
-          false,
-          "A microcontroller can only perform a small specialized task while a workstation computer has a lot of power, though also specialized."
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Tipos de Computadores",
-          "description": [
-            "Este video cubre los conceptos básicos de los supercomputadores, servidores, estaciones de trabajo, PC y microcontroladores.",
-            "Vamos a discutir los diferentes tipos de computadores.",
-            "El tipo más grande se llama un super computador, un computador con muchas CPUs que trabajan en el mismo problema, al mismo tiempo usando una técnica llamada de procesamiento en paralelo.",
-            "El siguiente tipo se llama un servidor.",
-            "Un servidor guarda y accede a una gran cantidad de datos o programas.",
-            "FreeCodeCamp se encuentra alojado en un servidor que almacena toda esa información.",
-            "Vamos a hablar ahora acerca de una estación de trabajo - un equipo que puede ser similar a un computador personal, pero mucho más potente y costoso.",
-            "Toy Story fue construido en estaciones de trabajo.",
-            "Ahora, los computadores personales son, por mucho, los más comunes.",
-            "Tal vez has oído \"¡Soy un Mac!\" o \"¡Soy un PC!\", Algo que indica que son diferentes, pero en realidad mi propio MacBook personal sigue siendo un PC, un computador personal.",
-            "Es a la vez un Mac y un PC.",
-            "El último tipo de equipo del que hablaremos es un microcontrolador, el tipo de equipo que puedes tener en tu carro que es realmente bueno en una pequeña tarea especializada, pero no se utilizaría la misma forma que un PC."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7120d8c441eddfbeb5bddf",
-      "title": "More on the Motherboard",
-      "description": [
-        "A little more detail on what constitutes a motherboard and what functionalities are standard in PCs.",
-        "Today we're going to be talking more about the motherboard.",
-        "We mentioned it briefly in previous videos, but we'll give some more detail today.",
-        "What makes a motherboard is the connection between the CPU and the memory - if it doesn't do that, it's not a motherboard.",
-        "But, most motherboards do a lot more than that.",
-        "Primarily, they have expansion slots and ports.",
-        "Expansion slots are where you put anything that can increase the performance of a computer without putting more load on the CPU.",
-        "For example, a graphics or a sound card would up the user experience by giving better sound or video quality, but it wouldn't slow down the computer.",
-        "A Network Interface Card could also go in an expansion slot.",
-        "This would help your computer connect with the networks around it, something we'll talk about more in upcoming videos.",
-        "PC and Express cards are primarily found in laptops, and Express cards are taking over due to their smaller size.",
-        "In addition to expansion slots, motherboards have ports.",
-        "On your computer, you probably know there's a place to connect USB, FireWire, SD card, Ethernet, even an audio plug-in to listen through headphones.",
-        "These are all considered ports, a place on the motherboard where you can connect the CPU to some outside source to either get or give information."
-      ],
-      "challengeSeed": [
-        "KUmi_KBLMQY"
-      ],
-      "tests": [
-        [
-          "A motherboard must connect the CPU, the memory, and the network.",
-          false,
-          "A motherboard is a motherboard as long as it connects the CPU and the memory."
-        ],
-        [
-          "Expansion slots allow users to add capabilities to a computer.",
-          true
-        ],
-        [
-          "Ports help the computer access information.",
-          true
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Más sobre la placa base",
-          "description": [
-            "Un poco más de detalle sobre lo que constituye una placa base y sus funciones estándar en un computador.",
-            "Hoy vamos a hablar más sobre la placa base.",
-            "La hemos mencionado brevemente en videos anteriores, pero vamos a dar algunos detalles más hoy.",
-            "Lo que hace una placa base es la conexión entre la CPU y la memoria - si no lo hace, no es una placa base.",
-            "Sin embargo, la mayoría de placas base hacen mucho más que eso.",
-            "En primer lugar, tienen ranuras de expansión y puertos.",
-            "Las ranuras de expansión es donde pones tarjetas de expansión que aumentan el rendimiento o la funcionalidad de un equipo sin poner más carga en la CPU.",
-            "Por ejemplo, una tarjeta graficadora o una tarjeta de sonido mejora la experiencia del usuario con más calidad de vídeo o de sonido o vídeo, pero sin hacer más lento el computador.",
-            "Una tarjeta de red también puede ir en una ranura de expansión.",
-            "Esto ayudaría a tu computador a conectarse a las redes de alrededor, algo de lo que hablaremos más en los próximos vídeos.",
-            "Las tarjetas ExpressCard se encuentran principalmente en computadores portátiles, y están prevalenciendo debido a su tamaño más pequeño.",
-            "Además de las ranuras de expansión, las placas base tienen puertos.",
-            "En tu computador, probablemente sabes que hay un lugar para conectar USB, FireWire, tarjeta SD, Ethernet, e incluso un plug-in de audio para escuchar a través de auriculares.",
-            "Todos estos son considerados puertos, un lugar en la placa base donde puedes conectar la CPU a algun dispositivo externo bien para obtener o para dar información."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd712fd8c441eddfbeb5bddf",
-      "title": "Data Networks",
-      "description": [
-        "This video covers the basics of local area networks, wide area networks, and virtual private networks.",
-        "In this video we talk about Data Networks.",
-        "You've heard of networks, like a water network, road network, cell phone network, or television network.",
-        "Today we'll talk about data networks, which are the networks that computers use.",
-        "The three types we'll cover are the Local Area Network (LAN), the Wide Area Network (WAN), and the Virtual Private Network (VPN).",
-        "A LAN is just a small group of computers that are connected together.",
-        "The most important thing about a LAN is that those computers are close together.",
-        "So, if you're using WiFi at Starbucks or at your school, you're probably using a LAN that you can only connect to if you are physically close to it.",
-        "A WAN (Wide Area Network) is two or more LANs that are connected over long distances.",
-        "So, maybe a school in Colorado wants to connect to a school in Missouri.",
-        "They could use a WAN.",
-        "You might think that these are connected over the internet, and in the case of a VPN (Virtual Private Network, which is basically the same conceptionally as a WAN), you're right.",
-        "However, a WAN usually rents a cable from an internet company to create the connection."
-      ],
-      "challengeSeed": [
-        "03L0c-YMIhE"
-      ],
-      "tests": [
-        [
-          "You can connect to a LAN from far away.",
-          false,
-          "To connect to a LAN you must be physically near to it."
-        ],
-        [
-          "VPNs (Virtual Private Networks) and WANs (Wide Area Networks) do just about the same thing.",
-          true
-        ],
-        [
-          "VPNs and WANs both use the internet to connect LANs.",
-          false,
-          "While both connect LANs, VPNs use the internet and WANs use a rented cable."
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Redes de datos",
-          "description": [
-            "Este video cubre los conceptos básicos de redes de área local, redes de área amplia y redes privadas virtuales.",
-            "En este vídeo se habla de redes de datos.",
-            "Usted ha oído hablar de las redes, como una red de agua, red de carreteras, red de telefonía celular, o red de televisión.",
-            "Hoy hablaremos de redes de datos, que son las redes que utilizan los computadores.",
-            "Los tres tipos que vamos a cubrir son la red de área local (LAN), la red de área extensa (WAN), y la red privada virtual (VPN).",
-            "Una LAN es sólo un pequeño grupo de computadores que están conectados entre sí.",
-            "Lo más importante acerca de una LAN es que esos equipos están cercmuy juntas.",
-            "Por lo tanto, si estás usando WiFi en Starbucks o en su escuela, es probable que estés utilizando una LAN a la que sólo puedes conectarte si estás físicamente cerca.",
-            "Una WAN (Wide Area Network) es dos o más LANs que están conectados a través de grandes distancias.",
-            "Por ejemplo, tal vez una escuela en Colorado quiere conectarse a una escuela en Missouri.",
-            "Podrían utilizar una WAN.",
-            "Podrías pensar que estas es posible conectarlas usando Internet, y en el caso de una VPN (red privada virtual, que conceptualmente es básicamente lo mismo que una una WAN), tendrías la razón.",
-            "Sin embargo, por lo general una WAN alquila un cable de una empresa de Internet para crear la conexión."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd712ed8c441eddfbeb5bddf",
-      "title": "IP Addresses",
-      "description": [
-        "Every device has an IP address.",
-        "IP addresses are assigned based on location, and are vital for the internet to work.",
-        "We're going to talk about the Internet: Part 1, How the Internet Works.",
-        "To know how the internet works, we're going to talk first about IP addresses.",
-        "You may be familiar with the fact that each of your devices has its own IP address, just like a house or an apartment has its own address.",
-        "The internet can't deliver data to a device unless it has an IP address.",
-        "Not only does your device have one, but so does the modem, the router, and every step along the way, which we'll get to later.",
-        "IP addresses are determined based on location, starting with 5 big international regions.",
-        "Moving from left to right, the numbers mean something specific about your location.",
-        "This number isn't specific enough that you could call 911, give them your IP address, and have them know where you live.",
-        "However, it is specific enough that you could Google \"Where's the best ice cream near me\" and Google could give you information close to your location.",
-        "This is done using your IP address."
-      ],
-      "challengeSeed": [
-        "8hb9UIxqjRI"
-      ],
-      "tests": [
-        [
-          "IP addresses are necessary to use and participate in the internet.",
-          true
-        ],
-        [
-          "IP addresses are determined and assigned based on location.",
-          true
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Direcciones IP",
-          "description": [
-            "Cada dispositivo tiene una dirección IP.",
-            "Las direcciones IP se asignan en función de la ubicación, y son vitales para que Internet funcione.",
-            "Vamos a hablar sobre Internet: Parte 1, Cómo funciona Internet.",
-            "Para saber cómo funciona Internet, vamos a hablar primero de direcciones IP.",
-            "Puedes estar familiarizado con el hecho de que cada uno de los dispositivos tiene su propia dirección IP, como una casa o un apartamento tienen su propia dirección.",
-            "En Internet no es posible enviar datos a un dispositivo a menos que este tenga una dirección IP.",
-            "No sólo el dispositivo debe tener una IP, sino también el módem, el enrutador, y cada dispositivo intermedio en el camino entre el emisor y el receptor, como veremos más adelante.",
-            "Las direcciones IP se determinan en función de la ubicación, comenzando con 5 regiones internacionales grandes.",
-            "De izquierda a derecha, los números significan algo específico acerca de su ubicación.",
-            "Este número no es lo suficientemente específico como para que llames al 911, les des tu dirección IP, y así les permitas saber donde vives.",
-            "Sin embargo, es lo suficientemente específico como para buscar en Google \"¿Dónde está el mejor helado cerca de mí\" y Google podría darte información cercana a tu ubicación.",
-            "Esto se hace utilizando tu dirección IP."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd712dd8c441eddfbeb5bddf",
-      "title": "How the Internet Works",
-      "description": [
-        "This is a brief and basic overview of how the internet works.",
-        "For a more in-depth explanation, check out <a href='http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm' target='_blank'>web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm</a>.",
-        "Let's talk a little more about how the internet works.",
-        "We've already established that every device and router on the internet has its own IP address, which is assigned based on location.",
-        "Using these IP addresses, your device can talk to your modem, then to a router, which is set up by a web service.",
-        "The router would go to the domain name server, still just sending a request.",
-        "That server would send back the information that was requested, and it would go back to your device.",
-        "You might think this is fallible; if one step goes out, then the whole process is done.",
-        "But really, there are so many routers and so many routes that if even a big chunk goes out, that still won't really affect the functionality.",
-        "It's really amazing.",
-        "What I want you take away from this video is that your device, since it has an IP address, can send out a request for information, and that information will get back to your device via servers and routers that comprise the internet.",
-        "Now, this explanation is really quite basic.",
-        "For more information, check out <a href='http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm' target='_blank'>web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm</a>."
-      ],
-      "challengeSeed": [
-        "61dIuT4S8eg"
-      ],
-      "tests": [
-        [
-          "Your computer sends a request for information.",
-          true
-        ],
-        [
-          "The Internet can be broken by a large chunk of routers and servers going down.",
-          false,
-          "There are so many connections that even a large amount of routers and servers can stop functioning and your experience will still not be affected."
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "¿Cómo funciona Internet",
-          "description": [
-            "Esta es una descripción breve y descripción de cómo funciona Internet.",
-            "Para una explicación más en profundidad, dale un vistazo a <a href='http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm' target='_blank'>web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm</a>.",
-            "Vamos a hablar un poco más acerca de cómo funciona el Internet.",
-            "Ya hemos establecido que todos los dispositivos y enrutadores en Internet tienen su propia dirección IP, que se asigna en función de la ubicación.",
-            "Usando estas direcciones IP, tu dispositivo puede hablar con tu módem, y después con un enrutador, el cual debió ser configurado por ejemplo con un servicio web con el que te intentas conectar.",
-            "El enrutador acudiría al servidor de nombres de dominio, enviando una petición.",
-            "Ese servidor retornaría la información solicitada, que a su vez regresaría a tu dispositivo.",
-            "Podrías pensar que algo así es falible; si un paso falla, el proceso entero falla.",
-            "Pero en realidad, hay tantos enrutadores y tantas rutas que si incluso una gran parte se apaga, esta en realidad no afectará la funcionalidad.",
-            "Es realmente increíble.",
-            "Lo que quiero que te lleves de este video es que tu dispositivo, que tiene una dirección IP, puede enviar una petición de información, y que esa información regresará a tu dispositivo por medio de servidores y enrutadores que componen el Internet.",
-            "Ahora bien, esta explicación es realmente básica.",
-            "Para obtener más información, echa un vistazo a <a href='http://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm' target='_blank'>web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm</a>."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd712cd8c441eddfbeb5bddf",
-      "title": "Software",
-      "description": [
-        "We discriminate between hardware and software, and also discuss the differences between an operating system and application software.",
-        "In this video, we'll discuss the basics of software.",
-        "We've already covered hardware, which are parts of the computer you can see and feel with your hands.",
-        "Software is the program or the programs that run on the hardware.",
-        "Software is the code that is written and imprinted onto hardware.",
-        "The two types of software we're going to talk about today are operating system software and applications.",
-        "There are three main operating systems: Windows, Mac, and Linux.",
-        "Applications comprise all other software, like your web browser, games, things like Photoshop, how you view your mail, editing documents, etc."
-      ],
-      "challengeSeed": [
-        "Rcntg9A3EGw"
-      ],
-      "tests": [
-        [
-          "Safari, Chrome, and Firefox are all examples of application software.",
-          true
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Software",
-          "description": [
-            "Diferenciamos entre hardware y software, y también discutimos las diferencias entre el sistema operativo y el software de aplicación.",
-            "En este video, vamos a discutir los fundamentos del software.",
-            "Ya hemos cubierto hardware, que son las partes del computador que puedes ver y sentir con tus manos.",
-            "El software es el programa o los programas que se ejecutan en el hardware.",
-            "El software es el código que queda escrito y se ejecuta en el hardware.",
-            "Los dos tipos de software de los cuales vamos a hablar hoy son el sistema operativo y las aplicaciones.",
-            "Hay tres sistemas operativos principales: Windows, Mac y Linux.",
-            "Las aplicaciones comprenden el resto del software, como tu navegador web, juegos, cosas como Photoshop, con lo que ves tu correo, o con lo que editas documentos, etc."
-          ]
-        }
-      }
-    },
-    {
-      "id": "56b15f15632298c12f31510f",
-      "title": "Content Delivery Networks",
-      "description": [
-        "A Content Delivery Network is a system of distributed servers (network) that deliver webpages and other Web content to a user based on the geographic locations of the user, the origin of the webpage and a content delivery server.",
-        "The goal of a CDN is to establish higher quality network connections.",
-        "CDNs accomplish this by providing effective routes between their own servers that can fast-track users to their destination, or if its faster and/or cheaper, another copy of that website destination that is being hosted on another server.",
-        "This concept and type of service is not new, but is becoming more popular as the internet grows.",
-        "Websites contract and pay a CDN service, who in turn pays an internet provider to use their servers for their data.",
-        "An example of CDNs are Google's Hosted Libraries. -- <a href='http://developers.google.com/speed/libraries/#jquery' target='_blank'>developers.google.com/speed/libraries/#jquery</a>",
-        "Google hosts these libraries so that your users can load them into your own site much more quickly than if you host them yourself.",
-        "There's a chance the user's browser is even storing a cached version from visiting a previous page, making the process even quicker. If you aren't familiar with the term 'cache', don't worry, we'll cover that in future videos.",
-        "As a user, you probably use CDNs all the time without realizing it.",
-        "As a developer, you may want to use CDNs like Google libraries to help your page load more quickly.",
-        "As a company, a CDN would be useful if you want your product or site to reach users more efficiently in the larger scheme of their network and the internet as a whole."
-      ],
-      "challengeSeed": [
-        "hBxs3wEZyAs"
-      ],
-      "tests": [
-        [
-          "Content Delivery Networks are a service you can buy through your internet service provider to increase your network connectivity.",
-          false,
-          "CDNs are not provided through ISPs, but are clients of websites that in turn use servers from an ISP to better deliver the content of the original website to the user."
-        ],
-        [
-          "CDNs are popular and wide-reaching, and you've probably used one as a website user many times without even knowing it. The end result is that your experience was faster than it could have been without the CDNs services.",
-          true
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Redes de distribución de contenido",
-          "description": [
-            "Una red de distribución de contenido  (del inglés <em>Content Delivery Network</em>) es un sistema (red) de servidores distribuidos que sirven páginas web y otros contenidos web a los usuarios en función de su ubicación geográfica, el origen de la página web y un servidor de entrega de contenido.",
-            "El objetivo de una RDC (CDN) es establecer conexiones de red de mayor calidad.",
-            "Las RDC logran esto proporcionando rutas eficaces entre sus propios servidores que pueden encaminar rápidamente a los usuarios a sus destinos, o si resulta más rápido o económico, a otra copia del sitio web destino, la cual se aloja en otro servidor.",
-            "Este concepto y tipo de servicio no es nuevo, pero es cada vez más popular a medida que crece Internet.",
-            "Los sitios web contratan y pagan un servicio a las RDC, quienes a su vez le pagan a proveedores de Internet para utilizar sus servidores y almacenar en estos sus datos.",
-            "Un ejemplo de CDN son las Bibliotecas alojadas de Google - <a href='http://developers.google.com/speed/libraries/#jquery' target='_blank'>developers.google.com/speed/libraries/#jquery</a>",
-            "Google organiza estas bibliotecas para que tus usuarios puedan cargarlas en tus propios sitio web mucho más rápido que si las alojaras tu mismo.",
-            "Hay incluso una posibilidad de que el navegador del usuario le presente  una copia en `caché' (almacenamiento local temporal) realizada durante una visita previa, haciendo que el proceso sea aún más rápido. Si no estás familiarizado con el término 'caché', no te preocupes, vamos a cubrirlo en videos futuros. ",
-            "Como usuario, es probable que utilices RDC  todo el tiempo sin darte cuenta.",
-            "Como desarrollador, es posible que desees utilizar RDCs como las bibliotecas de Google para ayudar a que tu página cargue más rápido.",
-            "Como empresa, una RDC sería útil si quieres que tu producto o sitio llegue a los usuarios de manera más eficiente en el esquema más grande de su red y en Internet en su conjunto."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7129d80441eddfbeb5bddf",
-      "title": "Analog vs Digital and File Compression",
-      "description": [
-        "How computers turn analog sound into digital files, and the pros and cons of data compression.",
-        "Let's discuss analog vs digital on a very basic level.",
-        "Most specifically, we'll talk about how computers interpret analog sound and turn it into a digital file.",
-        "An analog sound wave could look like anything, but for this example it's a wavy line.",
-        "The computer takes it and measures at lots of different points, turning them into numbers.",
-        "This is called sampling.",
-        "Later, the computer can take those numbers and turn them into sound again.",
-        "Let's also discuss data compression.",
-        "The benefit of compression is that it's a smaller file: it's easier to store, it's easier to send to someone else, and it just takes up less space.",
-        "One of the ways this is done in sound is that the sampling is taken less often.",
-        "Another way is that it takes the measurement from a median point instead of from 0, so the numbers recorded are smaller.",
-        "In images, it's done by measuring groups of pixels by 16 instead of individually.",
-        "The takeaway from this video is that you'll want to use digital files as they're a higher quality, and when you're looking at compression, you want to decide how far you are willing to go to ensure the user still has the best possible experience."
-      ],
-      "challengeSeed": [
-        "B7seUQzZGx0"
-      ],
-      "tests": [
-        [
-          "Digital files can be made from analog sounds and analog sounds can be made from digital files.",
-          true
-        ],
-        [
-          "Compression is not worth it, because it lessens quality.",
-          false,
-          "Sometimes compression is a great idea. It depends on what you're trying to do and what your end goal for the product is."
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Analógico vs digital y compresión de archivos",
-          "description": [
-            "¿Cómo los computadores pueden volver sonido analógico en archivos digitales, y los pros y los contras de la compresión de datos?",
-            "Vamos a discutir datos anàlogos frente a datos digitales en un nivel muy básico.",
-            "Más especificamente, hablaremos de cómo los computadores interpretan el sonido analógico y lo convierten en un archivo digital.",
-            "Una onda de sonido analógico podría parecerse a cualquier cosa, pero para este ejemplo es una línea ondulada.",
-            "El equipo lo toma y realiza mediciones en muchos puntos diferentes, convirtiéndo las mediciones en números.",
-            "Esto se denomina muestreo.",
-            "Posteriormente, el equipo puede tomar esos números y convertirlos en un sonido de nuevo.",
-            "Vamos a discutir también la compresión de datos.",
-            "El beneficio de la compresión es que resulta en un archivo más pequeño: es más fácil de almacenar, es más fácil de enviar a otra persona, y sencillamente ocupa menos espacio.",
-            "Una de las maneras de lograrlo con sonidos es haciendo un muestreo con menor frecuencia (por ejemplo cada 5 milisegundos en lugar de cada milisegundo).",
-            "Otra forma es tomando una medida desde un punto medio y no desde 0, de forma que los número registrados sean más pequeños.",
-            "En imágenes, se hace midiendo grupos de a 16 píxeles en lugar de hacer mediciones individuales.",
-            "Lo que te llevas de este video es que querrás utilizar archivos digitales pues son de mayor calidad, y cuando te fijes en compresión, tendrás que decidir qué tan lejos estás dispuesto a ir para garantizar que el usuario tenga la mejor experiencia posible."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7129d8b441eddfbeb5bddf",
-      "title": "Routers and Packets",
-      "description": [
-        "In this video, we go into a little more detail about routers and packets, important concepts to understand about how the internet works.",
-        "Let's talk more about routers and how they relate to networking.",
-        "Routers are the things that connect different small area networks.",
-        "I want to give a metaphor for this: I'm a teacher and I work at a school.",
-        "Say I have a package that I need to get to someone who works in the district offices.",
-        "I don't know where she is, I don't know where her office is located, but I know her name.",
-        "I go to my secretary, like my first router, and I say \"Hey, I need to get this to so-and-so at the district office, can you please help me?\", and she'll say \"Sure, I don't know exactly where her office is either, but I know the next step, I can get it to the district\".",
-        "So she goes on and sends it to the secretary at the district office, the next router.",
-        "That secretary has no idea who I am or where I am, but she sees the name on the package and knows the end location.",
-        "What I'm trying to get across here is that each router only has to know its own little network, the stops right next to it.",
-        "It doesn't have to know the whole internet, but just its own connections.",
-        "It can take information and say, alright, I don't know exactly where that's going, but I'll pass it along in the right direction.",
-        "That's really all it takes.",
-        "Routers can be different sizes, different capacities, but what they do is know their own neighborhood, take the information, and pass it in the right direction.",
-        "Another thing we'll get into a little later is that the routers don't even have to have the full package of information.",
-        "If one computer is trying to send information to another, the data might get split up between different routers and that's okay.",
-        "The computers still know how to put the information back together correctly.",
-        "The little pieces of information that are sent are called packets.",
-        "Packets are actually little pieces of binary code (drawn on board).",
-        "This is an example of what packets might look like, a visual representation of the electrical current that the computer can translate into 1's and 0's, which we all know is binary that can represent literally any digital data.",
-        "These little packets are sent across through routers, and if a file is too large for one packet, it can be broken up into frames (smaller little packets).",
-        "The frames don't have to take the same route to the end destination.",
-        "They can take whichever route is open, whichever is fastest, and since they have the end IP address, all of the routers know where to send them.",
-        "Once they get to the end destination, that computer knows how to put all of the information back together."
-      ],
-      "challengeSeed": [
-        "f9M6P9IVn7k"
-      ],
-      "tests": [
-        [
-          "Routers have to know the whole internet.",
-          false,
-          "Routers just have to know the stops around them to send information in the right direction."
-        ],
-        [
-          "Packets are little pieces of binary code.",
-          true
-        ],
-        [
-          "Packets have to be sent in one piece.",
-          false,
-          "packets can be broken up into frames."
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Enrutadores y paquetes",
-          "description": [
-            "En este video, vamos a entrar en más detalle respecto a enrutadores y paquetes, conceptos importantes para entender cómo funciona Internet.",
-            "Vamos a hablar más acerca de los enrutadores y cómo se relacionan con la creación de redes.",
-            "Los enrutadores son los dispositivos que conectan diferentes pequeñas redes.",
-            "Quiero dar una metáfora para esto: Soy maestra y trabajo en una escuela.",
-            "Digamos que tengo un paquete que necesito hacer llegar a alguien que trabaja en las oficinas de distrito.",
-            "No sé dónde está, no sé donde se encuentra su oficina, pero conozco su nombre.",
-            "Voy a mi secretaria, como mi primer enrutador, y digo \"Hey, tengo que hacer llegar que esto a tal persona en la oficina del distrito, ¿podrías ayudarme por favor?\", y ella va a decir \"Claro, no sé exactamente dónde está su oficina tampoco, pero sé que hacer a continuación, hacerlo llegar al distrito\".",
-            "Así que ella continua y lo envía a la secretaria en la oficina del distrito, el siguiente enrutador.",
-            "Eso secretaria no tiene idea de quién soy ni dónde estoy, pero ve el nombre del paquete y conoce la ubicación final.",
-            "Lo que estoy tratando de explicar aquí es que cada enrutador sólo tiene que conocer su propia pequeña red, las paradas justo al lado de él.",
-            "No tiene por qué conocer toda la Internet, sino sólo sus propias conexiones.",
-            "Puede tomar información y decir, bien, no sé exactamente donde eso va, pero voy a dirigirlo a la dirección correcta.",
-            "Eso es realmente todo lo que necesita.",
-            "Los enrutador pueden ser de diferentes tamaños, diferentes capacidades, pero lo que hacen es conocer su propio vecindario, tomar la información, y pasarla en la dirección correcta.",
-            "Otra cosa que introduciremos un poco más adelante es que los enrutadores ni siquiera necesitan tener el paquete completo de información.",
-            "Si un equipo trata de enviar información a otro, los datos podrían dividirse entre enrutadores diferentes y también estaría bien.",
-            "Los computadores aún saben cómo reagrupar la información correctamente.",
-            "Las pequeñas piezas de información que se envían se llaman paquetes.",
-            "Los paquetes son realmente pequeñas piezas de código binario (que describimos antes).",
-            "Este es un ejemplo de como lucen los paquetes, una representación visual de la corriente eléctrica que el computador puede traducirse en 1s y 0s, que ya todos sabemos es binario que puede representar literalmente cualquier información digital.",
-            "Estos pequeños paquetes se envían a través de enrutadores, y si un archivo es demasiado grande para un paquete, se pueden dividir en tramas más pequeñas (pequeños paquetes).",
-            "Las tramas no tienen que recorrer la misma ruta hasta el destino final.",
-            "Pueden tomar cualquier ruta abierta, la que sea más rápida, y dado que tienen la dirección IP final, todos los enrutadores saben dónde enviarlos.",
-            "Una vez que llegan al destino final, ese computador sabe cómo poner junta toda la información."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7029d8c441eddfbeb5bddf",
-      "title": "Source Code",
-      "description": [
-        "In this video we discuss what source code is, interpreters and compilers, and what open source means.",
-        "Let's talk about source code: what source code is, where you'll see it, and how the computer makes sense of it.",
-        "Source code itself is the actual text document that the programmer creates: they type it up, it's letters, numbers, and symbols.",
-        "If you give that to somebody and have them look at that document on their computer, that's not going to help them view their email, it's not going to be a browser, it's just a text document.",
-        "The computer has to have a way of interpreting that and making something really powerful run from it.",
-        "There are two main ways this is done: either by an interpreter or a compiler.",
-        "Every browser has an interpreter, and that's how JavaScript is processed.",
-        "Other languages, like C++, are used with a compiler.",
-        "Unlike an interpreter, the compiler does all of its work on the programmer's end.",
-        "They send out their package, their product, and it's already been compiled, it can already run on a machine.",
-        "Javascript, however, and other interpreter languages, you just write the JavaScript and the browser on the user's end has the capability to interpret it so you don't need a compiler.",
-        "Everyone has an opinion to which is better (interpreter or compiler), but really each has their pros and cons, and it goes on a case by case basis.",
-        "They're better at different things.",
-        "Now, let's focus on what open source means.",
-        "Free Code Camp is open source, meaning that all of the documentation and source code is open and accessible.",
-        "You may be thinking, \"so what?\", but what's awesome is that if you want to change or improve Free Code Camp, you can write that improvement and maybe get it implemented.",
-        "It's a great way for websites and software to grow in a strong and fast way because of the community working together to improve it.",
-        "One unwritten rule of contributing to open source projects is that you should generally submit your improvements to also be open source, and by giving that improvement back to the public, you let others use your improvement as well."
-      ],
-      "challengeSeed": [
-        "QHOY7PyKDh0"
-      ],
-      "tests": [
-        [
-          "Source code is a text document.",
-          true
-        ],
-        [
-          "JavaScript is a compiled language.",
-          false,
-          "JavaScript is an interpreted language."
-        ],
-        [
-          "Free Code Camp is open source.",
-          true
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Código Fuente",
-          "description": [
-            "En este video se discute lo que es código fuente, intérpretes y compiladores, y lo que significa fuentes abiertas.",
-            "Vamos a hablar sobre el código fuente: lo que el código fuente es, donde lo puedes ver, y cómo el computador lo entiende.",
-            "El código fuente en sí es el documento de texto que el programador crea: ellos lo teclean, sus letras, números y símbolos",
-            "Si le das ese documento a alguien y le pides verlo en su computador arle eso a alguien y hacer que miren en ese documento en su computador, eso no les permitirá leer su correo, ni es un navegador, es sólo un documento de texto.",
-            "El computador tiene que tener una forma de interpretarlo y hacer que algo realmente potente se ejecute a partir de este.",
-            "Hay dos maneras principales von las que se hace: bien por un intérprete o bien con un compilador",
-            "Cada navegador tiene un intérprete, y así es como se procesa JavaScript.",
-            "Otros lenguajes, como C ++, se utilizan con un compilador.",
-            "A diferencia de un intérprete, el compilador hace todo su trabajo al lado del programador.",
-            "Ellos publican sus paquetes, sus productos, que ya han sido compilados,  y que esán listos para ser ejecutados en un computador.",
-            "En el caso de Javascript, por otra parte, y de otros lenguajes interpretados, tu sólo escribes el JavaScript y el navegador al lado del usuario tiene la capacidad de interpretarlo de manera que no neceistas un compilador.",
-            "Todo el mundo tiene su opinión de que es mejor (intérprete o compilador), pero en realidad cada uno tiene sus ventajas y desventajas, y depende del caso a caso.",
-            "Son mejores en diferentes cosas.",
-            "Ahora, vamos a centrarnos en lo que significa fuentes abiertas.",
-            "FreeCodeCamp es de fuentes abiertas, que significa que toda la documentación y el código fuente son abiertas y accesibles.",
-            "Podrías preguntarte, \"¿y eso qué?\", pero lo que es increíble es que si deseas cambiar o mejorar FreeCodeCamp, puedes describir la mejora y tal vez implementarla.",
-            "Es una gran manera para los sitios web y para el software de crecer de forma fuerte y rápida debido a la comunidad que trabaja en conjunto para mejorarlo.",
-            "Una regla no escrita al contribuir a proyectos de fuentes abiertas es que en general deberías compartir tus mejoras para que también sean de fuentes abiertas, y al retornar esa mejora al público también les permites a otros utilizar tus mejoras."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd712ad8c441eddfbeb5bddf",
-      "title": "Console and Logging",
-      "description": [
-        "We discuss what (and where) the console is, why it's useful, and show a little of how it works.",
-        "The console: what it is, where you can find it, and what you use it for.",
-        "The console is very commonly used to display system administrative messages.",
-        "Your browser and your computer both have their own consoles.",
-        "Once you become familiar with it, you will find it to be a very useful and powerful tool.",
-        "In Javascript, the console is used as a great tool for debugging and finding out where in your code there's a problem.",
-        "One of the most important terms you'll need to remember is \"console.log()\".",
-        "The process of doing this can be put anywhere in the lines of code to help find, identify, and ultimately fix specific issues.",
-        "Using the Chrome browser and the Chrome console, if we type in \"console.log(\"Free Code Camp rocks!\");\", the console will literally display \"Free Code Camp rocks!\".",
-        "This will also work with numbers and booleans, which are true/false statements.",
-        "When consoling words, it's important to put it inside of quotations so it recognizes it's a string."
-      ],
-      "challengeSeed": [
-        "CdqT7_6v60E"
-      ],
-      "tests": [
-        [
-          "The console serves only small, unnecessary purposes.",
-          false,
-          "The console's main purpose is to debug, which is a vital step in creating code."
-        ],
-        [
-          "You can console strings (sets of words), numbers, and booleans (true/false statements)",
-          true
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Consola y Logging",
-          "description": [
-            "Nosotros discutimos que es la consola (y donde está), porque es útil y mostrar un poco de como trabaja.",
-            "La consola: que es, donde la puedes encontrar, y para que la usas.",
-            "La consola es usada comunmente para mostrar los mensajes administrativos del sistema.",
-            "Una vez te familiarices con esta, encontraras una útil y poderosa herramienta.",
-            "En Javascript, la consola es usada como una gran herramienta para depurar y encontrar donde hay un error en tu código ",
-            "Uno de los términos mas importantes para recordar es \"console.log()\".",
-            "El proceso para usarla es, es ponerlo en cualquier parte entre las líneas del código para ayudar a encontrar, identificar, y en últimas solucionar problemas especificos",
-            "Usando el navegador Chrome y la consola de Chrome, si nosotros escribimos <code>console.log(\"Free Code Camp es muy bueno!\");</code>, la consola literalmente mostrará \"Free Code Camp es muy bueno!\".",
-            "Además esto funcionará con números y booleanos, cuyos valores posibles son verdadro/falso",
-            "Cuando se envian palabras a la consola, es importante ponerlas dentro de comillas para reconocer que es una cadena."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7119d8c441eddfbeb5bddf",
-      "title": "Variables In Code",
-      "description": [
-        "Variables are used frequently in Javascript and many other coding languages.",
-        "In this video, we're going to talk about variables in code.",
-        "Variables, just like in Algebra, are when you have a letter or a word and it represents something else.",
-        "Here we're doing var x = \"Briana\". When we reference \"x\" later on, it's going to know that's Briana.",
-        "When we console.log(x), it's going to output \"Briana\".",
-        "But be careful - if we put console.log(\"x\"), with the x in quotation marks, it will output the letter \"x\".",
-        "What I want you to take away from this video is that variables exist in code, and you can store everything from a simple string all the way up to a function, all within a simple name."
-      ],
-      "challengeSeed": [
-        "DF81DiQfAwY"
-      ],
-      "tests": [
-        [
-          "Variables are useful in coding languages like JavaScript.",
-          true
-        ],
-        [
-          "Variables can't stand for anything that isn't a string, number, or boolean.",
-          false,
-          "Variables can stand for things ranging from simple to very complex"
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Las variables en el código",
-          "description": [
-            "Las variables se utilizan con frecuencia en Javascript y  en muchos otros lenguajes de programación.",
-            "En este video, vamos a hablar acerca de las variables en el código.",
-            "Las variables, al igual que en álgebra, son letras o palabras que representan algo más.",
-            "Aquí estamos haciendo <code>var x = \"Briana\"</code>. Cuando hagamos referencia a <code>x</code> más adelante, se sabrá que es  \"Briana\". ",
-            "Cuando se ejecute <code>console.log(x)</code> presentará \"Briana\".",
-            "Pero ten cuidado - si pones <code>console.log(\"x\")</code>, con la <code>x</code> entre comillas, se presentará la \"x\".",
-            "Lo que yo quiero que te lleves con este video es que existen las variables en el código, y que puedes almacenar todo, desde una simple cadena hasta una función, todo con un simple nombre."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd712bd8c441eddfbeb5bddf",
-      "title": "What Do Programmers Do?",
-      "description": [
-        "Programmers (a.k.a. coders, developers, or software engineers) solve problems by turning big ideas into tiny steps that a computer can understand.",
-        "In this video, we'll discuss what programmers do.",
-        "Programmers can also be called coders, developers, or software engineers, and what all of these people do is take ideas and turn them into functional code.",
-        "It's not just creating that code, but also maintaining it.",
-        "Let's look at how the computer looks at code, specifically JavaScript.",
-        "The computer looks at code one line at a time, and as you're writing code, you will notice numbers on the left hand side.",
-        "The computer literally goes down line by line, making sense of what each line has to say.",
-        "Everything is done sequentially, just straight down, so referencing something that is below and hasn't happened yet will lead to a problem.",
-        "Computers just read straight down like you would read a book.",
-        "Programmers are the ones responsible for breaking their ideas down into the little tiny steps and writing them in a way that computers can understand them."
-      ],
-      "challengeSeed": [
-        "JQ_BCly-heU"
-      ],
-      "tests": [
-        [
-          "Computers look at code one line at a time",
-          true
-        ],
-        [
-          "Programmers and developers are totally different professions with very little in common.",
-          false,
-          "Those titles are so similar they could even describe the same job position."
-        ],
-        [
-          "Programmers take ideas and break them down into little tiny steps the computer can understand",
-          true
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "¿Qué hacen los programadores?",
-          "description": [
-            "Los programadores (también conocidos como codificadores, desarrolladores, o ingenieros de software) resuelven problemas convirtiendo grandes ideas en pequeños pasos que un computador puede entender.",
-            "En este video, vamos a discutir lo que hacen  los programadores.",
-            "Los programadores también pueden llamarse codificadores, desarrolladores o  ingenieros de software, y lo que todas estas personas hacen es tomar ideas y convertirlas en código que funciona.",
-            "No es sólo crear el código, sino también mantenerlo.",
-            "Vamos a ver cómo el computador ve el código, específicamente JavaScript.",
-            "El computador ve el código de una línea a la vez, y mientras programas, seguramente verás números de línea al lado izquierdo.",
-            "El computador, literalmente, va de arriba hacía abjo, línea por línea, dando sentido a lo que cada línea dice.",
-            "Todo se hace secuencialmente, de manera directa, por lo que hacer referencia a algo que está por debajo y que todavía no ha sucedido dará lugar a un problema.",
-            "Los computadores sólo leen de arriba hacía abajo, como tu leerías un libro.",
-            "Los programadores son los responsables de dividir sus ideas en  pequeños pasos y escribirlos de una manera que las computadoras pueden entenderlos."
-          ]
-        }
-      }
-    },
-    {
-      "id": "bd7129d89441eddfbeb5bddf",
-      "title": "Computer Security",
-      "description": [
-        "The basics of computer security, and how to make sure you protect your information.",
-        "Let's cover computer security.",
-        "The first thing we're going to talk about is something called a dictionary attack which has to do with your passwords.",
-        "When creating your passwords, some sites require extremely specific and complicated passwords, which is actually a bit unnecessary.",
-        "The type of attacks they're trying to guard you from are dictionary attacks.",
-        "Dictionary attacks are programmed to try every word in the dictionary, or in its own database of common words and passwords, as the password for a large mass of usernames.",
-        "If your password is Kangaroo, they're probably going to break into your account.",
-        "Most passwords aren't this simple, but that doesn't matter.",
-        "They attack such a massive amount of accounts that they only need a few passwords that are relatively simple.",
-        "When creating a password, you want to use different cases, numbers, and symbols, but one of the most effective ways to create a good password is to throw some random letters in there (ex: kangarooSyCA67).",
-        "Also, stay away from sequential numbers.",
-        "Phishing, another thing to watch out for, is emails or webpages that mimic other valid sites to try and trick people into entering their personal information, though the site truly isn't connected to the site it's trying to mimic.",
-        "In general, two ways to safeguard from these attacks are checking the address in the browser and to open a new browser and go to the website that is claiming to contact you.",
-        "Let's also discuss encryption and HTTPS.",
-        "If you are at Starbucks trying to access your bank account, you have reason to be suspicious that someone could see and take your information.",
-        "You will want to look for a green HTTPS instead of HTTP at the beginning of the web address.",
-        "That means that the site you're sending your information to is encrypting your passwords and other information, scrambling up data according to a code that only they know.",
-        "In general, whenever you're showing private or sensitive information, check for HTTPS.",
-        "A few other general tips: don't share passwords between important accounts.",
-        "If a site you use gets hacked into, your password may be compromised regardless of its strength.",
-        "Also, don't download strange files.",
-        "If you don't recognise the file type like .pdf, .txt, .jpg, be wary.",
-        "Some of these files you download can be very powerful and even run your computer from the inside.",
-        "Lastly, keep your software updated, particularly software that interacts with the internet.",
-        "One way that information can be compromised is when 'bad guys' find holes and gaps in security of older versions of softwares.",
-        "Those bugs have been patched in newer versions, so if you keep everything updated, you'll avoid lots of problems.",
-        "These are all very basic things you should know about how to keep your information safe on your computer."
-      ],
-      "challengeSeed": [
-        "wNuRKyMJRQk"
-      ],
-      "tests": [
-        [
-          "Passwords should be shared with all of your accounts.",
-          false,
-          "Don't reuse important passwords"
-        ],
-        [
-          "If you don't trust a site or an email, open a new browser and re-enter the intended location.",
-          true
-        ],
-        [
-          "Keeping software updated will help protect your computer and your information.",
-          true
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Seguridad en los computadores",
-          "description": [
-            "Lo fundamental de la seguridad en los computadores y cómo proteger su información.",
-            "Echemos una mirada a la seguridad en los computadores.",
-            "De lo primero que vamos a hablar es de algo conocido como ataque diccionario que se dirige a sus claves.",
-            "Cuando tu creas una clave, algunos lugares de internet te exigen claves muy específicas y complejas, las cuales con frecuencia no son tan necesarias.",
-            "El tipo de ataque que ellos quieren evitar son los llamados ataques diccionario.",
-            "Los ataques diccionario están programados para probar todas las palabras de un diccionario o todas las claves mas usuales, para una gran cantidad de nombres de usuario, registradas en sus propias bases de datos. ",
-            "Su tu clave es Canguro, probablemente podrá ser descubierta ya que es una palabra simple.",
-            "Aunque algunas claves no son tan sencillas como la anterior, esto tampoco importa.",
-            "Ellos atacan tal cantidad de cuentas que solo necesitan unas pocas claves que sean sencillas.",
-            "Cundo se crea una clave, tú usas letras mayúsculas, minúsculas, números y símbolos, pero una de las formas más eficientes es seleccionar números y letras al azar (ejemplo: canguroSyCA67).",
-            "Por lo tanto mantente lejos de los números seguidos.",
-            "Suplantación es otra forma de ataque del cual debes estar pendiente. Son correos o páginas web que simulan sitios seguros y engañan a las personas para obtener su información personlal. Son sitios que no están conectados a donde dicen que estan.",
-            "En general hay dos formas de resguardarse de estos ataques: verificar la dirección web de la página y abrir la dirección de la página web, en otro navegador para poder comprobar si corresponde con el sitio del que dicen que procede.",
-            "Ahora hablemos sobre cifrado y HTTPS",
-            "Si te encuentras comprando en una página de internet de una tienda muy prestigiosa y necesitas dar los datos de tu tarjeta de crédito es muy razonable que sospeches que alguien puede estar viendo y copiando esta información.",
-            "Es imprescindible que te fijes que la dirección de esta página web, en tu navegador, comienza con letras verdes y con HTTPS en vez de comenzar con solo HTTP.",
-            "Esto significa que el sitio por el que estás enviando esta información, la envía en forma codificada",
-            "En general, asegúrate que la página sea HTTPS si necesita escribir información privada o importante.",
-            "Otras recomendaciones importantes: no uses la misma clave para diferentes cuentas importantes",
-            "Si el sitio que usas ha sido vulnerado, tu clave puede estar comprometida independientemente de su fortaleza.",
-            "Tampoco descargues archivos desconocidos.",
-            "Se precavido si no reconoces archivos de tipo .pdf, .txt, .jpg.",
-            "Algunos de estos archivos pueden ser muy potentes e incluso correr dentro de tu computador.",
-            "Por último, mantén tu software actualizado, en especial el software que interactúa con internet.",
-            "Una de las formas en que se puede comprometer tu información es cuando los 'los chicos malos' encuentran huecos en las versiones viejas de los programas",
-            "Estos defectos se corrigen en las versiones nuevas, por lo que evitarás problemas si mantienes el software actualizado.",
-            "Estas son algunas cosas muy básicas que debes saber acerca de cómo proteger la información de tu computador."
-          ]
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/04-video-challenges/computer-science.json b/seed/challenges/04-video-challenges/computer-science.json
deleted file mode 100644
index 214a5d52673a43..00000000000000
--- a/seed/challenges/04-video-challenges/computer-science.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "Computer Science",
-  "order": 7,
-  "time": "0 hours",
-  "isComingSoon": true,
-  "challenges": [
-    {
-      "id": "bd7128d8c441eddfbeb5bddc",
-      "title": "Learn Computer Science Challenges",
-      "description": [],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Computer Science"
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/04-video-challenges/data-visualization.json b/seed/challenges/04-video-challenges/data-visualization.json
deleted file mode 100644
index d06e646cc826b7..00000000000000
--- a/seed/challenges/04-video-challenges/data-visualization.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "Data Visualization",
-  "order": 8,
-  "time": "0 hours",
-  "isComingSoon": true,
-  "challenges": [
-    {
-      "id": "bd7128d8c441eddfbeb5bdde",
-      "title": "Learn Data Visualization Challenges",
-      "description": [],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Data Visualization"
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/04-video-challenges/devops.json b/seed/challenges/04-video-challenges/devops.json
deleted file mode 100644
index e4aa06b0a41352..00000000000000
--- a/seed/challenges/04-video-challenges/devops.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "DevOps",
-  "order": 16,
-  "time": "0 hours",
-  "isComingSoon": true,
-  "challenges": [
-    {
-      "id": "bd7128d8c441eddfbeb5bdd5",
-      "title": "Learn DevOps Challenges",
-      "description": [],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "DevOps"
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/04-video-challenges/dom.json b/seed/challenges/04-video-challenges/dom.json
deleted file mode 100644
index b98e00cff3ffd7..00000000000000
--- a/seed/challenges/04-video-challenges/dom.json
+++ /dev/null
@@ -1,87 +0,0 @@
-{
-  "name": "The DOM",
-  "order": 1,
-  "time": "30 minutes",
-  "challenges": [
-    {
-      "id": "56b15f15632298c12f31518f",
-      "title": "What's the Document Object Model?",
-      "description": [
-        "The DOM is the browser's internal, programmatic representation of a webpage. Languages like JavaScript allow you to modify the DOM, and thus the website without editing the HTML of the page.",
-        "Technically, the DOM is an API (application programming interface). There are many types of APIs, but this particular API interacts with XML and HTML documents. It's in charge of how those documents are accessed and manipulated.",
-        "Really, you can do a lot with the DOM, and if you're already scripting in JS and jQuery, you're already doing it.",
-        "You can insert new things, elements, or alter style or content for elements that already exist.",
-        "This can be done with pure JavaScript, like: document.getElementById(id), element.getElementsByTagName(name), or document.createElement(name).",
-        "You can also use libraries like jQuery to simplify, standardize and automate manipulating the DOM, like: $('#box2').append('This will be added to box2!')"
-      ],
-      "challengeSeed": [
-        "80Mr2Z6Qikc"
-      ],
-      "tests": [
-        [
-          "The DOM is complex and difficult to access.",
-          false,
-          "The DOM is easily accessed and manipulated with JavaScript and jQuery."
-        ],
-        [
-          "The DOM is an API that is a part of the browser.",
-          true
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "¿Qué es el Modelo de objetos del documento?",
-          "description": [
-            "El DOM es la representación interna y programática de una página web del navegador. Lenguajes como javascript te permiten modificar el DOM, y por lo tanto el sitio web, sin editar el código HTML de la página.",
-            "Técnicamente, el DOM es un API (interfaz de programación de aplicaciones). Hay varios tipos de APIs, pero este API en particular interactúa con documentos XML y HTML. Está a cargo de cómo se accesan y se manipulan esos documentos.",
-            "De hecho, puedes hacer muchas cosas con el DOM. De hecho, ya lo estás haciendo desde el momento en que estás escribiendo código en JS y jQuery.",
-            "Puedes insertar nuevos elementos, o cambiar el estilo o contenido de los elementos previamente existentes.",
-            "Esto se puede hacer con javascript puro, como: document.getElementById(id), element.getElementsByTagName(name), o document.createElement(name).",
-            "También puedes usar librerías como jQuery para simplificar, estandarizar y automatizar la manipulación del DOM, como por ejemplo: $('#caja2').append('Esto se agregará a caja2!')"
-          ]
-        }
-      }
-    },
-    {
-      "id": "56b15f15632298c12f31518e",
-      "title": "Style in the Header, Script in the Footer",
-      "description": [
-        "Maybe you've been told that links to style sheets (CSS) should be included in the header and that links to script (JS) should be included in the footer. Ever asked yourself why?",
-        "If you've ever seen a webpage that loads the text first, then after a bit loads the formatting and style, you've seen a page that didn't have the links to style and script in the correct places.",
-        "This all has to do with how the browser decides it's loaded enough information to display. There's an event called 'DOMContentLoaded', and once that event happens, whatever is loaded will be displayed.",
-        "The DOM will tell the browser it's ready once the HTML is loaded, and sometimes the CSS and JS hasn't caught up. However, if you place the CSS in the header and the JS in the footer, you can ensure that all content will be loaded before the DOM triggers the 'DOMContentLoaded' event, the event that shows the user your content.",
-        "This is a simple explanation, as most of these videos are. For more information, I really liked this resource: <a href='http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload' target='_blank'>ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload</a>"
-      ],
-      "challengeSeed": [
-        "i1rQi9Maem8"
-      ],
-      "tests": [
-        [
-          "Placing the style in the header and the script in the footer ensures the page is loaded for the user as you want it to appear.",
-          true
-        ],
-        [
-          "The CSS link should go in the header and the JS link should go in the footer. If you don't do it just that way, the webpage will crash.",
-          false,
-          "The webpage won't necessarily crash, but it might load in an unattractive or dysfunctional way."
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Estilo en el encabezado, código al pie de página",
-          "description": [
-            "Creo que ya te habrán dicho que los enlaces a código de estilo (CSS) deben ser incluidos en el encabezado (<code>header</code>) y que los enlaces al código (JS) deben estar incluidos al pie de página (<code>footer</code>). ¿Alguna vez te preguntaste por qué?",
-            "Si alguna vez has visto una página web que carga el texto primero, y después de un momento carga el formato y el estilo, entonces era una página que no tenía los enlaces hacia el estilo y el código en los lugares correctos.",
-            "Esto tiene que ver con la forma en que el navegador decide si ha cargado suficiente información para mostrar. Hay un evento llamado 'DOMContentLoaded', y una vez que ese evento ocurre, lo que sea que se haya cargado hasta entonces será mostrado.",
-            "El DOM le dirá al navegador que está listo una vez que el código HTML ha sido cargado, y a veces el CSS y JS no se han alcanzado a cargar. Si pones el CSS en el encabezado y el JS al pie de página, puedes estar seguro que todo el contenido será cargado antes que el DOM desencadene el evento 'DOMContentLoaded', el cual muestra tu contenido al usuario.",
-            "Esta es una explicación simplificada, al igual que la que encontrarás en el resto de estos videos. Si quieres más información, creo que el siguiente enlace es de bastante ayuda: <a href='http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload' target='_blank'>ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload</a>"
-          ]
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/04-video-challenges/embedded-and-internet-of-things.json b/seed/challenges/04-video-challenges/embedded-and-internet-of-things.json
deleted file mode 100644
index 946812e5193b36..00000000000000
--- a/seed/challenges/04-video-challenges/embedded-and-internet-of-things.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "Embedded and Internet of Things",
-  "order": 9,
-  "time": "0 hours",
-  "isComingSoon": true,
-  "challenges": [
-    {
-      "id": "bd7128d8c441eddfbeb5bdda",
-      "title": "Learn Embedded and Internet of Things Challenges",
-      "description": [],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Embedded and Internet of Things"
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/04-video-challenges/game-development.json b/seed/challenges/04-video-challenges/game-development.json
deleted file mode 100644
index fbc7fec764a7c0..00000000000000
--- a/seed/challenges/04-video-challenges/game-development.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "Game Development",
-  "order": 10,
-  "time": "0 hours",
-  "isComingSoon": true,
-  "challenges": [
-    {
-      "id": "bd7128d8c441eddfbeb5bdd0",
-      "title": "Learn Game Development Challenges",
-      "description": [],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Game Development"
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/04-video-challenges/gamification.json b/seed/challenges/04-video-challenges/gamification.json
deleted file mode 100644
index 50c63f2d0094ee..00000000000000
--- a/seed/challenges/04-video-challenges/gamification.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "Gamification",
-  "order": 12,
-  "time": "0 hours",
-  "isComingSoon": true,
-  "challenges": [
-    {
-      "id": "bd7128d8c441eddfbeb5bdd9",
-      "title": "Learn Gamification Challenges",
-      "description": [],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Gamification"
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/04-video-challenges/jslingo.json b/seed/challenges/04-video-challenges/jslingo.json
deleted file mode 100644
index a82b6d070fd6f5..00000000000000
--- a/seed/challenges/04-video-challenges/jslingo.json
+++ /dev/null
@@ -1,369 +0,0 @@
-{
-  "name": "JavaScript Lingo",
-  "order": 2,
-  "time": "1 hour",
-  "challenges": [
-    {
-      "id": "56b15f15632298c12f31518c",
-      "title": "MDN and Documentation",
-      "description": [
-        "This is a basic intro to MDN and the concept of documentation.",
-        "MDN, Mozilla Developer Network, is a fantastic open source collaboration that documents not only JavaScript, but many other languages and topics. If you haven't heard of them, you should check them out now. I get lots of information from <a href='http://developer.mozilla.org/en-US/docs/Web/JavaScript' target='_blank'>developer.mozilla.org/en-US/docs/Web/JavaScript</a>",
-        "When I say documentation, I am talking about information that is provided about the product to its users. The documentation at MDN isn't necessarily written by the people behind JS. Brendan Eich created JS in 1995, but it's now a community driven project that continues to grow.",
-        "As you continue to learn JavaScript, jQuery, and pretty much any languages or services for development or programming, documentation is your friend. ",
-        "The faster you get comfortable reading and referencing documentation, the faster you will grow as a developer.",
-        "These videos aren't going to teach you JavaScript - you will be introduced to terms and concepts that will be valuable as you continue to practice and learn."
-      ],
-      "challengeSeed": [
-        "NFaZKFTycmc"
-      ],
-      "tests": [
-        [
-          "Documentation is not a good way to learn a programming language.",
-          false,
-          "Documentation can be your best friend once you learn how to get the most from it."
-        ],
-        [
-          "Mozilla Developer Network is a great resource that should be referenced regularly.",
-          true
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "MDN y Documentación",
-          "description": [
-            "Esta es una introducción básica a MDN y el concepto de la documentación.",
-            "MDN, Mozilla Developer Network, es una fantástica colaboración de fuentes abiertas que documenta no sólo JavaScript, sino muchos otros lenguajes y temas. Si no has oído hablar de ellos, deberías darles un vistazo ahora. Personalmente obtengo mucha información de <a href='http://developer.mozilla.org/es/docs/Web/JavaScript' target='_blank'>developer.mozilla.org/es/docs/Web/JavaScript</a>",
-            "Cuando digo documentación, estoy hablando acerca de la información que se proporciona sobre el producto a sus usuarios. La documentación de MDN no necesariamente está escrita por la gente detrás de JS. Brendan Eich creó JS en 1995, pero hoy en día el proyecto continúa creciendo gracias a un esfuerzo comunitario. ",
-            "A medida que continúes aprendiendo JavaScript, jQuery, y prácticamente cualquier otro lenguaje o servicio para desarrollo o programación, la documentación será tu amiga.",
-            "Cuanto más rápido te sientas cómodo leyendo y referenciando documentación, más rápido crecerás como desarrollador.",
-            "Estos vídeos no van a enseñarte JavaScript - te presentan términos y conceptos que serán valiosos a medida que continúes practicando y aprendiendo."
-          ]
-        }
-      }
-    },
-    {
-      "id": "56b15f15632298c12f31518d",
-      "title": "Value Types",
-      "description": [
-        "Learn about the three most basic types of values: booleans, strings, and numbers.",
-        "A boolean is a true or false value. These words are special and reserved. You can't name a variable 'true', because that word is already universal as a boolean (as is 'false').",
-        "A string is a set of characters that is set between either single (') or double (\") quotation marks. This string can be named 'true', as long as it's between those quotation marks.",
-        "Numbers are pretty self-explanatory - a number is a value that consists only of digits, though it can also contain a decimal or a negative sign."
-      ],
-      "challengeSeed": [
-        "fahY2YY5Atg"
-      ],
-      "tests": [
-        [
-          "Numbers can include decimals.",
-          true
-        ],
-        [
-          "If a value is text that isn't the word true or false, it's a string. ",
-          false,
-          "To be a string, the content must be wrapped in either single or double quotations."
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Tipos de valores",
-          "description": [
-            "Aprende sobre los tres tipos más básicos de valores: Booleanos, cadenas y números",
-            "Un booleano es un valor <code>true</code> (verdadero) o <code>false</code> (falso). Estas palabras son especiales y reservadas. No puedes nombrar a una variable como \"true\", porque esa palabra es ya universal como un valor lógico (así como lo es \"false\"). ",
-            "Una cadena es un conjunto de caracteres que se establecen entre apóstrofes (') o entre comillas (\"). Una cadena puede ser \"true\", siempre y cuando sea con comillas o con apóstrofes. ",
-            "Los números se explican por sí mismos - un número es un valor que se compone sólo de dígitos, aunque también puede contener un decimal o un signo negativo."
-          ]
-        }
-      }
-    },
-    {
-      "id": "56b15f15632298c12f31518b",
-      "title": "Variables & camelCase",
-      "description": [
-        "We are going to cover what constitutes a variable, and the reasoning behind camelCase.",
-        "A variable also referred to as 'var', is the name or placeholder for a boolean, string, number, or another piece of static information.",
-        "You can use Google Dev Tools to inspect the Free Code Camp home page and look for some variables.",
-        "You 'declare' variables the first time with 'var' in front of it, but those can be referenced later in your script.",
-        "camelCase is the way that JavaScript pushes words together and still keeps them legible. The first letter of the first word is lowercase, along with the remainder of the word, but the first letter of every consecutive word is capitalized. There are no spaces. Examples: brianaLovesHerPets, bestFoodIsCheese, and codeIsWorthLearning.",
-        "When you name variables, utilize camelCase. Also try to keep the names descriptive and short so that others (and yourself!) can tell what that variable is referring to just by the name."
-      ],
-      "challengeSeed": [
-        "NJhXiR1z7Kg"
-      ],
-      "tests": [
-        [
-          "camelCase is mandatory in JavaScript.",
-          false,
-          "Though camelCase is widely used, it isn't mandatory. It's not a bad idea to get used to using it sooner rather than later."
-        ],
-        [
-          "Variables can only hold information that is a boolean, string, or number.",
-          false,
-          "Variables can hold all kinds of static information including arrays and objects."
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Variables y capitalizaciónCamello",
-          "description": [
-            "Vamos a cubrir lo que constituye una variable, y el razonamiento detrás de la capitalizaciónCamello (<em>camelCase</em>).",
-            "Una variable, también conocida como una 'var', es el nombre o el espacio para un booleano, una cadena, un número, u otra pieza de información estática.",
-            "Puedes usar las Herramientas de desarrollo de Google para inspeccionar la página principal de FreeCodeCamp y buscar algunas variables.",
-            "Tu 'declaras' variables por primera vez con <code>var</code> en frente de ella, pero después puedes referenciarla más adelante en tu programa.",
-            "capitalizaciónCamello es una forma en la que juntas varias palabras y aún así las mantienes legibles. La primera letra de la primera palabra va en minúsculas al igual que el resto de la primera palabra, pero la primera letra de cada palabra que siga se escribe en mayúsculas. No hay espacios. Ejemplos: brianaAmaSusMascotas, laMejorComidaEsElQueso, y valeLaPenaAprenderProgramacion.",
-            "Al asignar un nombre de variable, usa capitalizaciónCamello. Además, trata de mantener los nombres descriptivos y cortos para que los demás (¡e incluso tu!) puedan entender a lo que se refiere la variable simplemente por el nombre."
-          ]
-        }
-      }
-    },
-    {
-      "id": "56b15f15632298c12f31518a",
-      "title": "Arrays & Objects",
-      "description": [
-        "If you want to store more than one piece of information to a variable, you can do so by creating an array or an object.",
-        "**Disclaimer: Objects in JS are not exactly the same as objects in other languages. We will discuss objects here as they pertain to JS.",
-        "Arrays are sets of data between [square, brackets]. Data is separated by commas. That data can be in the form of a boolean, string, number, or even another array. We call that a nested array.",
-        "Objects are a type of data that can look or behave similar to an array in the way that it's more data stored in one variable in an organized way. You'll hear it referred to as JSON, and when you make API calls to other sites (getting information to display on your own page) it will frequently be returned in JSON.",
-        "An example of object notation is: var obj = {'name' : 'Briana', 'food' : 'cheese', 'dog' : 'Maurice'};",
-        "Notice the curly brackets, the 'keys' with values like name or food,, and the value called a 'property' that is tied to the 'key', like Briana or cheese. These are ALL stored as strings, although booleans, numbers, and other types of data are also valid."
-      ],
-      "challengeSeed": [
-        "yHLGUxt0EKc"
-      ],
-      "tests": [
-        [
-          "Arrays are easy to spot because of their [square brackets]. ",
-          true
-        ],
-        [
-          "Objects in JavaScript are the same as objects in every other language.",
-          false,
-          "Objects in JS are slightly different, but as long as you understand the context for JS, you'll be fine until you decide to learn one of those other languages."
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Vectores y objetos",
-          "description": [
-            "Si desea almacenar más de una pieza de información en una variable, puedes hacerlo mediante la creación de un vector o de un objeto.",
-            "** Exención de responsabilidad: Los objetos de JS no son exactamente lo mismo que los objetos en otros lenguajes. Vamos a discutir aquí objetos con respecto a JS. ",
-            "Los vectores son conjuntos de valores entre [corchetes]. Los valores se separan con comas. Cada valor puede ser booleano, cadena, número, o incluso otro vector. A esto último le llamamos vector anidado. A un vector compuesto por vectores de la misma longitud le llamamos matriz. ",
-            "Los objetos son un tipo de datos que pueden verse o comportarse como un vector, en la medida que se trata de más valores almacenados en una variable de una manera organizada. Oirás que un objeto se puede representar en JSON, y con frecuencia cuando haces llamadas a la API de algunos sitios (para obtener información que necesitas mostrar en tu propia página) está será devuelta en JSON. ",
-            "Un ejemplo de la notación de objetos es:  <code>var obj = { 'nombre': 'Briana', 'comida': 'queso', 'perro': 'Maurice'};</code>",
-            "Fíjate que un objeto se encierra entre llaves { ... }, que los diferentes atributos se separan por comas, que cada atributo consta de una palabra llave y de un valor. Por ejemplo son llaves 'nombre', 'comida' y 'perro' y sus respectivos valores son 'Briana', 'queso' y 'Maurice'. En este ejmplo todos los valores fueron cadenas, aunque también son válidos booleanos, números y otros tipos de datos."
-          ]
-        }
-      }
-    },
-    {
-      "id": "56b15f15632298c12f315189",
-      "title": "Finding and Indexing Data in Arrays",
-      "description": [
-        "There are many reasons you might need to access a certain piece of data from within a larger set, and you do that by referencing its index.",
-        "We won't get into syntax now, but you should know that the first thing in an array is actually index 0.",
-        "This goes for strings and objects, too. All of these indices start at 0, so if you're looking asking the code to find indexArr[2], you're really going to get the third piece of information in that array."
-      ],
-      "challengeSeed": [
-        "FACqPCLxPTY"
-      ],
-      "tests": [
-        [
-          "The first entry in array has the index of 1.",
-          false,
-          "The first entry in an array has an index of 0."
-        ],
-        [
-          "Arrays must contain all of the same type of information, like booleans.",
-          false,
-          "Arrays can contain any mix of data types."
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Encontrando e indexando valores en vectores",
-          "description": [
-            "Hay muchas razones por las que puedes necesitar acceder a una determinada pieza de información al interior de un conjunto más amplio, lo cual haces referenciando su índice.",
-            "No vamos a entrar en la sintaxis, pero debes saber que el primer elemento en un vector tiene en realidad el índice 0.",
-            "Esto también aplica para cadenas y objetos. Todos estos índices comienzan en 0, por lo que si en tu programa usas <code>miVector[2]</code>, realmente vas a obtener la tercera pieza de información del vector <code>miVector</code>."
-          ]
-        }
-      }
-    },
-    {
-      "id": "56b15f15632298c12f315188",
-      "title": "Manipulating Data",
-      "description": [
-        "Methods and functions are ways you can manipulate variables or other sets of information.",
-        "Methods are built into JavaScript, and you will become more familiar with these as you write functions for the bonfires.",
-        "I'd suggest looking through the MDN (Mozilla Developer Network that we discussed in the first video) to familiarize yourself with the sheer amount and general potential for the methods that exist. <a href='http://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Methods_Index' target='_blank'>developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Methods_Index</a>",
-        "Examples include '.split(' ')', which will turn a string into an array and can do so in many different ways. Methods are powerful - many times when you want your script to do something, there's a method for that.",
-        "Functions, like variables, are something you define and create.",
-        "During your algorithm practice at Free Code Camp, you will create functions that take a certain piece of information and manipulate it in whatever way you choose.",
-        "You'll become more familiar with syntax there, but for now, just remember that with methods and functions you can do almost anything with your code."
-      ],
-      "challengeSeed": [
-        "vZAm3Ve9CGM"
-      ],
-      "tests": [
-        [
-          "Whenever there's a specific manipulation you want to apply, you should check the methods before writing your own code.",
-          true
-        ],
-        [
-          "When writing your own functions, you should keep your code clean by only using minimal amounts of methods. ",
-          false,
-          "Methods are there to help you! Use them in your own functions as well as on their own."
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Manipulación de los datos",
-          "description": [
-            "Métodos y funciones son formas con las que puedes modificar variables u otros conjuntos de información.",
-            "Los métodos están integrados en JavaScript, y te familiarizarás con estos cuando realices los desafíos sobre algoritmos.",
-            "Me gustaría sugerirte dar un vistazo a MDN (Mozilla Developer Network que discutimos en el primer video) para que te familiarices con la cantidad y el potencial general de los métodos que existen. <a href='http://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Methods_Index' target='_blank'>developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Methods_Index</a>",
-            "Los ejemplos incluyen <code>.split (' ')</code>, que convertirá una cadena en un vector y puede hacerlo de muchas maneras diferentes. Los métodos son de gran alcance - muchas veces cuando quieres que tu programa haga algo, ya habrá un método para eso.",
-            "Las funciones, al igual que las variables, son algo que tu defines y creas.",
-            "Durante tu práctica con algoritmos en FreeCodeCamp, vas a crear funciones que reciben una determinada pieza de información y la manipulan de la forma que elijas.",
-            "Vas a estar más familiarizado con la sintaxis, pero por ahora, sólo recuerda que con los métodos y funciones puedes hacer casi cualquier cosa con tu código."
-          ]
-        }
-      }
-    },
-    {
-      "id": "56b15f15632298c12f315187",
-      "title": "Math",
-      "description": [
-        "There is a static object named 'Math' in JS with many built in properties and methods.",
-        "You'll want to investigate this further whenever you're manipulating numbers. Check MDN documentation before writing your own functions, because they may already be defined there.",
-        "Examples include Math.random() which will return a random number in a given range and Math.round() which will round the input to the nearest integer.",
-        "I used Math.random() when I built the random quote generator for the Free Code Camp front end development project.",
-        "When you're working with numbers, you should also be aware that JS has an interesting attribute called 'floating-point format'.",
-        "Depending on the amount of numbers, the size of those numbers, and the number of computations, JS may return something that is inaccurate by .00004.",
-        "There are ways around this, and in general it doesn't pose issues, but it's something you should be aware of in the event you run into some problems that aren't making sense."
-      ],
-      "challengeSeed": [
-        "pyU5zV4tIL4"
-      ],
-      "tests": [
-        [
-          "When talking about Math in JavaScript, all of the methods and functions work like they would on any calculator.",
-          false,
-          "Remember 'floating-point format'."
-        ],
-        [
-          "There are special methods and functions specific for the 'Math' object.",
-          true
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Matemáticas",
-          "description": [
-            "Hay un objeto estático de nombre 'Math' en JS con muchos propiedades y métodos incluidos.",
-            "Vas a querer investigar más de este cuando manipules números. Consulta la documentación de MDN antes de escribir tus propias funciones, pues ya podrían estar definidas allí. ",
-            "Los ejemplos incluyen <code>Math.random()</code> que devolverá un número aleatorio en un rango y <code>Math.round()</code> que redondeará el número decimal que reciba al entero más cercano.",
-            "Yo utilicé <code>Math.random()</code> cuando construí el generador de citas aleatorias como proyecto de desarrollo de interfaces en FreeCodeCamp.",
-            "Cuando trabajes con números, también debes estar consciente de que JS tiene un atributo interesante llamado 'formato de coma flotante'.",
-            "Dependiendo de la cantidad de números, su tamaño y la cantidad de cálculos, JS puede devolver un número que es inexacto en 0,00004.",
-            "Hay maneras de evitar esto, y en general no plantean problemas, pero es algo que debes tener en cuenta si te encuentras con algunos problemas que parecen no tienen sentido."
-          ]
-        }
-      }
-    },
-    {
-      "id": "56b15f15632298c12f315186",
-      "title": "Loops",
-      "description": [
-        "If there's a set of data, (we'll use an array for this example, but it doesn't have to be,) and you want to perform the same manipulation to every piece in that set of data, you can use something called a loop.",
-        "Loops have some complex syntax to get used to at first, but once you have it, they're extremely useful. I used loops in many of my algorithm solutions.",
-        "You don't need to understand everything here - just know that loops exist when you need to traverse a set of data and they can cut down on the amount of code you need to write."
-      ],
-      "challengeSeed": [
-        "Hzzmqhc3U0o"
-      ],
-      "tests": [
-        [
-          "There's only one type of loop.",
-          false,
-          "There are many types of loops that fit many different needs."
-        ],
-        [
-          "Loops can only traverse arrays.",
-          false,
-          "Loops can be built to fit many different situations."
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Ciclos",
-          "description": [
-            "Si hay un conjunto de valores (vamos a utilizar un vector en este ejemplo, pero no tiene que ser así) y deseas realizar la misma operación a cada valor del conjunto, puedes usar algo llamado ciclo. ",
-            "Los ciclos tienen una sintaxis compleja a la que inicialmente es difícil acostumbrarse, pero una vez que la entiendas, son de gran utilidad. Yo usé ciclos en muchas de mis soluciones. ",
-            "No es necesario que entiendas todo aquí - sólo que sepas que existen ciclos cuando necesitas recorrer un conjunto de datos y que pueden reducir la cantidad de código que debes escribir."
-          ]
-        }
-      }
-    },
-    {
-      "id": "56b15f15632298c12f315185",
-      "title": "Regular Expressions",
-      "description": [
-        "RegExp is not formatted like anything else in JS, and can have a steep learning curve.",
-        "RegExp can also be an incredibly useful and efficient tool.",
-        "Using RegExp, you can match, replace, search, and split a string, one of the most difficult types of values to manipulate.",
-        "Like with all of the other videos, we won't get into the nitty gritty, but I want to show you a few examples of where RegExp is useful.",
-        "If you wanted to create a registration page that verified passwords contained at least a number and a capital letter, you could use RegExp.",
-        "If you wanted to ensure that dates entered in a page were all valid dates in the future, you could use RegExp.",
-        "While there are limitless ways to use RegExp, many of them include validating or automatically editing information."
-      ],
-      "challengeSeed": [
-        "EgFjQ8ug3W8"
-      ],
-      "tests": [
-        [
-          "RegExp can be a useful tool when working with strings. ",
-          true
-        ],
-        [
-          "RegExp can be intimidating, and if you don't like it, you can probably just avoid using it.",
-          false,
-          "Be patient with RegExp and with yourself. It can be a great tool that saves you from writing too much or inefficient code."
-        ]
-      ],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "expresiones regulares (RegExp)",
-          "description": [
-            "Las RegExp no siguen el formato del resto de JS, y pueden requerir una curva de aprendizaje.",
-            "Las epresiones regulares (abreviado <em>RegExp</em>) también pueden ser una herramienta muy útil y eficiente.",
-            "Usando RegExp, puedes hacer coincidir, reemplazar, buscar y dividir una cadena, uno de los tipos más difíciles de manipular.",
-            "Al igual que con todos los otros videos, no vamos a entrar en detalles, pero quiero mostrar algunos ejemplos donde las RegExp son útiles.",
-            "Si quisieras crear una página de registro que verifique las contraseñas para que contengan al menos un número y una letra mayúscula, puedes usar expresiones regulares.",
-            "Si quieres asegurarte de que las fechas introducidas en una página sean todas fechas válidas en el futuro, puedes usar RegExp.",
-            "Si bien hay infinitas maneras de utilizar RegExp, muchas de estas incluyen validaciones o ediciones automáticas de información."
-          ]
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/04-video-challenges/machine-learning.json b/seed/challenges/04-video-challenges/machine-learning.json
deleted file mode 100644
index 7c6cfd47ab83ad..00000000000000
--- a/seed/challenges/04-video-challenges/machine-learning.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "Machine Learning",
-  "order": 13,
-  "time": "0 hours",
-  "isComingSoon": true,
-  "challenges": [
-    {
-      "id": "bd7128d8c441eddfbeb5bdd8",
-      "title": "Learn Machine Learning Challenges",
-      "description": [],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Machine Learning"
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/04-video-challenges/math-for-programmers.json b/seed/challenges/04-video-challenges/math-for-programmers.json
deleted file mode 100644
index 379a6834c368d5..00000000000000
--- a/seed/challenges/04-video-challenges/math-for-programmers.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "Math for Programmers",
-  "order": 14,
-  "time": "0 hours",
-  "isComingSoon": true,
-  "challenges": [
-    {
-      "id": "bd7128d8c441eddfbeb5bdd7",
-      "title": "Learn Math for Programmers Challenges",
-      "description": [],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Math for Programmers"
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/04-video-challenges/mobile-javascript-development.json b/seed/challenges/04-video-challenges/mobile-javascript-development.json
deleted file mode 100644
index ae7c66a9d0f988..00000000000000
--- a/seed/challenges/04-video-challenges/mobile-javascript-development.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "Mobile JavaScript Development",
-  "order": 15,
-  "time": "0 hours",
-  "isComingSoon": true,
-  "challenges": [
-    {
-      "id": "bd7128d8c441eddfbeb5bdd6",
-      "title": "Learn Mobile JavaScript Development Challenges",
-      "description": [],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Mobile JavaScript Development"
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/04-video-challenges/software-engineering-principles.json b/seed/challenges/04-video-challenges/software-engineering-principles.json
deleted file mode 100644
index c33adc464b74a7..00000000000000
--- a/seed/challenges/04-video-challenges/software-engineering-principles.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "Software Engineering Principles",
-  "order": 17,
-  "time": "0 hours",
-  "isComingSoon": true,
-  "challenges": [
-    {
-      "id": "bd7128d8c441ecdfbeb5bdd5",
-      "title": "Learn Software Engineering Principles Challenges",
-      "description": [],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Software Engineering Principles"
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/04-video-challenges/statistics.json b/seed/challenges/04-video-challenges/statistics.json
deleted file mode 100644
index 2b9b5be631d702..00000000000000
--- a/seed/challenges/04-video-challenges/statistics.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "Statistics",
-  "order": 18,
-  "time": "0 hours",
-  "isComingSoon": true,
-  "challenges": [
-    {
-      "id": "bd7128d8c441eddfbeb5bdd4",
-      "title": "Learn Statistics Challenges",
-      "description": [],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Statistics"
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/04-video-challenges/tools.json b/seed/challenges/04-video-challenges/tools.json
deleted file mode 100644
index 793127661cbe65..00000000000000
--- a/seed/challenges/04-video-challenges/tools.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "Tools",
-  "order": 19,
-  "time": "0 hours",
-  "isComingSoon": true,
-  "challenges": [
-    {
-      "id": "bd7128d8c441eddfbeb5bdd3",
-      "title": "Learn Tools Challenges",
-      "description": [],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Tools"
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/04-video-challenges/user-experience-design.json b/seed/challenges/04-video-challenges/user-experience-design.json
deleted file mode 100644
index fef21b41788f09..00000000000000
--- a/seed/challenges/04-video-challenges/user-experience-design.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "User Experience Design",
-  "order": 20,
-  "time": "0 hours",
-  "isComingSoon": true,
-  "challenges": [
-    {
-      "id": "bd7128d8c441eddfbeb5bdd2",
-      "title": "Learn User Experience Design Challenges",
-      "description": [],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "User Experience Design"
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/04-video-challenges/visual-design.json b/seed/challenges/04-video-challenges/visual-design.json
deleted file mode 100644
index 4a000a23544817..00000000000000
--- a/seed/challenges/04-video-challenges/visual-design.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-  "name": "Visual Design",
-  "order": 21,
-  "time": "0 hours",
-  "isComingSoon": true,
-  "challenges": [
-    {
-      "id": "bd7128d8c441eddfbeb5bdd1",
-      "title": "Learn Visual Design Challenges",
-      "description": [],
-      "challengeSeed": [],
-      "tests": [],
-      "type": "hike",
-      "challengeType": 6,
-      "translations": {
-        "es": {
-          "title": "Visual Design"
-        }
-      }
-    }
-  ]
-}
diff --git a/seed/challenges/05-apis-and-microservices/api-and-microservice-projects.json b/seed/challenges/05-apis-and-microservices/api-and-microservice-projects.json
new file mode 100644
index 00000000000000..a556512d143260
--- /dev/null
+++ b/seed/challenges/05-apis-and-microservices/api-and-microservice-projects.json
@@ -0,0 +1,264 @@
+{
+  "name": "API and Microservice Projects",
+  "order": 4,
+  "time": "150 hours",
+  "helpRoom": "HelpBackend",
+  "challenges": [
+    {
+      "id": "bd7158d8c443edefaeb5bdef",
+      "title": "Timestamp Microservice",
+      "description": [
+        "Build a full stack JavaScript app that is functionally similar to this: <a href='https://curse-arrow.gomix.me/' target='_blank'>https://curse-arrow.gomix.me/</a> on GoMix or on your own publicly accessible domain.",
+        "Start by remixing this boilerplate GoMix project: <a href='https://gomix.com/#!/project/shimmer-ripper'>https://gomix.com/#!/project/shimmer-ripper</a>. Then get all the tests for the below user stories to pass."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "I can pass a string as a parameter, and it will check to see whether that string contains either a unix timestamp or a natural language date (example: January 1, 2016).",
+          "testString": ""
+        },
+        {
+          "text": "If it does, it returns both the Unix timestamp and the natural language form of that date.",
+          "testString": ""
+        },
+        {
+          "text": "If it does not contain a date or Unix timestamp, it returns null for those properties.",
+          "testString": ""
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "basejump",
+      "isRequired": true,
+      "releasedOn": "January 1, 2016",
+      "challengeType": 4,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "title": "Microservicio de Marca Temporal",
+          "description": [
+          ]
+        }
+      }
+    },
+    {
+      "id": "bd7158d8c443edefaeb5bdff",
+      "title": "Request Header Parser Microservice",
+      "description": [
+        "Build a full stack JavaScript app that is functionally similar to this: <a href='https://dandelion-roar.gomix.me/' target='_blank'>https://dandelion-roar.gomix.me/</a> on GoMix or on your own publicly accessible domain.",
+        "Start by remixing this boilerplate GoMix project: <a href='https://gomix.com/#!/project/shimmer-ripper'>https://gomix.com/#!/project/shimmer-ripper</a>. Then get all the tests for the below user stories to pass."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "I can get the IP address, language and operating system for my browser.",
+          "testString": ""
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "basejump",
+      "isRequired": true,
+      "releasedOn": "January 1, 2016",
+      "challengeType": 4,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "title": "Microservicio para analizar el encabezado de una petición",
+          "description": [
+          ]
+        }
+      }
+    },
+    {
+      "id": "bd7158d8c443edefaeb5bd0e",
+      "title": "URL Shortener Microservice",
+      "description": [
+        "Build a full stack JavaScript app that is functionally similar to this: <a href='https://thread-paper.gomix.me/' target='_blank'>https://thread-paper.gomix.me/</a> on GoMix or on your own publicly accessible domain.",
+        "Start by remixing this boilerplate GoMix project: <a href='https://gomix.com/#!/project/shimmer-ripper'>https://gomix.com/#!/project/shimmer-ripper</a>. Then get all the tests for the below user stories to pass."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "I can pass a URL as a parameter and I will receive a shortened URL in the JSON response.",
+          "testString": ""
+        },
+        {
+          "text": "If I pass an invalid URL that doesn't follow the valid http://www.example.com format, the JSON response will contain an error instead.",
+          "testString": ""
+        },
+        {
+          "text": "When I visit that shortened URL, it will redirect me to my original link.",
+          "testString": ""
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "basejump",
+      "isRequired": true,
+      "releasedOn": "January 1, 2016",
+      "challengeType": 4,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "title": "Microservicio para acortar URLs",
+          "description": [
+          ]
+        }
+      }
+    },
+    {
+      "id": "bd7158d8c443edefaeb5bdee",
+      "title": "Exercise Tracker",
+      "description": [
+        "Build a full stack JavaScript app that is functionally similar to this: <a href='https://fuschia-custard.gomix.me/' target='_blank'>https://fuschia-custard.gomix.me/</a> on GoMix or on your own publicly accessible domain.",
+        "Start by remixing this boilerplate GoMix project: <a href='https://gomix.com/#!/project/fcc-message'>https://gomix.com/#!/project/fcc-message</a>. Then get all the tests for the below user stories to pass."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "I can create a user by posting form data username to /api/exercise/new-user and returned will be an object with username and <code>_id</code>.",
+          "testString": ""
+        },
+        {
+          "text": "I can get an array of all users by getting api/exercise/users with the same info as when creating a user.",
+          "testString": ""
+        },
+        {
+          "text": "I can add an exercise to any user by posting form data userId(_id), description, duration, and optionally date to /api/exercise/add. If no date supplied it will use current date. Returned will the the user object with also with the exercise fields added.",
+          "testString": ""
+        },
+        {
+          "text": "I can retrieve a full exercise log of any user by getting /api/exercise/log with a parameter of userId(_id). Return will be the user object with added array log and count (total exercise count).",
+          "testString": ""
+        },
+        {
+          "text": "I can retrieve part of the log of any user by also passing along optional parameters of from & to or limit. (Date format yyyy-mm-dd, limit = int)",
+          "testString": ""
+        }        
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "basejump",
+      "isRequired": true,
+      "releasedOn": "January 1, 2016",
+      "challengeType": 4,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "title": "Capa de abstracción para buscar imágenes",
+          "description": [
+          ]
+        }
+      }
+    },
+    {
+      "id": "bd7158d8c443edefaeb5bd0f",
+      "title": "File Metadata Microservice",
+      "description": [
+        "Build a full stack JavaScript app that is functionally similar to this: <a href='https://purple-paladin.gomix.me/' target='_blank'>https://purple-paladin.gomix.me/</a> on GoMix or on your own publicly accessible domain.",
+        "Start by remixing this boilerplate GoMix project: <a href='https://gomix.com/#!/project/shimmer-ripper'>https://gomix.com/#!/project/shimmer-ripper</a>. Then get all the tests for the below user stories to pass."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "I can submit a FormData object that includes a file upload.",
+          "testString": ""
+        },
+        {
+          "text": "When I submit something, I will receive the file size in bytes within the JSON response.",
+          "testString": ""
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "basejump",
+      "isRequired": true,
+      "releasedOn": "January 1, 2016",
+      "challengeType": 4,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "title": "Microservicio de metadatos de archivos",
+          "description": [
+          ]
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/05-apis-and-microservices/basic-node-and-express.json b/seed/challenges/05-apis-and-microservices/basic-node-and-express.json
new file mode 100644
index 00000000000000..4be4fac2016040
--- /dev/null
+++ b/seed/challenges/05-apis-and-microservices/basic-node-and-express.json
@@ -0,0 +1,553 @@
+{
+  "name": "Basic Node and Express",
+  "order": 2,
+  "time": "5 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "587d7fb0367417b2b2512bec",
+        "title": "Introduction to the Basic Node and Express Challenges",
+        "description": [
+          [
+            "",
+            "",
+            "Node.js is a JavaScript tool that allows developers to write backend (server-side) programs in JavaScript. Node.js comes with a handful of built-in modules--small, independent programs--that help facilitate this purpose. Some of the core modules include:<br><br><ul><li>HTTP: a module that acts as a server</li><li>File System: a module that reads and modifies files</li><li>Path: a module for working with directory and file paths</li><li>Assertion Testing: a module that checks code against prescribed constraints</li></ul><br>Express, while not included with Node.js, is another module often used with it. Express runs between the server created by Node.js and the frontend pages of a web application. Express also handles an application's routing. Routing directs users to the correct page based on their interaction with the application.<br><br>While there are alternatives to using Express, its simplicity makes it a good place to begin when learning the interaction between a backend powered by Node.js and the frontend.",
+            ""
+          ]
+        ],
+        "releasedOn": "",
+        "challengeSeed": [],
+        "tests": [],
+        "type": "Waypoint",
+        "challengeType": 7,
+        "isRequired": false,
+        "titleEs": "",
+        "descriptionEs": [
+          []
+        ],
+        "titleFr": "",
+        "descriptionFr": [
+          []
+        ],
+        "titleDe": "",
+        "descriptionDe": [
+          []
+        ]
+    },
+    {
+      "id": "587d7fb0367417b2b2512bed",
+      "title": "Meet the Node console",
+      "description": [
+        "During the development process, is important to be able to check what’s going on in your code. Node is just a javascript environment. Like client side javascript, you can use the console to display useful debug information. On your local machine, you would see the console output in a terminal. On HyperDev you can open the logs in the lower part of the screen. You can toggle the log panel if you push the button ‘Logs’ (top-left, under the app name).",
+        "To get started, just put the classic Hello World in the console. We recommend to keep the log panel open while working at these challenges. Reading the logs you can be aware of the nature of the errors that may occur."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text" : "<code>\"Hello World\"</code> should be in the console",
+          "testString" : "getUserInput => $.get(getUserInput('url') + '/_api/hello-console').then(data => { assert.isTrue(data.passed, '\"Hello World\" is not in the server console'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb0367417b2b2512bee",
+      "title": "Start a working Express Server",
+      "description": [
+        "In the first two lines of the file myApp.js you can see how it’s easy to create an Express app object. This object has several methods, and we will learn many of them in these challenges. One fundamental method is app.listen(<port>). It tells your server to listen on a given port, putting it in running state. You can see it at the bottom of the file. It is inside comments because for testing reasons we need the app to be running in background. All the code that you may want to add goes between these two fundamental parts. HyperDev stores the port number in the environemet variable process.env.PORT. Its value is 3000.",
+        "Let’s serve our first string ! In Express, routes takes the following structure: app.METHOD(PATH, HANDLER). METHOD is an http method in lowercase. PATH is a relative path on the server (it can be a string, or even a regular expression). HANDLER is a function that Express calls when the route is matched.",
+        "Handlers take the form function(req, res) {...}, where req is the request object, and res is the response object. For example, the handler",
+        "<code>function(req, res) {</code>",
+        "<code> res.send('Response String');</code>",
+        "<code>}</code>",
+        "will serve the string 'Response String'.",
+        "Use the app.get() method to serve the string Hello Express, to GET requests matching the / root path. Be sure that your code works by looking at the logs, then see the results in your browser, clicking the button ‘Show Live’ in the HyperDev UI."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text" : "Your app should serve the string 'Hello Express'",
+          "testString" : "getUserInput => $.get(getUserInput('url')).then(data => { assert.equal(data, 'Hello Express', 'Your app does not serve the text \"Hello Express\"'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb0367417b2b2512bef",
+      "title": "Serve an HTML file",
+      "description": [
+        "We can respond with a file using the method res.sendFile(<file>).",
+        "You can put it inside the app.get('/', ...) route handler. Behind the scenes this method will set the appropriate headers to instruct your browser on how to handle the file you want to send, according to its type. Then it will read and send the file. This method needs an absolute file-path. We recommend you to use the node global variable __dirname to calculate the path.",
+        "e.g. absolutePath = __dirname + relativePath/file.ext .",
+        "The file to send is /views/index.html. Try to ‘Show Live’ your app, you should see a big HTML heading (and a form that we will use later…), with no style applied.",
+        "Note: You can edit the solution of the preceding challenge, or create a new one. If you create a new solution, keep in mind that Express evaluates the routes from top to bottom. It executes the handler for the first match. You have to comment out the preceding solution, or the server will keep responding with a string."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text" : "Your app should serve the file views/index.html",
+          "testString" : "getUserInput => $.get(getUserInput('url')).then(data => { assert.match(data, /<h1>.*<\\/h1>/. 'Your app does not serve the expected HTML'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb0367417b2b2512bf0",
+      "title": "Serve Static assets",
+      "description": [
+        "An HTML server usually has one or more directories that are accessible by the user. You can place there the static assets needed by your application (stylesheets, scripts, images). In Express you can put in place this functionality using the middleware express.static(<public-dir-absolute_path>). If don’t know what a midleware is, don’t worry. We’ll discuss about it later in details. Basically middleware are function that intercept route handlers, adding some kind of information. A middleware needs to be mounted using the method app.use([optional-path], <mware function>). The first path argument is optional. If you don’t pass it, the middleware will be executed for all the requests.",
+        "Mount the express.static() middleware for all the requests with app.use(). The absolute path to the assets folder is __dirname + /public.",
+        "Now your app should be able to serve a CSS stylesheet. From outside the public folder will appear mounted to the root directory. Your front-page should look a little better now"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text" : "Your app should serve asset files from the <code>/public</code> directory",
+          "testString" : "getUserInput => $.get(getUserInput('url') + '/style.css').then(data => { assert.match(data, /body\\s*\\{[^\\}]*\\}/, 'Your app does not serve static assets'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb1367417b2b2512bf1",
+      "title": "Serve JSON on a specific route",
+      "description": [
+        "While an HTML server serves (you guessed it ?) HTML, an API serves data. A REST API allows data exchange in a simple way, without the need for clients to know any detail about the server. The client only needs to know where the resource is (the URL), and the action it wants to perform on it (the verb). The GET verb is used when you are fetching some information, without modifying anything. In these days the preferred data format to move these informations around the web is JSON. In few words JSON is a convenient way to represent a JavaScript object as a string, so it can be easily transmitted.",
+        "Let’s create a route that responds with JSON at the path (/json). You can do it as usual, with the app.get() method. Inside the route handler use the method res.json(<object>). This method closes the request-response loop, returning the data. Behind the scenes it converts a valid Javascript object into a string. Then sets the appropriate headers to tell your browser that you are serving JSON, and sends the data back. A valid object has the usual structure {key: data}. data can ba a number, a string, a nested objects or an array. data can also be a variable or the result of a function call. It will be evaluated before converting into a string.",
+        "Serve the object <code>{message: 'json'}</code> as a response in JSON format, to the GET requests to the route /json. Point your browser to <your-app-url>/json, you should see the message on the screen."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text" : "The endpoint /json should serve the json <code>{\"message\": \"Hello json\"}</code>",
+          "testString" : "getUserInput => $.get(getUserInput('url') + '/json').then(data => { assert.equal(data.message, 'Hello json', 'The \\'/json\\' endpoint does not serve the right data'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb1367417b2b2512bf2",
+      "title": "Use the .env file",
+      "description": [
+        "The .env file is an hidden file that is used to pass environment variables to your application. This file is secret, noone but you can access it. In this file you should store data that you want to keep secret. For example you can store API keys from external services or your database URI. You can also use it to store configuration options. Setting that options you can change the behavior of your application, without the need of rewriting some code. The environment variables are accessible from the app as process.env.VAR_NAME. The process.env object is a global Node object. The variables are passed as strings. By convention the variable names are all uppercase, with words separated by _. The .env is a shell file so you don’t need to quote names or values, and there cannot be space around the = e.g. VAR_NAME=value. Usually you will put each variable definition on a separate line.",
+        "We are going to use one environment variable as a configuration option. Store the variable MESSAGE_STYLE=uppercase in the .env file. Then change the GET /json route handler so that if process.env.MESSAGE_STYLE equals to \"uppercase\" the response object becomes {message: HELLO JSON}."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text" : "The response of the endpoint /json should change setting the environment variable MESSAGE_STYLE",
+          "testString" : "getUserInput => $.get(getUserInput('url') + '/_api/use-env-vars').then(data => { assert.isTrue(data.passed, 'The response of \"/json\" does not change according to MESSAGE_STYLE'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb1367417b2b2512bf3",
+      "title": "Implement a Root-level Request Logger Middleware",
+      "description": [
+        "Before we introduced the express.static() middleware function. Now it’s time to see what middleware is, in more detail. Middleware functions are functions that take 3 arguments: the request object, the response object, and the next function in the application’s request-response cycle. These functions execute some code that can have side effects on the app, and usually add informations to the request or response objects. They can also end the cycle sending the response, when some condition is met. If they don’t send the response, when they are done they start the execution of the next function in the stack. This is triggered calling the 3rd argument next(). More information here in the express documentation.",
+        "Look at the following example :",
+        "<code>function(req, res, next) {</code>",
+        "<code>  console.log(\"I'm middleware...\" );</code>",
+        "<code>  next();</code>",
+        "<code>}</code>",
+        "Let’s suppose we mounted this function on a route. When a request matches the route, it displays the string “I’m middleware…”. Then it executes the next function in the stack.",
+        "In this exercise we are going to build a root-level middleware. As we have seen in challenge 4, to mount a middleware function at root level we can use the method app.use(<mware-function). In this case the function will be executed for all the request. If you want a function to be executed let’s say only for POST request, you could use app.post(<mware-function>). Analogous methods exist for all the http verbs (GET, DELETE, PUT, …).",
+        "Build a simple logger. For every request, it should log in the console a string taking the following format : method path - ip. You can get the request method (http verb), the relative route path, and the caller’s ip from the request object, using req.method, req.path and req.ip. Remember to call next() when you are done, or your server will be stuck forever. Be sure to have the ‘Logs’ opened, and see what happens when some request arrives…",
+        "Hint: Express evaluates functions in order. This is true for middleware too. If you want it to work for all the routes, it should be mounted before them."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text" : "Root level logger middleware should be active",
+          "testString" : "getUserInput => $.get(getUserInput('url') + '/_api/root-middleware-logger').then(data => { assert.isTrue(data.passed, 'root-level logger is not working as expected'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb1367417b2b2512bf4",
+      "title": "Chain Middleware to Create a Time Server",
+      "description": [
+        "Middleware can be mounted at a specific route using app.METHOD('<path>', mware). Middleware can also be chained inside route definition.",
+        "Look at the following example :",
+        "<code>app.get('/user', function(req, res, next){</code>",
+        "<code>  req.user = getTheUserSync();  // Hypotetical Synchronous operation</code>",
+        "<code>  next();</code>",
+        "<code>}, function(req, res) {</code>",
+        "<code>  res.send(req.user)</code>",
+        "<code>})</code>",
+        "This approach is useful to split the server operations into smaller units. That leads a to a better app structure, and the possibility to reuse code in different places. This approach can be also used to perform some validation on the data. At each point of the middleware stack you can block the execution of the current chain and pass control to functions specifically desinged to handle errors. Or you can pass control to the next matching route, to handle special cases. We will see how in the advanced express section.",
+        "In the route app.get('/now', ...) chain a middleware function and the final handler. In the middleware function you should add the current time to the request object in the req.time key. You can use new Date().toString(). In the handler, respond with a json object, taking the structure {time: req.time}.",
+        "Hint: The test will not pass if you don’t chain the middleware. If you mount the function somewhere else, the test will fail, even if the output result is correct."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text" : "The /now endpoint should have mounted middleware",
+          "testString" : "getUserInput => $.get(getUserInput('url') + '/_api/chain-middleware-time').then(data => { assert.equal(data.stackLength, 2, '\"/now\" route has no mounted middleware'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text" : "The /now endpoint should return a time that is +/- 20 secs from now",
+          "testString" : "getUserInput => $.get(getUserInput('url') + '/_api/chain-middleware-time').then(data => { var now = new Date(); assert.isAtMost(Math.abs(new Date(data.time) - now), 20000, 'the returned time is not between +- 20 secs from now'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb2367417b2b2512bf5",
+      "title": "Get Route Parameter Input from the Client",
+      "description": [
+        "When building an API, we have to allow users to comunicate us what they want to get from our service. For example, if the client is requesting informations about a user stored in the database, she needs a way to let us know which user she is interested in. One possible way to get this result, is using route parameters. Route parameters are named segments of the URL, delimited by slashes (/). Each segment captures the value of the part of the URL which match its position. The captured values are populated in the req.params object.",
+        "<code>route_path: '/user/:userId/book/:bookId'</code>",
+        "<code>actual_request_URL: '/user/546/book/6754' </code>",
+        "<code>req.params: {userId: '546', bookId: '6754'}</code>",
+        "Build an echo server, mounted at the route GET /:word/echo. Respond with a json document, taking the structure {echo: <word>}. You can find the word to be repeated at req.params.word. You can test your route from your browser the address bar, visiting some matching routes, e.g. <your-app-rootpath>/freecodecamp/echo"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text" : "Test 1 : Your echo server should repeat words correctly",
+          "testString" : "getUserInput => $.get(getUserInput('url') + '/eChOtEsT/echo').then(data => { assert.equal(data.echo, 'eChOtEsT', 'Test 1: the echo server is not working as expected') }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text" : "Test 2 : Your echo server should repeat words correctly",
+          "testString" : "getUserInput => $.get(getUserInput('url') + '/ech0-t3st/echo').then(data => { assert.equal(data.echo, 'ech0-t3st', 'Test 2: the echo server is not working as expected') }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb2367417b2b2512bf6",
+      "title": "Get Query Parameter Input from the Client",
+      "description": [
+        "Another common way to get input from the client is by encoding the data after the route path, using a Query string. The query string is delimited by a question mark ?, and includes field=value couples. Each couple is separated by an ampersand &. Express can parse the data from the query string, and populate the object req.query. Some character cannot be in URLs, so the query string needs to be encoded. If you use the API from javascript, you can use specific methods to encode/decode the URL.",
+        "<code>route_path: '/library'</code>",
+        "<code>actual_request_URL: '/library?userId=546&bookId=6754' </code>",
+        "<code>req.query: {userId: '546', bookId: '6754'}</code>",
+        "Build an API endpoint, mounted at GET /name. Respond with a json document, taking the structure <code>{ name: '<firstname> <lastname>'}</code>. The first and last name parameters should be encoded in a query string e.g. ?first=<firstname>&last=<lastname>.",
+        "TIP: In the following exercise we are going to receive data from a POST request, at the same /name route path. If you want you can use the method app.route(<path>).get(<handler>).post(<handler>). This syntax allows you to chain different verb handlers on the same path route. You can save a bit of typing, and have cleaner code."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text" : "Test 1 : Your API endpoint should respond with the correct name",
+          "testString" : "getUserInput => $.get(getUserInput('url') + '/name?first=Mick&last=Jagger').then(data => { assert.equal(data.name, 'Mick Jagger', 'Test 1: \"GET /name\" route does not behave as expected') }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text" : "Test 2 : Your APi endpoint should respond with the correct name",
+          "testString" : "getUserInput => $.get(getUserInput('url') + '/name?last=Richards&first=Keith').then(data => { assert.equal(data.name, 'Keith Richards', 'Test 2: \"GET /name\" route does not behave as expected') }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb2367417b2b2512bf7",
+      "title": "Use Body-Parser to Parse POST Requests",
+      "description": [
+        "Besides GET there is another common http verb , it is POST. POST is the default method used to send client data with HTML forms. In the REST convention POST is used to send data to create new items in the database (a new user, or a new blog post). We don’t have a database in this project, but we are going to learn how to handle POST requests anyway.",
+        "In these kind of request the data doesn’t appear in the URL, it is hidden in the request body. This is a part of the HTML request, also called payload. Since HTML is text based, even if you don’t see the data, it doesn’t mean that they are secret. The raw content of an HTTP Post is shown below:",
+        "<code>POST /path/subpath HTTP/1.0</code>",
+        "<code>From: john@example.com</code>",
+        "<code>User-Agent: someBrowser/1.0</code>",
+        "<code>Content-Type: application/x-www-form-urlencoded</code>",
+        "<code>Content-Length: 20</code>",
+        "<code>name=John+Doe&age=25</code>",
+        "As you can see the body is encoded like the query string. This is the default format used by HTML forms. With Ajax we can also use JSON to be able to handle data having a more complex structure. There is also another type of encoding : multipart/form-data. This one is used to upload binary files.",
+        "In this exercise we will use an urlencoded body.",
+        "To parse the data coming from POST requests, you have to install a package: the body-parser. This package allows you to use a series of middleware, which can decode data in different formats. See the docs here.",
+        "Install the body-parser module in your package.json. Then require it at the top of the file. Store it in a variable named bodyParser.",
+        "The middleware to handle url encoded data is returned by bodyParser.urlencoded({extended: false}). extended=false is a configuration options that tells the parser to use the classic encoding. When using it, values can be only strings or arrays. The extended version allows more data flexibility, but is outmatched by JSON. app.use() the function returned by the previous method call. As usual, the middleware must be mounted before all the routes which need it."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text" : "The 'body-parser' middleware should be mounted",
+          "testString" : "getUserInput => $.get(getUserInput('url') + '/_api/add-body-parser').then(data => { assert.isAbove(data.mountedAt, 0, '\"body-parser\" is not mounted correctly') }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb2367417b2b2512bf8",
+      "title": "Get Data from POST Requests",
+      "description": [
+        "Mount a POST handler at the path /name. It’s the same path as before. We have prepared a form in the html frontpage. It will submit the same data of exercise 10 (Query string). If the body-parser is configured correctly, you should find the parameters in the object req.body. Have a look at the usual library example :",
+        "<code>route: POST '/library'</code>",
+        "<code>urlencoded_body: userId=546&bookId=6754 </code>",
+        "<code>req.body: {userId: '546', bookId: '6754'}</code>",
+        "Respond with the same JSON object as before: {name: '<firstname> <lastname>'}. Test if your endpoint works using the html form we provided in the app frontpage.",
+        "Tip: There are several other http methods other than GET and POST. And by convention there is a corrispondence between the http verb, and the operation you are going to execute on the server. The conventional mapping is :",
+        "POST (sometimes PUT) - Create a new resource using the information sent with the request,",
+        "GET - Read an existing resource without modifying it,",
+        "PUT or PATCH (sometimes POST) - Update a resource using the data sent,",
+        "DELETE => Delete a resource.",
+        "There are also a couple of other methods which are used to negotiate a connection with the server. Except from GET, all the other methods listed above can have a payload (i.e. the data into the request body). The body-parser middleware works with these methods as well."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text" : "Test 1 : Your API endpoint should respond with the correct name",
+          "testString" : "getUserInput => $.post(getUserInput('url') + '/name', {first: 'Mick', last: 'Jagger'}).then(data => { assert.equal(data.name, 'Mick Jagger', 'Test 1: \"POST /name\" route does not behave as expected') }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text" : "Test 2 : Your API endpoint should respond with the correct name",
+          "testString" : "getUserInput => $.post(getUserInput('url') + '/name', {first: 'Keith', last: 'Richards'}).then(data => { assert.equal(data.name, 'Keith Richards', 'Test 2: \"POST /name\" route does not behave as expected') }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    }
+  ]
+}
diff --git a/seed/challenges/05-apis-and-microservices/claim-your-apis-and-microservices-certificate.json b/seed/challenges/05-apis-and-microservices/claim-your-apis-and-microservices-certificate.json
new file mode 100644
index 00000000000000..e1874d27ea57d5
--- /dev/null
+++ b/seed/challenges/05-apis-and-microservices/claim-your-apis-and-microservices-certificate.json
@@ -0,0 +1,108 @@
+{
+  "name": "Claim Your APIs and Microservices Certificate",
+  "order": 13,
+  "time": "5 minutes",
+  "challenges": [
+    {
+      "id": "587d7fb3367417b2b2512bf9",
+      "title": "Claim Your APIs and Microservices Certificate",
+      "description": [
+        [
+          "//i.imgur.com/k8btNUB.jpg",
+          "An image of our APIs and Microservices Certificate",
+          "This challenge will give you your verified APIs and Microservices Certificate. Before we issue your certificate, we must verify that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
+          ""
+        ],
+        [
+          "//i.imgur.com/uLPsUko.jpg",
+          "The definition of plagiarism: Plagiarism (noun) - copying someone else’s work and presenting it as your own without crediting them",
+          "By clicking below, you pledge that all of your submitted code A) is code you or your pair personally wrote, or B) comes from open source libraries like jQuery, or C) has been clearly attributed to its original authors. You also give us permission to audit your challenge solutions and revoke your certificate if we discover evidence of plagiarism.",
+          "#"
+        ],
+        [
+          "//i.imgur.com/UedoV2G.jpg",
+          "An image of the text \"Front End Development Certificate requirements\"",
+          "Let's confirm that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. Click the button below to verify this.",
+          "#"
+        ],
+        [
+          "//i.imgur.com/Q5Za9U6.jpg",
+          "An image of the word \"Congratulations\"",
+          "Congratulations! We've added your APIs and Microservices Certificate to your portfolio page. Unless you choose to hide your solutions, this certificate will remain publicly visible and verifiable.",
+          ""
+        ]
+      ],
+      "challengeSeed": [
+        {
+          "properties": [
+            "isHonest",
+            "isFrontEndCert"
+          ],
+          "apis": [
+            "/certificate/honest",
+            "/certificate/verify/front-end"
+          ],
+          "stepIndex": [
+            1,
+            2
+          ]
+        }
+      ],
+      "tests": [
+        {
+          "id": "bd7158d8c443edefaeb5bdef",
+          "title": "Timestamp Microservice"
+        },
+        {
+          "id": "bd7158d8c443edefaeb5bdff",
+          "title": "Request Header Parser Microservice"
+        },
+        {
+          "id": "bd7158d8c443edefaeb5bd0e",
+          "title": "URL Shortener Microservice"
+        },
+        {
+          "id": "bd7158d8c443edefaeb5bd0f",
+          "title": "File Metadata Microservice"
+        },
+        {
+          "id": "bd7158d8c443edefaeb5bdee",
+          "title": "Exercise Tracker"
+        }
+      ],
+      "type": "Waypoint",
+      "challengeType": 7,
+      "translations": {
+        "es": {
+          "title": "Reclama tu certificado de Desarrollo de interfaces",
+          "description": [
+            [
+              "//i.imgur.com/k8btNUB.jpg",
+              "Una imagen que muestra nuestro certificado de Desarrollo de interfaces",
+              "Este desafío te otorga tu certificado autenticado de Desarrollo de interfaces. Antes de que podamos emitir tu certificado, debemos verificar que has completado todos los desafíos básicos e intermedios de diseño de algoritmos, y todos los proyectos básicos e intermedios de desarrollo de interfaces. También debes aceptar nuestro Juramento de honestidad académica. Pulsa el botón siguiente para iniciar este proceso.",
+              ""
+            ],
+            [
+              "//i.imgur.com/HArFfMN.jpg",
+              "Plagio (nombre): acción y efecto de plagiar. Plagiar (verbo) - copiar en lo sustancial obras ajenas, dándolas como propias.",
+              "Al pulsar el botón siguiente, juras que todo el código en tus soluciones a los desafíos A) es código que tú o tu compañero escribieron personalmente, o B) proviene de librerías de código abierto como jQuery, o C) ha sido claramente atribuido a sus autores originales. También nos otorgas el permiso para auditar tus soluciones a los desafíos y revocar tu certificado si encontramos evidencia de plagio.",
+              "#"
+            ],
+            [
+              "//i.imgur.com/14F2Van.jpg",
+              "Una imagen del texto \"Front End Development Certificate requirements\"",
+              "Confirmemos que has completado todos nuestros desafíos básicos e intermedios de diseño de algoritmos, y todos nuestros proyectos básicos e intermedios de desarrollo de interfaces. Pulsa el botón siguiente para hacer la verificación.",
+              "#"
+            ],
+            [
+              "//i.imgur.com/16SIhHO.jpg",
+              "Una imagen de la palabra \"Congratulations\"",
+              "¡Felicitaciones! Hemos agregado tu certificado de Desarrollo de interfaces a tu portafolio. A menos que elijas no mostrar tus soluciones, este certificado será públicamente visible y verificable.",
+              ""
+            ]
+          ]
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/05-apis-and-microservices/managing-packages-with-npm.json b/seed/challenges/05-apis-and-microservices/managing-packages-with-npm.json
new file mode 100644
index 00000000000000..84e431a3965c69
--- /dev/null
+++ b/seed/challenges/05-apis-and-microservices/managing-packages-with-npm.json
@@ -0,0 +1,492 @@
+{
+  "name": "Managing Packages with npm",
+  "order": 1,
+  "time": "5 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "587d7fb3367417b2b2512bfa",
+        "title": "Introduction to the Managing Packages with npm Challenges",
+        "description": [
+          [
+            "",
+            "",
+            "The Node Package Manager (npm) is a command-line tool used by developers to share and control modules (or packages) of JavaScript code written for use with Node.js.<br><br>When starting a new project, npm generates a <code>package.json</code> file. This file lists the package dependencies for your project. Since npm packages are regularly updated, the <code>package.json</code> file allows you to set specific version numbers for each dependency. This ensures that updates to a package don't break your project.<br><br>npm saves packages in a folder named <code>node_modules</code>. These packages can be installed in two ways:<br><br><ol><li>globally in a root <code>node_modules</code> folder, accessible by all projects.</li><li>locally within a project's own <code>node_modules</code> folder, accessible only to that project.</li></ol><br>Most developers prefer to install packages local to each project to create a separation between the dependencies of different projects.",
+            ""
+          ]
+        ],
+        "releasedOn": "",
+        "challengeSeed": [],
+        "tests": [],
+        "type": "Waypoint",
+        "challengeType": 7,
+        "isRequired": false,
+        "titleEs": "",
+        "descriptionEs": [
+          []
+        ],
+        "titleFr": "",
+        "descriptionFr": [
+          []
+        ],
+        "titleDe": "",
+        "descriptionDe": [
+          []
+        ]
+    },
+    {
+      "id": "587d7fb3367417b2b2512bfb",
+      "title": "Using Package.json, The Core of Any Node.js Project or npm Package",
+      "description": [
+        "The file package.json is the center of any Node.js project or npm package. It stores information about your project just like the <head>-section in a HTML document describes the content of a webpage. The package.json consists of a single JSON-object where information is stored in \"key\": value-pairs. There are only two required fields in a minimal package.json - name and version - but it’s a good practice to provide additional information about your project that could be useful to future users or maintainers.",
+        "The author-field",
+        "If you go to the HyperDev-project that you set up previously and look at on the left side of your screen, you’ll find the file tree where you can see an overview of the various files in your project. Under the file tree’s back-end section, you’ll find package.json - the file that we’ll be improving in the next couple of challenges.",
+        "One of the most common pieces of information in this file is the author-field that specifies who’s the creator of a project. It can either be a string or an object with contact details. The object is recommended for bigger projects but in our case, a simple string like the following example will do.",
+        "<code>\"author\": \"Jane Doe\",</code>",
+        "Instructions",
+        "Add your name to the author-field in the package.json of your HyperDev project.",
+        "Remember that you’re writing JSON.",
+        "All field-names must use double-quotes (\"), e.g. \"author\"",
+        "All fields must be separated with a comma (,)"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "package.json should have a valid \"author\" key" ,
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.author, '\"author\" is missing'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb3367417b2b2512bfc",
+      "title": "Add a Description to Your package.json",
+      "description": [
+        "The next part of a good package.json is the description-field, where a short but informative description about your project belongs.",
+        "If you some day plan to publishing a package to npm, remember that this is the string that should sell your idea to the user when they decide whether to install your package or not. However, that’s not the only use case for the description: Since it’s a great way to summarize what a project does, it’s just as important for your normal Node.js-projects to help other developers, future maintainers or even your future self understand the project quickly.",
+        "Regardless of what you plan for your project, a description is definitely recommended. Let’s add something similar to this:",
+        "<code>\"description\": \"A project that does something awesome\",</code>",
+        "Instructions",
+        "Add a description to the package.json in your HyperDev project.",
+        "Remember to use double-quotes for field-names (\") and commas (,) to separate fields."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "package.json should have a valid \"description\" key",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.description, '\"description\" is missing'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb4367417b2b2512bfd",
+      "title": "Add Keywords to Your package.json",
+      "description": [
+        "The keywords-field is where you can describe your project using related keywords.",
+        "Example",
+        "<code>\"keywords\": [ \"descriptive\", \"related\", \"words\" ],</code>",
+        "As you can see, this field is structured as an array of double-quoted strings.",
+        "Instructions",
+        "Add an array of suitable strings to the keywords-field in the package.json of your HyperDev project.",
+        "One of the keywords should be freecodecamp."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "package.json should have a valid \"keywords\" key",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.keywords, '\"keywords\" is missing'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "\"keywords\" field should be an Array",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.isArray(packJson.keywords, '\"keywords\" is not an array'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "\"keywords\" should include \"freecodecamp\"",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data);     assert.include(packJson.keywords, 'freecodecamp', '\"keywords\" does not include \"freecodecamp\"'); },  xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb4367417b2b2512bfe",
+      "title": "Add a license to your package.json",
+      "description": [
+        "TODO: This challenge could be used to inspire more people to develop OSS - we should really improve this description.",
+        "The license-field is where you inform users of your project what they are allowed to do with it.",
+        "Some common licenses for open source projects include MIT and BSD. http://choosealicense.com is a great resource if you want to learn more about what license could fit your project.",
+        "License information is not required. Copyright laws in most countries will give you ownership of what you create by default. However, it’s always a good practice to explicitly state what users can and can’t do.",
+        "Example",
+        "<code>\"license\": \"MIT\",</code>",
+        "Instructions",
+        "Fill the license-field in the package.json of your HyperDev project as you find suitable."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "package.json should have a valid \"license\" key",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.license, '\"license\" is missing'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb4367417b2b2512bff",
+      "title": "Add a Version to Your package.json",
+      "description": [
+        "The version is together with name one of the required fields in a package.json. This field describes the current version of your project.",
+        "Example",
+        "<code>\"version\": \"1.2\",</code>",
+        "Instructions",
+        "Add a version to the package.json in your HyperDev project."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "package.json should have a valid \"version\" key",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert(packJson.version, '\"version\" is missing'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb4367417b2b2512c00",
+      "title": "Expand your project with external packages from npm",
+      "description": [
+        "One of the biggest reasons to use a package manager is their powerful dependency management. Instead of manually having to make sure that you get all dependencies whenever you set up a project on a new computer, npm automatically installs everything for you. But how can npm know exactly what your project needs? Meet the dependencies-section of your package.json.",
+        "In the dependencies-section, packages your project require are stored using the following format:",
+        "<code>\"dependencies\": {</code>",
+        "<code>  \"package-name\": \"version\",</code>",
+        "<code>  \"express\": \"4.14.0\"</code>",
+        "<code>}</code>",
+        "Instructions",
+        "Add version 2.14.0 of the package moment to the dependencies-field of your package.json",
+        "Moment is a handy library for working with time and dates."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "\"dependencies\" should include \"moment\"",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data);  assert.property(packJson.dependencies, 'moment', '\"dependencies\" does not include \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "\"moment\" version should be \"2.14.0\"",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data);  assert.match(packJson.dependencies.moment, /^[\\^\\~]?2\\.14\\.0/, 'Wrong version of \"moment\" installed. It should be 2.14.0'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb5367417b2b2512c01",
+      "title": "Manage npm Dependencies By Understanding Semantic Versioning",
+      "description": [
+        "Versions of the npm packages in the dependencies-section of your package.json follow what’s called Semantic Versioning (SemVer), an industry standard for software versioning aiming to make it easier to manage dependencies. Libraries, frameworks or other tools published on npm should use SemVer in order to clearly communicate what kind of changes that projects who depend on the package can expect if they update.",
+        "SemVer doesn’t make sense in projects without public APIs - so unless your project is similar to the examples above, use another versioning format.",
+        "So why do you need to understand SemVer?",
+        "Knowing SemVer can be useful when you develop software that use external dependencies (which you almost always do). One day, your understanding of these numbers will save you from accidentally introducing breaking changes to your project without understanding why things “that worked yesterday” suddenly doesn’t.",
+        "This is how Semantic Versioning works according to the official website:",
+        "Given a version number MAJOR.MINOR.PATCH, increment the:",
+        "MAJOR version when you make incompatible API changes,",
+        "MINOR version when you add functionality in a backwards-compatible manner, and",
+        "PATCH version when you make backwards-compatible bug fixes.",
+        "This means that PATCHes are bug fixes and MINORs add new features but neither of them break what worked before. Finally, MAJORs add changes that won’t work with earlier versions.",
+        "Example",
+        "A semantic version number: 1.3.8",
+        "Instructions",
+        "In the dependencies-section of your package.json, change the version of moment to match MAJOR version 2, MINOR version 10 and PATCH version 2"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "\"dependencies\" should include \"moment\"",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'moment', '\"dependencies\" does not include \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "\"moment\" version should be \"2.10.2\"",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.match(packJson.dependencies.moment, /^[\\^\\~]?2\\.10\\.2/, 'Wrong version of \"moment\". It should be 2.10.2'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb5367417b2b2512c02",
+      "title": "Use the tilde-character to always use the latest patch version of a dependency",
+      "description": [
+        "In the last challenge, we told npm to only include a specific version of a package. That’s a useful way to freeze your dependencies if you need to make sure that different parts of your project stay compatible with each other. But in most use cases you don’t want to miss bug fixes, since they often include important security patches and (hopefully) don’t break things in doing so.",
+        "To allow a npm dependency to get updated to the latest PATCH-version, you can prefix the dependency’s version with the tilde-character (~). In package.json, our current rule for how npm may upgrade moment is to use a specific version only (2.10.2), but we want to allow the latest 2.10.x-version.",
+        "Example",
+        "<code>\"some-package-name\": \"~1.3.8\" allows updates to any 1.3.x version.</code>",
+        "Instructions",
+        "Use the tilde-character (~) to prefix the version of moment in your dependencies and allow npm to update it to any new PATCH release.",
+        "Note that the version numbers themselves not should be changed."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "\"dependencies\" should include \"moment\"",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'moment', '\"dependencies\" does not include \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "\"moment\" version should match \"~2.10.x\"",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.match(packJson.dependencies.moment, /^\\~2\\.10\\./. 'Wrong version of \"moment\". It should be ~2.10.2'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb5367417b2b2512c03",
+      "title": "Use the caret-character to use the latest minor version of a dependency",
+      "description": [
+        "Similar to how the tilde (~) we learned about in the last challenge allow npm to install the latest PATCH for a dependency, the caret (^) allows npm to install future updates as well. The difference is that the caret will allow both MINOR updates and PATCHes.",
+        "At the moment, your current version of moment should be ~2.10.2 which allows npm to install to the latest 2.10.x-version. If we instead were to use the caret (^) as our version prefix, npm would instead be allowed to update to any 2.x.x-version.",
+        "Example",
+        "<code>\"some-package-name\": \"^1.3.8\" allows updates to any 1.x.x version.</code>",
+        "Instructions",
+        "Use the caret-character (^) to prefix the version of moment in your dependencies and allow npm to update it to any new MINOR release.",
+        "Note that the version numbers themselves not should be changed."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "\"dependencies\" should include \"moment\"",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'moment', '\"dependencies\" does not include \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "\"moment\" version should match \"^2.x.x\"",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.match(packJson.dependencies.moment, /^\\^2\\./, 'Wrong version of \"moment\". It should be ^2.10.2'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb5367417b2b2512c04",
+      "title": "Remove a package from your dependencies",
+      "description": [
+        "Now you’ve tested a few ways you can manage dependencies of your project by using the package.json's dependencies-section. You’ve included external packages by adding them to the file and even told npm what types of versions you want by using special characters as the tilde (~) or the caret (^).",
+        "But what if you want to remove an external package that you no longer need? You might already have guessed it - Just remove the corresponding \"key\": value-pair for that from your dependencies.",
+        "This same method applies to removing other fields in your package.json as well",
+        "Instructions",
+        "Remove the package moment from your dependencies.",
+        "Make sure you have the right amount of commas after removing it."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "\"dependencies\" should not include \"moment\"",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.notProperty(packJson.dependencies, 'moment', '\"dependencies\" still includes \"moment\"'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    }
+  ]
+}
diff --git a/seed/challenges/05-apis-and-microservices/mongodb-and-mongoose.json b/seed/challenges/05-apis-and-microservices/mongodb-and-mongoose.json
new file mode 100644
index 00000000000000..69be7f1c71c3b6
--- /dev/null
+++ b/seed/challenges/05-apis-and-microservices/mongodb-and-mongoose.json
@@ -0,0 +1,506 @@
+{
+  "name": "MongoDB and Mongoose",
+  "order": 3,
+  "time": "5 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "587d7fb5367417b2b2512c05",
+        "title": "Introduction to the MongoDB and Mongoose Challenges",
+        "description": [
+          [
+            "",
+            "",
+            "MongoDB is a database that stores data records (documents) for use by an application. Mongo is a non-relational, \"NoSQL\" database. This means Mongo stores all data associated within one record, instead of storing it across many preset tables as in a SQL database. Some benefits of this storage model are:<br><br><ul><li>Scalability: by default, non-relational databases are split (or \"sharded\") across many systems instead of only one. This makes it easier to improve performance at a lower cost.</li><li>Flexibility: new datasets and properties can be added to a document without the need to make a new table for that data.</li><li>Replication: copies of the database run in parallel so if one goes down, one of the copies becomes the new primary data source.</li></ul><br>While there are many non-relational databases, Mongo's use of JSON as its document storage structure makes it a logical choice when learning backend JavaScript. Accessing documents and their properties is like accessing objects in JavaScript.<br><br>Mongoose.js is an npm module for Node.js that allows you to write objects for Mongo as you would in JavaScript. This can make is easier to construct documents for storage in Mongo.",
+            ""
+          ]
+        ],
+        "releasedOn": "",
+        "challengeSeed": [],
+        "tests": [],
+        "type": "Waypoint",
+        "challengeType": 7,
+        "isRequired": false,
+        "titleEs": "",
+        "descriptionEs": [
+          []
+        ],
+        "titleFr": "",
+        "descriptionFr": [
+          []
+        ],
+        "titleDe": "",
+        "descriptionDe": [
+          []
+        ]
+    },
+    {
+      "id": "587d7fb6367417b2b2512c06",
+      "title": "Install and Set Up Mongoose",
+      "description": [
+        "Add mongodb and mongoose to the project’s package.json. Then require mongoose. Store your mLab database URI in the private .env file as MONGO_URI. Connect to the database using mongoose.connect(<Your URI>)"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "\"mongodb\" dependency should be in package.json",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/file/package.json').then(data => { var packJson = JSON.parse(data);     assert.property(packJson.dependencies, 'mongodb'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "\"mongoose\" dependency should be in package.json",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/file/package.json').then(data => { var packJson = JSON.parse(data);     assert.property(packJson.dependencies, 'mongooose'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb6367417b2b2512c07",
+      "title": "Create a Model",
+      "description": [
+        "First of all we need a Schema. Each schema maps to a MongoDB collection. It defines the shape of the documents within that collection.",
+        "Schemas are building block for Models. They can be nested to create complex models, but in this case we’ll keep things simple.",
+        "A model allows you to create instances of your objects, called documents.",
+        "Create a person having this prototype :",
+        "<code>- Person Prototype -</code>",
+        "<code>--------------------</code>",
+        "<code>name : string [required]</code>",
+        "<code>age :  number</code>",
+        "<code>favoriteFoods : array of strings (*) </code>",
+        "Use the mongoose basic schema types. If you want you can also add",
+        "more fields, use simple validators like required or unique,",
+        "and set default values. See the <a href='http://mongoosejs.com/docs/guide.html'>mongoose docs</a>.",
+        "[C]RUD Part I - CREATE",
+        "Note: HyperDev is a real server, and in real servers the interactions with the db happen in handler functions. These function are executed when some event happens (e.g. someone hits an endpoint on your API). We’ll follow the same approach in these exercises. The done() function is a callback that tells us that we can proceed after completing an asynchronous operation such as inserting, searching, updating or deleting. It’s following the Node convention and should be called as done(null, data) on success, or done(err) on error.",
+        "Warning - When interacting with remote services, errors may occur !",
+        "<code>/* Example */</code>",
+        "<code>var someFunc = function(done) {</code>",
+        "<code>  //... do something (risky) ...</code>",
+        "<code>  if(error) return done(error);</code>",
+        "<code>  done(null, result);</code>",
+        "<code>};</code>"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "Creating an instance from a mongoose schema should succeed",
+          "testString": "getUserInput => $.post(getUserInput('url') + '/_api/mongoose-model', {name: 'Mike', age: 28, favoriteFoods: ['pizza', 'cheese']}).then(data => { assert.equal(data.name, 'Mike', '\"model.name\" is not what expected'); assert.equal(data.age, '28', '\"model.age\" is not what expected'); assert.isArray(data.favoriteFoods, '\"model.favoriteFoods\" is not an Array'); assert.include(data.favoriteFoods, 'pizza', '\"model.favoriteFoods\" does not include the expected items'); assert.include(data.favoriteFoods, 'cheese', '\"model.favoriteFoods\" does not include the expected items'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb6367417b2b2512c09",
+      "title": "Create and Save a Record of a Model",
+      "description": [
+        "Create a document instance using the Person constructor you build before. Pass to the constructor an object having the fields name, age, and favoriteFoods. Their types must be conformant to the ones in the Person Schema. Then call the method document.save() on the returned document instance. Pass to it a callback using the Node convention. This is a common pattern, all the following CRUD methods take a callback function like this as the last argument.",
+        "<code>/* Example */</code>",
+        "<code>// ...</code>",
+        "<code>person.save(function(err, data) {</code>",
+        "<code>//   ...do your stuff here...</code>",
+        "<code>});</code>"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "Creating and saving a db item should succeed",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/create-and-save-person').then(data => { assert.isString(data.name, '\"item.name\" should be a String'); assert.isNumber(data.age, '28', '\"item.age\" should be a Number'); assert.isArray(data.favoriteFoods, '\"item.favoriteFoods\" should be an Array'); assert.equal(data.__v, 0, 'The db item should be not previously edited'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb7367417b2b2512c0a",
+      "title": "Create Many Records with Model.create()",
+      "description": [
+        "Sometimes you need to create many instances of your models, e.g. when seeding a database with initial data. Model.create() takes an array of objects like [{name: 'John', ...}, {...}, ...] as the first argument, and saves them all in the db. Create many people with Model.create(), using the function argument arrayOfPeople."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "Creating many db items at once should succeed",
+          "testString": "getUserInput => $.ajax({url: getUserInput('url') + '/_api/create-many-people', type: 'POST', contentType:'application/json', data: JSON.stringify([{name: 'John', age: 24, favoriteFoods: ['pizza', 'salad']}, {name: 'Mary', age: 21, favoriteFoods: ['onions', 'chicken']}])}).then(data => { assert.isArray(data, 'the response should be an array'); assert.equal(data.length, 2, 'the response does not contain the expected number of items'); assert.equal(data[0].name, 'John', 'The first item is not correct'); assert.equal(data[0].__v, 0, 'The first item should be not previously edited'); assert.equal(data[1].name, 'Mary', 'The second item is not correct'); assert.equal(data[1].__v, 0, 'The second item should be not previously edited'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb7367417b2b2512c0b",
+      "title": "Use Model.find()",
+      "description": [
+        "Find all the people having a given name, using Model.find() -> [Person]",
+        "In its simplest usage, Model.find() accepts a query document (a JSON object ) as the first argument, then a callback. It returns an array of matches. It supports an extremely wide range of search options. Check it in the docs. Use the function argument personName as search key."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "Find all items corresponding to a criteria should succeed",
+          "testString": "getUserInput => $.post(getUserInput('url') + '/_api/find-all-by-name', {name: 'r@nd0mN4m3', age: 24, favoriteFoods: ['pizza']}).then(data => { assert.isArray(data, 'the response should be an Array');  assert.equal(data[0].name, 'r@nd0mN4m3', 'item.name is not what expected'); assert.equal(data[0].__v, 0, 'The item should be not previously edited'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb7367417b2b2512c0c",
+      "title": "Use Model.findOne()",
+      "description": [
+        "Model.findOne() behaves like .find(), but it returns only one document (not an array), even if there are items. It is especially useful when searching by properties that you have declared as unique. Find just one person which has a certain food in her favorites, using Model.findOne() -> Person. Use the function argument food as search key."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "Find one item should succeed",
+          "testString": "getUserInput => $.post(getUserInput('url') + '/_api/find-one-by-food', {name: 'Gary', age: 46, favoriteFoods: ['chicken salad']}).then(data => { assert.equal(data.name, 'Gary', 'item.name is not what expected'); assert.deepEqual(data.favoriteFoods, ['chicken salad'], 'item.favoriteFoods is not what expected'); assert.equal(data.__v, 0, 'The item should be not previously edited'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb7367417b2b2512c0d",
+      "title": "Use Model.findById()",
+      "description": [
+        "When saving a document, mongodb automatically adds the field _id, and set it to a unique alphanumeric key. Searching by _id is an extremely frequent operation, so moongose provides a dedicated method for it. Find the (only!!) person having a given _id, using Model.findById() -> Person. Use the function argument personId as search key."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "Find an item by Id should succeed",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/find-by-id').then(data => { assert.equal(data.name, 'test', 'item.name is not what expected'); assert.equal(data.age, 0, 'item.age is not what expected'); assert.deepEqual(data.favoriteFoods, ['none'], 'item.favoriteFoods is not what expected'); assert.equal(data.__v, 0, 'The item should be not previously edited'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb8367417b2b2512c0e",
+      "title": "Perform Classic Updates by Running Find, Edit, then Save",
+      "description": [
+        "In the good old days this was what you needed to do if you wanted to edit a document and be able to use it somehow e.g. sending it back in a server response. Mongoose has a dedicated updating method : Model.update(). It is binded to the low-level mongo driver. It can bulk edit many documents matching certain criteria, but it doesn’t send back the updated document, only a ‘status’ message. Furthermore it makes model validations difficult, because it just directly calls the mongo driver.",
+        "Find a person by _id ( use any of the above methods ) with the parameter personId as search key. Add “hamburger” to the list of her favoriteFoods (you can use Array.push()). Then - inside the find callback - save() the updated Person.",
+        "[*] Hint: This may be tricky if in your Schema you declared favoriteFoods as an Array, without specifying the type (i.e. [String]). In that casefavoriteFoods defaults to Mixed type, and you have to manually mark it as edited using document.markModified('edited-field'). (http://mongoosejs.com/docs/schematypes.html - #Mixed )"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "Find-edit-update an item should succeed",
+          "testString": "getUserInput => $.post(getUserInput('url') + '/_api/find-edit-save', {name:'Poldo', age: 40, favoriteFoods:['spaghetti']}).then(data => { assert.equal(data.name, 'Poldo', 'item.name is not what expected'); assert.equal(data.age, 40, 'item.age is not what expected'); assert.deepEqual(data.favoriteFoods, ['spaghetti', 'hamburger'], 'item.favoriteFoods is not what expected'); assert.equal(data.__v, 1, 'The item should be previously edited'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb8367417b2b2512c0f",
+      "title": "Perform New Updates Using Model.findOneAndUpdate()",
+      "description": [
+        "Recent versions of mongoose have methods to simplify documents updating. Some more advanced features (i.e. pre/post hooks, validation) behave differently with this approach, so the Classic method is still useful in many situations. findByIdAndUpdate() can be used when searching by Id.",
+        "Find a person by Name and set her age to 20. Use the function parameter personName as search key.",
+        "Hint: We want you to return the updated document. o do that you need to pass the options document { new: true } as the 3rd argument to findOneAndUpdate(). By default these methods return the unmodified object."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "findOneAndUpdate an item should succeed",
+          "testString": "getUserInput => $.post(getUserInput('url') + '/_api/find-one-update', {name:'Dorian Gray', age: 35, favoriteFoods:['unknown']}).then(data => { assert.equal(data.name, 'Dorian Gray', 'item.name is not what expected'); assert.equal(data.age, 20, 'item.age is not what expected'); assert.deepEqual(data.favoriteFoods, ['unknown'], 'item.favoriteFoods is not what expected'); assert.equal(data.__v, 0, 'findOneAndUpdate does not increment version by design !!!'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb8367417b2b2512c10",
+      "title": "Delete one Record",
+      "description": [
+        "Delete one person by her _id. You should use one of the methods findByIdAndRemove() or findOneAndRemove(). They are like the previous update methods. They pass the removed document to the cb. As usual, use the function argument personId as search key."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "Deleting an item should succeed",
+          "testString": "getUserInput => $.post(getUserInput('url') + '/_api/remove-one-person', {name:'Jason Bourne', age: 36, favoriteFoods:['apples']}).then(data => { assert.equal(data.name, 'Jason Bourne', 'item.name is not what expected'); assert.equal(data.age, 36, 'item.age is not what expected'); assert.deepEqual(data.favoriteFoods, ['apples'], 'item.favoriteFoods is not what expected'); assert.equal(data.__v, 0); assert.equal(data.count, 0, 'the db items count is not what expected'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb8367417b2b2512c11",
+      "title": "Delete Many Records with Model.remove()",
+      "description": [
+        "Model.remove() is useful to delete all the documents matching given criteria. Delete all the people whose name is “Mary”, using Model.remove(). Pass to it a query ducument with the “name” field set, and of course a callback.",
+        "Note: Model.remove() doesn’t return the deleted document, but a JSON object containing the outcome of the operation, and the number of items affected. Don’t forget to pass it to the done() callback, since we use it in tests."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "Deleting many items at once should succeed",
+          "testString": "getUserInput => $.ajax({url: getUserInput('url') + '/_api/remove-many-people', type: 'POST', contentType:'application/json', data: JSON.stringify([{name: 'Mary', age: 16, favoriteFoods: ['lollipop']}, {name: 'Mary', age: 21, favoriteFoods: ['steak']}])}).then(data => { assert.isTrue(!!data.ok, 'The mongo stats are not what expected'); assert.equal(data.n, 2, 'The number of items affected is not what expected'); assert.equal(data.count, 0, 'the db items count is not what expected'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fb9367417b2b2512c12",
+      "title": "Chain Search Query Helpers",
+      "description": [
+        "If you don’t pass the callback as the last argument to Model.find() (or to the other search methods), the query is not executed. You can store the query in a variable for later use. This kind of object enables you to build up a query using chaining syntax. The actual db search is executed when you finally chain the method .exec(). Pass your callback to this last method. There are many query helpers, here we’ll use the most ‘famous’ ones.",
+        "Find people who like \"burrito\". Sort them by name, limit the results to two documents, and hide their age. Chain .find(), .sort(), .limit(), .select(), and then .exec(). Pass the done(err, data) callback to exec()."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "Chaining query helpers should succeed",
+          "testString": "getUserInput => $.ajax({url: getUserInput('url') + '/_api/query-tools', type: 'POST', contentType:'application/json', data: JSON.stringify([{name: 'Pablo', age: 26, favoriteFoods: ['burrito', 'hot-dog']}, {name: 'Ashley', age: 32, favoriteFoods: ['steak', 'burrito']}, {name: 'Mario', age: 51, favoriteFoods: ['burrito', 'prosciutto']} ]) }).then(data => { assert.isArray(data, 'the response should be an Array'); assert.equal(data.length, 2, 'the data array length is not what expected'); assert.notProperty(data[0], 'age', 'The returned first item has too many properties'); assert.equal(data[0].name, 'Ashley', 'The returned first item name is not what expected'); assert.notProperty(data[1], 'age', 'The returned second item has too many properties'); assert.equal(data[1].name, 'Mario', 'The returned second item name is not what expected');}, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    }
+  ]
+}
diff --git a/seed/challenges/05-full-stack-development-certification/nonprofit-projects.json b/seed/challenges/05-full-stack-development-certification/nonprofit-projects.json
deleted file mode 100644
index cada08daadab93..00000000000000
--- a/seed/challenges/05-full-stack-development-certification/nonprofit-projects.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "name": "Nonprofit Projects",
-  "order": 22,
-  "time": "800 Hours",
-  "isLocked": true,
-  "message": "To qualify for these nonprofit projects, you must first earn all three foundational certifications: Front End, Data Visualization, and Back End",
-  "challenges": [
-    {
-      "title": "Greenfield Nonprofit Project #1",
-      "isRequired": true
-    },
-    {
-      "title": "Greenfield Nonprofit Project #2",
-      "isRequired": true
-    },
-    {
-      "title": "Legacy Code Nonprofit Project #1",
-      "isRequired": true
-    },
-    {
-      "title": "Legacy Code Nonprofit Project #2",
-      "isRequired": true
-    },
-    {
-      "title": "Claim your Full Stack Development Certification"
-    }
-  ]
-}
diff --git a/seed/challenges/06-information-security-and-quality-assurance/advanced-express-tools.json b/seed/challenges/06-information-security-and-quality-assurance/advanced-express-tools.json
new file mode 100644
index 00000000000000..773671c943649c
--- /dev/null
+++ b/seed/challenges/06-information-security-and-quality-assurance/advanced-express-tools.json
@@ -0,0 +1,514 @@
+{
+  "name": "Advanced Node and Express",
+  "order": 3,
+  "time": "5 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "587d7fb9367417b2b2512c13",
+      "title": "Authenticate as a Guest User",
+      "description": [
+        "Cool, we can see messages now, but before we let people to write messages they need to authenticate first.",
+        "We will use passport and friends for our authentications process, since its well documented and it makes things quite easier. By the end of this challenge, you should be able to login to the website as a guest user with the credentials:",
+        "username: 'guestuser'",
+        "password: 'guestuser'",
+        "You can check how passport works internally by viewing the best answer from this URL: http://stackoverflow.com/questions/11142882/how-do-cookies-and-sessions-work",
+        "Food for thought: Those have to be done all together in order to be easily testable if its too much, we must find a way of testing is passport middlewares that users initialized and validate that they work properly.",
+        "Note: This is the most difficult challenge of these series, be patient and very careful while reading the tips' documentation and have in mind that google is your friend as long as you pay Note at the date on the stackoverflow answers you come accross.",
+        "Instructions:",
+        "1) add the 'express-session', passport' and 'passport-local' modules into the package.json file",
+        "2) use express-session middleware #tip1",
+        "3) use passport.session() middleware #tip2",
+        "4) use passport.session() middleware",
+        "5) use passport.serialize() middleware",
+        "6) use passport.deserialize() middleware",
+        "7) use the passport-local.Strategy middleware #tip3",
+        "8) create a login route at POST '/auth/local' #tip2, #tip4 the route should redirect to the index page at path '/' on success or fail login",
+        "9) on the res.render('index') arguments add the session user on the 'user' key help: the session user should exist at the request object: 'req.user'",
+        "10) on the index.pug file use an if conditional expression to control what will be rendered  #tip5 if the user argument is defined, include chatInput.pug and signout.pug othewise, include authentication.pug.",
+        "Note: Make sure restart the server(do and undo any change in the code for it to auto restart) before you run the unit tests, so that the server's state is cleaned."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "",
+          "testString": ""
+        }
+      ],
+      "solutions": [],
+      "hints": [
+        "express-session readme: https://github.com/expressjs/session",
+        "passport readme: https://github.com/jaredhanson/passport",
+        "passport-local readme: https://github.com/jaredhanson/passport-local",
+        "res.redirect: https://expressjs.com/en/4x/api.html#res.redirect",
+        "pug docs: https://pugjs.org/api/getting-started.html"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fc0367417b2b2512c33",
+      "title": "Log the Guest User Out",
+      "description": [
+        "Lets continue by letting the user to logout from the app.",
+        "You can check how passport works internally by viewing the best answer from this URL: http://stackoverflow.com/questions/11142882/how-do-cookies-and-sessions-work",
+        "Instructions:",
+        "1) create a logout route at POST '/auth/logout'",
+        "2) the route should clear the user's session from the server",
+        "3) the route should redirect to the index page at path '/' after logout is performed"
+      ],
+      "challengeSeed": [],
+      "tests": [
+      ],
+      "solutions": [],
+      "hints": [
+        "passport repo: https://github.com/jaredhanson/passport",
+        "res.redirect: https://expressjs.com/en/4x/api.html#res.redirect"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fc0367417b2b2512c32",
+      "title": "Signup a New User",
+      "description": [
+        "Lets continue by letting a user to register to the app.",
+        "You can check how passport works internally by viewing the best answer from this URL: http://stackoverflow.com/questions/11142882/how-do-cookies-and-sessions-work",
+        "Instructions:",
+        "1) create a register route at POST '/auth/local/register'",
+        "2) the route should create a user with the User.create method",
+        "3) on successful create, the route should authenticate the user as well just like on the 'auth/local' route",
+        "4) the route should redirect to the index page at path '/' on error or success",
+        "Remember that on an express route you are able to use multiple middleware functions that are going to be called after an other.",
+        "For example: ",
+        "<code>app.post('/some/post/route',</code>",
+        "<code>  function method1(req, res, next) {</code>",
+        "<code>   console.info('I am method 1');</code>",
+        "<code>   next();</code>",
+        "<code>  },</code>",
+        "<code>  someExternalMiddleware(),</code>",
+        "<code>  function(req, res, next) {</code>",
+        "<code>   res.redirect('/');</code>",
+        "<code>  }</code>",
+        "<code>);</code>",
+        "ctrl-f '#challenge' in this file to fill in the missing code to complete this challenge"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "",
+          "testString": ""
+        }
+      ],
+      "solutions": [],
+      "hints": [
+        "passport repo: https://github.com/jaredhanson/passport",
+        "res.redirect: https://expressjs.com/en/4x/api.html#res.redirect"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fbf367417b2b2512c31",
+      "title": "Send a New Message by Responding with a Model",
+      "description": [
+        "Lets continue by letting a user to send a message in the app.",
+        "Instructions:",
+        "1) create a messaging route at POST '/api/message'",
+        "message format expected from the database:",
+        "<code>var args = {</code>",
+        "<code>  creator: {</code>",
+        "<code>    id: sessionUser._id,</code>",
+        "<code>    name: sessionUser.name,</code>",
+        "<code>    avatarUrl: sessionUser.avatarUrl</code>",
+        "<code>  },</code>",
+        "<code>  text: body.text,</code>",
+        "<code>  geo: body.geo || {}</code>",
+        "<code>};</code>",
+        "1) Use the req.body for the request body and req.user for the session user data.",
+        "2) the route should be accessible only to authenticated users check that req.isAuthenticated() returns true or that req.user is defined",
+        "3) if the user is not authenticated the route should respond with status 403 and <code>{message: 'not authenticated'}</code> in the body",
+        "4) the route should create a message with the Message.create method",
+        "5) on error, the route should respond with status 400 and the error in the body",
+        "6) on success, the route should respond with status 201 and the message model as returned by the database in the body. The response data should follow the following format: <code>{model: messageJsonFromDB}</code>. The client should do a dummy reload to display the change."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "",
+          "testString": ""
+        }
+      ],
+      "solutions": [],
+      "hints": [
+        "res.redirect: https://expressjs.com/en/4x/api.html#res.redirect"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fbf367417b2b2512c30",
+      "title": "Send a New Message with a Partial Template Compilation",
+      "description": [
+        "On the previous challenge we were reloading the page after we pushed a new message into the chat",
+        "However, thats a really bad way to handle user input.",
+        "In this challenge you will have to partially compile a template and send it back on the client.",
+        "That way the client will be able to append the html that it got into the page's DOM and the reload",
+        "will not be needed. Cool hah?",
+        "Instructions:",
+        "1) change the current success response on the api/message route. It should respond with the following format: <code>{model: messageJsonFromDB, view: htmlData}</code>",
+        "The html data should be generated with the pug package and the compileFile method. The file you will need",
+        "to compile is the chatMessage.pug which represents a single message. args required:",
+        "user: <session user>,",
+        "message: <message created>"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "",
+          "testString": ""
+        }
+      ],
+      "solutions": [],
+      "hints": [
+        " pug compileFile: https://pugjs.org/api/getting-started.html"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fbf367417b2b2512c2f",
+      "title": "Send a New Message by Making the App Realtime with Websockets",
+      "description": [
+        "So we were able to create a message and responde with its partial html so that it can directly",
+        "be appanded in the page.",
+        "But what about the other users that are into the page?",
+        "If you open two different browser windows and send a message from one of them, the other one will",
+        "need to refresh the page to see the page. That's not cool, right?",
+        "This is where websockets come into the game to make the page look realtime.",
+        "In this challenge you will emit a web socket event after a new message is created at 'api/message'",
+        "so that all connected clients can update their dom.",
+        "You will see a dublicate left aligned message on the sender's page. This is fine...for now",
+        "Instructions:",
+        "1) include the socket.io package into the server package.json & initialize socket.io",
+        "2) include the socket.io library into the client at index.pug. The socket.io package serves the client automatically at: '/socket.io/socket.io.js'",
+        "3) emit a socket event at id: 'chat.message' with data {model: messageJsonFromDB, view: htmlData}",
+        "4) For the html data, use the same method you used in the previous challenge. However, in this case do not pass a user parameter so that the template can understand that it has to generate a template for the receiver. (Received messages are left alligned.)",
+        "The html data should be generated with the pug package and the compileFile method. The file you will need to compile is the chatMessage.pug which represents a single message. args required:",
+        "user: <session user>,",
+        "message: <message created>"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "",
+          "testString": ""
+        }
+      ],
+      "solutions": [],
+      "hints": [
+        "socket.io docs: http://socket.io/docs/",
+        "pug docs :: compileFile: https://pugjs.org/api/getting-started.html"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fbf367417b2b2512c2d",
+      "title": "Retrieve the Route of an Authenticated User",
+      "description": [
+        "Let's get rid of that duplicate message, shall we?",
+        "The client will look at the message model's creator emitted with the websocket and compare them with themselves. If they are not the creator they will append the message into their page.",
+        "However, the way we authenticated with passport only sends a httpOnly cookie to the client. The deal with html-only cookies, is that they are not readable from javascript for security reasons.",
+        "Therefore the client has no way of know its data, unless we server them for them.",
+        "In this challenge we will create a route where the client can retrieve their user data.",
+        "Instructions:",
+        "1) Create route GET '/api/me'",
+        "2) The route should always respond with status 200",
+        "3) The route should return {name: 'guest'} when the user is not authenticated",
+        "4) Otherwise it should return the authenticated user from the session"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "",
+          "testString": ""
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fbe367417b2b2512c2c",
+      "title": "Use Geolocation by IP Route to Request Package for External Resources",
+      "description": [
+        "Things seem to work a lot better at this point, but our users would really like a message footer that would snitch each other's location.",
+        "Don't worry about the details, all you need to know is that the client will need another route from you in order to retrieve their geolocation via ip.",
+        "To do that we will query another site and we will respond with the data we get.",
+        "Instructions:",
+        "1) Include the request package into package.json",
+        "2) Create route GET '/api/geo'",
+        "3) Use the request module to query on this url: http://freegeoip.net/json/<request ip>'",
+        "4) You will need to set enable the trust proxy option for express in order to access the ip from the request object. Dont' bother too much with it, the default options will do for our case.",
+        "5) On request error the route should responde with status 500 and the error in the body",
+        "6) Othewise it should responde with the status code and body returned by the remote server"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "",
+          "testString": ""
+        }
+      ],
+      "solutions": [],
+      "hints": [
+        "request readme: https://github.com/request/request",
+        "express enable: http://expressjs.com/en/api.html#app.enable"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d7fbe367417b2b2512c2b",
+      "title": "Get Geodata from Cookies",
+      "description": [
+        "Right now the client requests for the geolocation data by their ip and sends it to the server every time they are creating a message.",
+        "That makes sense, but it would be better to cache the geolocation data so that we do not request all the time the external api. Geolocation data do not change that often after all.",
+        "This can be done by setting a cookie on the response header. In express to do that we could use the res.cookie utility.",
+        "Instructions:",
+        "1) update route GET '/api/geo' so that it will set a cookie before responding with json. You may use res.cookie to do the job.",
+        "2) include package cookie-parser on package.json",
+        "3) update route POST '/api/message' so that it will create the message withe the geolocation taken from the cookie instead of the body of the request ctrl-f '#challenge' in this file to fill in the missing code to complete this challenge"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "",
+          "testString": ""
+        }
+      ],
+      "solutions": [],
+      "hints": [
+        "express res.cookie: http://expressjs.com/en/api.html#res.cookie",
+        "express cookie parser: https://github.com/expressjs/cookie-parser"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d8246367417b2b2512c34",
+      "title": "Access the Default Avatar File Route",
+      "description": [
+        "Did you notice that broken avatar in the app?",
+        "Don't you think its about time to fixed it?",
+        "We have set the default url of the user's avatar to be be at /avatar/default.",
+        "That means that you will have to create a route that will return the file data.",
+        "Until now we used routes to return json and htmls. However in this case we are going",
+        "to pipe a read stream into the response in order to respond with the file data.",
+        "Use following line to get the path of the path of the avatar:",
+        "var avatarPath = path.join(__dirname, 'node_modules/fcc-advanced-express/img/defaultAvatar.png');",
+        "Instructions:",
+        "1) Create route GET '/avatar/default'",
+        "2) Use node's native file system library to get a read stream of the avatar file",
+        "3) pipe the read stream into the response. You may hit the route on your browser to check if u see an image.",
+        "Note: remember that piping file data to the response works with any type of file. All files contain data that if piped to the response can be sent to the browser. Try to pipe a js script and you will be able to see if on your browser if you hit the route :)"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "",
+          "testString": ""
+        }
+      ],
+      "solutions": [],
+      "hints": [
+        "express res.cookie: http://expressjs.com/en/api.html#res.cookie",
+        "express cookie parser: https://github.com/expressjs/cookie-parser"
+      ],
+      "type": "waypoint",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/06-information-security-and-quality-assurance/claim-your-information-security-and-quality-assurance-certificate.json b/seed/challenges/06-information-security-and-quality-assurance/claim-your-information-security-and-quality-assurance-certificate.json
new file mode 100644
index 00000000000000..71d6c94d22b039
--- /dev/null
+++ b/seed/challenges/06-information-security-and-quality-assurance/claim-your-information-security-and-quality-assurance-certificate.json
@@ -0,0 +1,108 @@
+{
+  "name": "Claim Your Information Security and Quality Assurance Certificate",
+  "order": 13,
+  "time": "5 minutes",
+  "challenges": [
+    {
+      "id": "587d8247367417b2b2512c35",
+      "title": "Claim Your Information Security and Quality Assurance Certificate",
+      "description": [
+        [
+          "//i.imgur.com/k8btNUB.jpg",
+          "An image of our Information Security and Quality Assurance Certificate",
+          "This challenge will give you your verified Information Security and Quality Assurance Certificate. Before we issue your certificate, we must verify that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
+          ""
+        ],
+        [
+          "//i.imgur.com/uLPsUko.jpg",
+          "The definition of plagiarism: Plagiarism (noun) - copying someone else’s work and presenting it as your own without crediting them",
+          "By clicking below, you pledge that all of your submitted code A) is code you or your pair personally wrote, or B) comes from open source libraries like jQuery, or C) has been clearly attributed to its original authors. You also give us permission to audit your challenge solutions and revoke your certificate if we discover evidence of plagiarism.",
+          "#"
+        ],
+        [
+          "//i.imgur.com/UedoV2G.jpg",
+          "An image of the text \"Front End Development Certificate requirements\"",
+          "Let's confirm that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. Click the button below to verify this.",
+          "#"
+        ],
+        [
+          "//i.imgur.com/Q5Za9U6.jpg",
+          "An image of the word \"Congratulations\"",
+          "Congratulations! We've added your Information Security and Quality Assurance Certificate to your portfolio page. Unless you choose to hide your solutions, this certificate will remain publicly visible and verifiable.",
+          ""
+        ]
+      ],
+      "challengeSeed": [
+        {
+          "properties": [
+            "isHonest",
+            "isFrontEndCert"
+          ],
+          "apis": [
+            "/certificate/honest",
+            "/certificate/verify/front-end"
+          ],
+          "stepIndex": [
+            1,
+            2
+          ]
+        }
+      ],
+      "tests": [
+        {
+          "id": "587d8249367417b2b2512c42",
+          "title": "Issue Tracker"
+        },
+        {
+          "id": "587d8249367417b2b2512c41",
+          "title": "Metric-Imperial Converter"
+        },
+        {
+          "id": "587d824a367417b2b2512c43",
+          "title": "Personal Library"
+        },
+        {
+          "id": "587d824a367417b2b2512c44",
+          "title": "Stock Price Checker"
+        },
+        {
+          "id": "587d824a367417b2b2512c45",
+          "title": "Anonymous Message Board"
+        }
+      ],
+      "type": "Waypoint",
+      "challengeType": 7,
+      "translations": {
+        "es": {
+          "title": "Reclama tu certificado de Desarrollo de interfaces",
+          "description": [
+            [
+              "//i.imgur.com/k8btNUB.jpg",
+              "Una imagen que muestra nuestro certificado de Desarrollo de interfaces",
+              "Este desafío te otorga tu certificado autenticado de Desarrollo de interfaces. Antes de que podamos emitir tu certificado, debemos verificar que has completado todos los desafíos básicos e intermedios de diseño de algoritmos, y todos los proyectos básicos e intermedios de desarrollo de interfaces. También debes aceptar nuestro Juramento de honestidad académica. Pulsa el botón siguiente para iniciar este proceso.",
+              ""
+            ],
+            [
+              "//i.imgur.com/HArFfMN.jpg",
+              "Plagio (nombre): acción y efecto de plagiar. Plagiar (verbo) - copiar en lo sustancial obras ajenas, dándolas como propias.",
+              "Al pulsar el botón siguiente, juras que todo el código en tus soluciones a los desafíos A) es código que tú o tu compañero escribieron personalmente, o B) proviene de librerías de código abierto como jQuery, o C) ha sido claramente atribuido a sus autores originales. También nos otorgas el permiso para auditar tus soluciones a los desafíos y revocar tu certificado si encontramos evidencia de plagio.",
+              "#"
+            ],
+            [
+              "//i.imgur.com/14F2Van.jpg",
+              "Una imagen del texto \"Front End Development Certificate requirements\"",
+              "Confirmemos que has completado todos nuestros desafíos básicos e intermedios de diseño de algoritmos, y todos nuestros proyectos básicos e intermedios de desarrollo de interfaces. Pulsa el botón siguiente para hacer la verificación.",
+              "#"
+            ],
+            [
+              "//i.imgur.com/16SIhHO.jpg",
+              "Una imagen de la palabra \"Congratulations\"",
+              "¡Felicitaciones! Hemos agregado tu certificado de Desarrollo de interfaces a tu portafolio. A menos que elijas no mostrar tus soluciones, este certificado será públicamente visible y verificable.",
+              ""
+            ]
+          ]
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/06-information-security-and-quality-assurance/information-security-with-helmetjs.json b/seed/challenges/06-information-security-and-quality-assurance/information-security-with-helmetjs.json
new file mode 100644
index 00000000000000..389a8b04e90b1b
--- /dev/null
+++ b/seed/challenges/06-information-security-and-quality-assurance/information-security-with-helmetjs.json
@@ -0,0 +1,438 @@
+{
+  "name": "Information Security with HelmetJS",
+  "order": 1,
+  "time": "5 hours",
+  "helpRoom": "HelpBackend",
+  "challenges": [
+    {
+      "id": "587d8247367417b2b2512c36",
+      "title": "Install and Require Helmet.js",
+      "description": [
+        "Helmet helps you secure your Express apps by setting various HTTP headers. Install the package, then require it."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "\"helmet\" dependency should be in package.json",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/package.json').then(data => { var packJson = JSON.parse(data); assert.property(packJson.dependencies, 'helmet'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d8247367417b2b2512c37",
+      "title": "Hide potentially dangerous information using helmet.hidePoweredBy()",
+      "description": [
+        "Hackers can exploit known vulnerabilities in Express/Node if they see that your site is powered by Express. X-Powered-By: Express is sent in every request coming from Express by default. The helmet.hidePoweredBy() middleware will remove the X-Powered-By header. You can also explicitly set the header to something else, to throw people off. e.g. app.use(helmet.hidePoweredBy({ setTo: 'PHP 4.2.0' }))"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "helmet.hidePoweredBy() middleware should be mounted correctly",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/app-info').then(data => { assert.include(data.appStack, 'hidePoweredBy'); assert.notEqual(data.headers['x-powered-by'], 'Express')}, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d8247367417b2b2512c38",
+      "title": "Mitigate the risk of clickjacking - helmet.frameguard()",
+      "description": [
+        "Your page could be put in a <frame> or <iframe> without your consent. This can result in clickjacking attacks, among other things. Clickjacking is a technique of tricking a user into interacting with a page different from what the user thinks it is. This can be obtained executing your page in a malicious context, by mean of iframing. In that context a hacker can put a hidden layer over your page. Hidden buttons can be used to run bad scripts. This middleware sets the X-Frame-Options header. It restricts who can put your site in a frame. It has three modes: DENY, SAMEORIGIN, and ALLOW-FROM.",
+        "We don’t need our app to be framed. You should use helmet.frameguard() passing with the configuration object {action: 'deny'}."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "helmet.frameguard() middleware should be mounted correctly",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/app-info').then(data => { assert.include(data.appStack, 'frameguard', 'helmet.frameguard() middleware is not mounted correctly'); }, xhr => { throw new Error(xhr.responseText); })"
+        }, {
+          "text": "helmet.frameguard() 'action' should be set to 'DENY'",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/app-info').then(data => { assert.property(data.headers, 'x-frame-options'); assert.equal(data.headers['x-frame-options'], 'DENY');}, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d8247367417b2b2512c39",
+      "title": "Mitigate the risk of Cross Site Scripting (XSS) Attacks - helmet.xssFilter()",
+      "description": [
+        "Cross-site scripting (XSS) is a frequent type of attack where malicious script are injected into vulnerable pages, on the purpouse of stealing sensitive data like session cookies, or passwords.",
+        "The basic rule to lower the risk of an XSS attack is simple: “Never trust user’s input”. As a developer you should always sanitize all the input coming from the outside. This includes data coming from forms, GET query urls, and even from POST bodies. Sanitizing means that you should find and encode the characters that may be dangerous e.g. <, >.",
+        "Modern browsers can help mitigating the risk by adopting better software strategies. Often these are configurable via http headers.",
+        "The X-XSS-Protection HTTP header is a basic protection. The browser detects a potential injected script using an heuristic filter. If the header is enabled, the browser changes the script code, neutralizing it.",
+        "It still has limited support."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "helmet.xssFilter() middleware should be mounted correctly",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/app-info').then(data => { assert.include(data.appStack, 'xXssProtection'); assert.property(data.headers, 'x-xss-protection'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d8248367417b2b2512c3a",
+      "title": "Avoid inferring the response MIME type - helmet.noSniff()",
+      "description": [
+        "Browsers can use content or MIME sniffing to adapt to different datatypes coming from a response. They override the Content-Type headers to guess and process the data. While this can be convenient in some scenarios, it can also lead to some dangerous attacks. This middleware sets the X-Content-Type-Options header to nosniff. This instructs the browser to not bypass the provided Content-Type."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "helmet.noSniff() middleware should be mounted correctly",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/app-info').then(data => { assert.include(data.appStack, 'nosniff'); assert.equal(data.headers['x-content-type-options'], 'nosniff'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d8248367417b2b2512c3b",
+      "title": "Prevent IE from opening untrusted HTML - helmet.ieNoOpen()",
+      "description": [
+        "Some web applications will serve untrusted HTML for download. Some versions of Internet Explorer by default open those HTML files in the context of your site. This means that an untrusted HTML page could start doing bad things in the context of your pages. This middleware sets the X-Download-Options header to noopen. This will prevent IE users from executing downloads in the trusted site’s context."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "helmet.ieNoOpen() middleware should be mounted correctly",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/app-info').then(data => { assert.include(data.appStack, 'ienoopen'); assert.equal(data.headers['x-download-options'], 'noopen'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d8248367417b2b2512c3c",
+      "title": "Ask browsers to access your site via HTTPS only - helmet.hsts()",
+      "description": [
+        "HTTP Strict Transport Security (HSTS) is a web security policy which helps to protect websites against protocol downgrade attacks and cookie hijacking. If your website can be accessed via HTTPS you can ask user’s browsers to avoid using insecure HTTP. By setting the header Strict-Transport-Security, you tell the browsers to use HTTPS for the future requests in a specified amount of time. This will work for the requests coming after the initial request.",
+        "Configure helmet.hsts() to use HTTPS for the next 90 days. Pass the config object {maxAge: timeInMilliseconds, force: true}. HyperDev already has hsts enabled. To override its settings you need to set the field \"force\" to true in the config object. We will intercept and restore the HyperDev header, after inspecting it for testing.",
+        "Note: Configuring HTTPS on a custom website requires the acquisition of a domain, and a SSL/TSL Certificate."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "helmet.hsts() middleware should be mounted correctly",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/app-info').then(data => { assert.include(data.appStack, 'hsts'); assert.property(data.headers, 'strict-transport-security'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "maxAge should be equal to 7776000 ms (90 days)",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/app-info').then(data => { assert.match(data.headers['strict-transport-security'], /^max-age=777600000;?/); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d8248367417b2b2512c3d",
+      "title": "Disable DNS Prefetching - helmet.dnsPrefetchControl()",
+      "description": [
+        "To improve performance, most browsers prefetch DNS records for the links in a page. In that way the destination ip is already known when the user clicks on a link. This may lead to over-use of the DNS service (if you own a big website, visited by millions people…), privacy issues (one eavesdropper could infer that you are on a certain page), or page statistics alteration (some links may appear visited even if they are not). If you have high security needs you can disable DNS prefetching, at the cost of a performance penalty."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "helmet.dnsPrefetchControl() middleware should be mounted correctly",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/app-info').then(data => { assert.include(data.appStack, 'dnsPrefetchControl'); assert.equal(data.headers['x-dns-prefetch-control'], 'off'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d8249367417b2b2512c3e",
+      "title": "Disable Client-Side Caching - helmet.noCache()",
+      "description": [
+        "If you are releasing an update for your website, and you want the users to always download the newer version, you can (try to) disable caching on client’s browser. It can be useful in development too. Caching has performance benefits, and you will lose them, use this option only when there is a real need."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "helmet.noCache() middleware should be mounted correctly",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/app-info').then(data => { assert.include(data.appStack, 'nocache'); assert.equal(data.headers['cache-control'], 'no-store, no-cache, must-revalidate, proxy-revalidate'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d8249367417b2b2512c3f",
+      "title": "Set a Content Security Policy - helmet.contentSecurityPolicy()",
+      "description": [
+        "This challenge highlights one promising new defense that can significantly reduce the risk and impact of many type of attacks in modern browsers. By setting and configuring a Content Security Policy you can prevent the injection of anything unintended into your page. This will protect protect your app from XSS vulnerabilities, undesidered tracking, malicious frames, and much more. CSP works by defining a whitelist of content sources which are trusted. You can configure them for each kind of resource a web page may need (scripts, stylesheets, fonts, frames, media, and so on…). There are multiple directives available, so a website owner can have a granular control. See HTML 5 Rocks, KeyCDN for more details. Unfortunately CSP in unsupported by older browser.",
+        "By default, directives are wide open, so it’s important to set the defaultSrc directive as a fallback. Helmet supports both defaultSrc and default-src naming styles. The fallback applies for most of the unspecified directives. In this exercise, use helmet.contentSecurityPolicy(), and configure it setting the defaultSrc directive to [\"self\"] (the list of allowed sources must be in an array), in order to trust only your website address by default. Set also the scriptSrc directive so that you will allow scripts to be downloaded from your website, and from the domain 'trusted-cdn.com'.",
+        "Hint: in the \"'self'\" keyword, the single quotes are part of the keyword itself, so it needs to be enclosed in double quotes to be working."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "helmet.csp() middleware should be mounted correctly",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/app-info').then(data => { assert.include(data.appStack, 'csp'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Your csp config is not correct. defaultSrc should be [\"'self'\"] and scriptSrc should be [\"'self'\", 'trusted-cdn.com']",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/app-info').then(data => { var cspHeader = Object.keys(data.headers).filter(function(k){ return k === 'content-security-policy' || k === 'x-webkit-csp' || k === 'x-content-security-policy' })[0]; assert.equal(data.headers[cspHeader], \"default-src 'self'; script-src 'self' trusted-cdn.com\"); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d8249367417b2b2512c40",
+      "title": "The ‘parent’ helmet() middleware",
+      "description": [
+        "app.use(helmet()) will automatically include all the middleware introduced above, except noCache(), and contentSecurityPolicy(), but these can be enabled if necessary. You can also disable or configure any other middleware individually, using a configuration object.",
+        "// Example",
+        "<code>app.use(helmet({</code>",
+        "<code>  frameguard: {         // configure</code>",
+        "<code>    action: 'deny'</code>",
+        "<code>  },</code>",
+        "<code>  contentSecurityPolicy: {    // enable and configure</code>",
+        "<code>   directives: {</code>",
+        "<code>     defaultSrc: [\"self\"],</code>",
+        "<code>     styleSrc: ['style.com'],</code>",
+        "<code>   }</code>",
+        "<code>  },</code>",
+        "<code> dnsPrefetchControl: false     // disable</code>",
+        "<code>}))</code>",
+        "We introduced each middleware separately for teaching purpose, and for ease of testing. Using the ‘parent’ helmet() middleware is easiest, and cleaner, for a real project."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "no tests - it's a descriptive challenge",
+          "testString": "assert(true)"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    }
+  ]
+}
diff --git a/seed/challenges/06-information-security-and-quality-assurance/quality-assurance-and-information-security-projects.json b/seed/challenges/06-information-security-and-quality-assurance/quality-assurance-and-information-security-projects.json
new file mode 100644
index 00000000000000..f1bc38b691d791
--- /dev/null
+++ b/seed/challenges/06-information-security-and-quality-assurance/quality-assurance-and-information-security-projects.json
@@ -0,0 +1,398 @@
+{
+  "name": "Information Security and Quality Assurance Projects",
+  "order": 4,
+  "time": "150 hours",
+  "helpRoom": "HelpBackend",
+  "challenges": [
+    {
+      "id": "587d8249367417b2b2512c41",
+      "title": "Metric-Imperial Converter",
+      "description": [
+        "Build a full stack JavaScript app that is functionally similar to this: <a href='https://hard-twilight.gomix.me/' target='_blank'>https://hard-twilight.gomix.me/</a> on GoMix or on your own publicly accessible domain.",
+        "Start by remixing this boilerplate GoMix project: <a href='https://gomix.com/#!/project/fcc-convert'>https://gomix.com/#!/project/fcc-convert</a>. Then get all the tests for the below user stories to pass."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "I will prevent the client from trying to guess(sniff) the MIME type.",
+          "testString": ""
+        },
+        {
+          "text": "I will prevent cross-site scripting (XSS) attacks.",
+          "testString": ""
+        },
+        {
+          "text": "I can GET /api/convert with a single parameter containing an accepted number and unit and have it converted. (Hint: Split the input by looking for the index of the first character which will mark the start of the unit)",
+          "testString": ""
+        },
+        {
+          "text": "I can convert 'gal' to 'L' and vice versa. (1 gal to 3.78541 L)",
+          "testString": ""
+        },
+        {
+          "text": "I can convert 'lbs' to 'kg' and vice versa. (1 lbs to 0.453592 kg)",
+          "testString": ""
+        },
+        {
+          "text": "I can convert 'mi' to 'km' and vice versa. (1 mi to 1.60934 km)",
+          "testString": ""
+        },
+        {
+          "text": "If my unit of measurement is invalid, returned will be 'invalid unit'.",
+          "testString": ""
+        },
+        {
+          "text": "If my number is invalid, returned with will 'invalid number'.",
+          "testString": ""
+        },
+        {
+          "text": "If both are invalid, return will be 'invalid number and unit'.",
+          "testString": ""
+        },
+        {
+          "text": "I can use fractions, decimals or both in my parameter(ie. 5, 1/2, 2.5/6), but if nothing is provided it will default to 1.",
+          "testString": ""
+        },
+        {
+          "text": "My return will consist of the initNum, initUnit, returnNum, returnUnit, and string spelling out units in format '{initNum} {initial_Units} converts to {returnNum} {return_Units}' with the result rounded to 5 decimals in the string.",
+          "testString": ""
+        },
+        {
+          "text": "All 16 unit tests are complete and passing.",
+          "testString": ""
+        },
+        {
+          "text": "All 5 functional tests are complete and passing.",
+          "testString": ""
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "basejump",
+      "isRequired": true,
+      "releasedOn": "January 15, 2017",
+      "challengeType": 4,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": []
+        }
+      }
+    },
+    {
+      "id": "587d8249367417b2b2512c42",
+      "title": "Issue Tracker",
+      "description": [
+        "Build a full stack JavaScript app that is functionally similar to this: <a href='https://protective-garage.gomix.me/' target='_blank'>https://protective-garage.gomix.me/</a> on GoMix or on your own publicly accessible domain.",
+        "Start by remixing this boilerplate GoMix project: <a href='https://gomix.com/#!/project/fcc-issue'>https://gomix.com/#!/project/fcc-issue</a>. Then get all the tests for the below user stories to pass."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "Prevent cross site scripting (XSS) attacks.",
+          "testString": ""
+        },
+        {
+          "text": "I can POST /api/issues/{projectname} with form data containing required issue_title, issue_text, created_by, and optional assigned_to and status_text.",
+          "testString": ""
+        },
+        {
+          "text": "The object saved (and returned) will include all of those fields (blank for optional no input) and also include created_on(date/time), updated_on(date/time), open(boolean, true for open, false for closed), and _id.",
+          "testString": ""
+        },
+        {
+          "text": "I can PUT /api/issues/{projectname} with a id and any fields in the object with a value to object said object. Returned will be 'successfully updated' or 'could not update '+id. This should always update updated_on. If no fields are sent return 'no updated field sent'.",
+          "testString": ""
+        },
+        {
+          "text": "I can DELETE /api/issues/{projectname} with a id to completely delete an issue. If no _id is sent return 'id error', success: 'deleted '+id, failed: 'could not delete '+id.",
+          "testString": ""
+        },
+        {
+          "text": "I can GET /api/issues/{projectname} for an array of all issues on that specific project with all the information for each issue as was returned when posted.",
+          "testString": ""
+        },
+        {
+          "text": "I can filter my get request by also passing along any field and value in the query(ie. /api/issues/{project}?open=false). I can pass along as many fields/values as I want.",
+          "testString": ""
+        },
+        {
+          "text": "All 11 functional tests are complete and passing.",
+          "testString": ""
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "basejump",
+      "isRequired": true,
+      "releasedOn": "January 15, 2017",
+      "challengeType": 4,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": []
+        }
+      }
+    },
+    {
+      "id": "587d824a367417b2b2512c43",
+      "title": "Personal Library",
+      "description": [
+        "Build a full stack JavaScript app that is functionally similar to this: <a href='https://spark-cathedral.gomix.me/' target='_blank'>https://spark-cathedral.gomix.me/</a> on GoMix or on your own publicly accessible domain.",
+        "Start by remixing this boilerplate GoMix project: <a href='https://gomix.com/#!/project/fcc-library'></a>. Then get all the tests for the below user stories to pass."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "Nothing from my website will be cached in my client.",
+          "testString": ""
+        },
+        {
+          "text": "The headers will say that the site is powered by 'PHP 4.2.0' even though it isn't (as a security measure).",
+          "testString": ""
+        },
+        {
+          "text": "I can post a title to /api/books to add a book and returned will be the object with the title and a unique _id.",
+          "testString": ""
+        },
+        {
+          "text": "I can get /api/books to retrieve an array of all books containing title, _id, and commentcount.",
+          "testString": ""
+        },
+        {
+          "text": "I can get /api/books/{id} to retrieve a single object of a book containing _title, _id, & an array of comments (empty array if no comments present).",
+          "testString": ""
+        },
+        {
+          "text": "I can post a comment to /api/books/{id} to add a comment to a book and returned will be the books object similar to get /api/books/{id} including the new comment.",
+          "testString": ""
+        },
+        {
+          "text": "I can delete /api/books/{_id} to delete a book from the collection. Returned will be 'delete successful' if successful.",
+          "testString": ""
+        },
+        {
+          "text": "If I try to request a book that doesn't exist I will be returned 'no book exists'.",
+          "testString": ""
+        },
+        {
+          "text": "I can send a delete request to /api/books to delete all books in the database. Returned will be 'complete delete successful' if successful.",
+          "testString": ""
+        },
+        {
+          "text": "All 6 functional tests required are complete and passing.",
+          "testString": ""
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "basejump",
+      "isRequired": true,
+      "releasedOn": "January 15, 2017",
+      "challengeType": 4,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": []
+        }
+      }
+    },
+    {
+      "id": "587d824a367417b2b2512c44",
+      "title": "Stock Price Checker",
+      "description": [
+        "Build a full stack JavaScript app that is functionally similar to this: <a href='https://giant-chronometer.gomix.me/' target='_blank'>https://giant-chronometer.gomix.me/</a> on GoMix or on your own publicly accessible domain.",
+        "Start by remixing this boilerplate GoMix project: <a href='https://gomix.com/#!/project/fcc-stock'>https://gomix.com/#!/project/fcc-stock</a>. Then get all the tests for the below user stories to pass."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "Set the content security policies to only allow loading of scripts and css from your server.",
+          "testString": ""
+        },
+        {
+          "text": "I can GET /api/stock-prices with form data containing a Nasdaq stock ticker and recieve back an object stockData.",
+          "testString": ""
+        },
+        {
+          "text": "In stockData, I can see the stock(string, the ticker), price(decimal in string format), and likes(int).",
+          "testString": ""
+        },
+        {
+          "text": "I can also pass along field like as true(boolean) to have my like added to the stock(s). Only 1 like per ip should be accepted.",
+          "testString": ""
+        },
+        {
+          "text": "If I pass along 2 stocks, the return object will be an array with both stock's info. Instead of likes, it will display rel_likes(the difference between the likes on both stocks) on both.",
+          "testString": ""
+        },
+        {
+          "text": "A good way to receive current price is the following external API(replacing 'GOOG' with your stock): https://finance.google.com/finance/info?q=NASDAQ%3aGOOG",
+          "testString": ""
+        },
+        {
+          "text": "All 5 functional tests are complete and passing.",
+          "testString": ""
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "basejump",
+      "isRequired": true,
+      "releasedOn": "January 15, 2017",
+      "challengeType": 4,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": []
+        }
+      }
+    },
+    {
+      "id": "587d824a367417b2b2512c45",
+      "title": "Anonymous Message Board",
+      "description": [
+        "Build a full stack JavaScript app that is functionally similar to this: <a href='https://horn-celery.gomix.me/' target='_blank'>https://horn-celery.gomix.me/</a> on GoMix or on your own publicly accessible domain.",
+        "Start by remixing this boilerplate GoMix project: <a href='https://gomix.com/#!/project/fcc-message'>https://gomix.com/#!/project/fcc-message</a>. Then get all the tests for the below user stories to pass."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "Only allow your site to be loading in an iFrame on your own pages.",
+          "testString": ""
+        },
+        {
+          "text": "Do not allow DNS prefetching.",
+          "testString": ""
+        },
+        {
+          "text": "Only allow your site to send the referrer for your own pages.",
+          "testString": ""
+        },
+        {
+          "text": "I can POST a thread to a specific message board by passing form data text and deletepassword_ to /api/threads/{board}.(Recommend res.redirect to board page /b/{board}) Saved will be at least _id, text, createdon_(date&time), bumpedon_(date&time, starts same as created_on), reported(boolean), deletepassword_, & replies(array).",
+          "testString": ""
+        },
+        {
+          "text": "I can POST a reply to a thread on a specific board by passing form data text, deletepassword_, & threadid_ to /api/replies/{board} and it will also update the bumped_on date to the comments date.(Recommend res.redirect to thread page /b/{board}/{thread_id}) In the thread's replies array will be saved _id, text, createdon_, deletepassword_, & reported.",
+          "testString": ""
+        },
+        {
+          "text": "I can GET an array of the most recent 10 bumped threads on the board with only the most recent 3 replies each from /api/threads/{board}. The reported and deletepasswords_ fields will not be sent to the client.",
+          "testString": ""
+        },
+        {
+          "text": "I can GET an entire thread with all it's replies from /api/replies/{board}?thread_id={thread_id}. Also hiding the same fields the client should be see.",
+          "testString": ""
+        },
+        {
+          "text": "I can delete a thread completely if I send a DELETE request to /api/threads/{board} and pass along the threadid_ & deletepassword_. (Text response will be 'incorrect password' or 'success')",
+          "testString": ""
+        },
+        {
+          "text": "I can delete a post(just changing the text to '[deleted]' instead of removing completely like a thread) if I send a DELETE request to /api/replies/{board} and pass along the threadid_, replyid_, & deletepassword_. (Text response will be 'incorrect password' or 'success')",
+          "testString": ""
+        },
+        {
+          "text": "I can report a thread and change it's reported value to true by sending a PUT request to /api/threads/{board} and pass along the threadid_. (Text response will be 'success')",
+          "testString": ""
+        },
+        {
+          "text": "I can report a reply and change it's reported value to true by sending a PUT request to /api/replies/{board} and pass along the threadid_ & replyid_. (Text response will be 'success')",
+          "testString": ""
+        },
+        {
+          "text": "Complete functional tests that wholly test routes and pass.",
+          "testString": ""
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "basejump",
+      "isRequired": true,
+      "releasedOn": "January 15, 2017",
+      "challengeType": 4,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": []
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/06-information-security-and-quality-assurance/quality-assurance-and-testing-with-chai.json b/seed/challenges/06-information-security-and-quality-assurance/quality-assurance-and-testing-with-chai.json
new file mode 100644
index 00000000000000..5548d3e680cf51
--- /dev/null
+++ b/seed/challenges/06-information-security-and-quality-assurance/quality-assurance-and-testing-with-chai.json
@@ -0,0 +1,1204 @@
+{
+  "name": "Quality Assurance and Testing with Chai",
+  "order": 2,
+  "time": "5 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "587d824a367417b2b2512c46",
+      "title": "Learn How JavaScript Assertions Work",
+      "description": [
+        "Use assert.isNull() or assert.isNotNull() to make the tests pass."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "All tests should pass",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=0').then(data => {assert.equal(data.state,'passed'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - isNull vs. isNotNull",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=0').then(data => {  assert.equal(data.assertions[0].method, 'isNull', 'Null is null'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - isNull vs. isNotNull",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=0').then(data => {  assert.equal(data.assertions[1].method, 'isNotNull', '1 is not null'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d824b367417b2b2512c47",
+      "title": "Test whether a Variable or Function is Defined",
+      "description": [
+        "Use assert.isDefined() or assert.isUndefined() to make the tests pass"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "All tests should pass",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=1').then(data => {assert.equal(data.state,'passed'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - isDefined vs. isUndefined",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=1').then(data => {  assert.equal(data.assertions[0].method, 'isDefined', 'Null is not undefined'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - isDefined vs. isUndefined",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=1').then(data => {  assert.equal(data.assertions[1].method, 'isUndefined', 'Undefined is undefined'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - isDefined vs. isUndefined",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=1').then(data => {  assert.equal(data.assertions[2].method, 'isDefined', 'A string is not undefined'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d824b367417b2b2512c48",
+      "title": "Use Assert.isOK and Assert.isNotOK",
+      "description": [
+        "Use assert.isOk() or assert.isNotOk() to make the tests pass.",
+        ".isOk(truthy) and .isNotOk(falsey) will pass."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "All tests should pass",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=2').then(data => {assert.equal(data.state,'passed'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - isOk vs. isNotOk",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=2').then(data => {  assert.equal(data.assertions[0].method, 'isNotOk', 'Null is falsey'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - isOk vs. isNotOk",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=2').then(data => {  assert.equal(data.assertions[1].method, 'isOk','A string is truthy'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - isOk vs. isNotOk",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=2').then(data => {  assert.equal(data.assertions[2].method, 'isOk', 'true is truthy'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d824b367417b2b2512c49",
+      "title": "Test for Truthiness",
+      "description": [
+        "Use assert.isTrue() or assert.isNotTrue() to make the tests pass.",
+        ".isTrue(true) and .isNotTrue(everything else) will pass.",
+        ".isFalse() and .isNotFalse() also exist."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "All tests should pass",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=3').then(data => {assert.equal(data.state,'passed'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - isTrue vs. isNotTrue",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=3').then(data => {  assert.equal(data.assertions[0].method, 'isTrue', 'True is true'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - isTrue vs. isNotTrue",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=3').then(data => {  assert.equal(data.assertions[1].method, 'isTrue', 'Double negation of a truthy value is true'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - isTrue vs. isNotTrue",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=3').then(data => {  assert.equal(data.assertions[2].method, 'isNotTrue', 'A truthy object is not true - neither is a false one'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d824b367417b2b2512c4a",
+      "title": "Use the Double Equals to Assert Equality",
+      "description": [
+        ".equal(), .notEqual()",
+        ".equal() compares objects using '=='"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "All tests should pass",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=4').then(data => {assert.equal(data.state,'passed'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - equal vs. notEqual",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=4').then(data => {  assert.equal(data.assertions[0].method, 'equal', 'Numbers are coerced into strings with == '); }, xhr => { throw new Error(xhr.responseText); })"
+
+        },
+        {
+          "text": "Choose the right assertion - equal vs. notEqual",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=4').then(data => {  assert.equal(data.assertions[1].method, 'notEqual', ' == compares object references'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - equal vs. notEqual",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=4').then(data => {  assert.equal(data.assertions[2].method, 'equal', '6 * \\'2\\' is 12 ! It should be equal to \\'12\\''); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - equal vs. notEqual",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=4').then(data => {  assert.equal(data.assertions[3].method, 'notEqual', '6 + \\'2\\' is \\'62\\'...'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d824b367417b2b2512c4b",
+      "title": "Use the Triple Equals to Assert Strict Equality",
+      "description": [
+        ".strictEqual(), .notStrictEqual()",
+        ".strictEqual() compares objects using '==='"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "All tests should pass",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=5').then(data => {assert.equal(data.state,'passed'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - strictEqual vs. notStrictEqual",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=5').then(data => {  assert.equal(data.assertions[0].method, 'notStrictEqual', 'with strictEqual the type must match'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - strictEqual vs. notStrictEqual",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=5').then(data => {  assert.equal(data.assertions[1].method, 'strictEqual', '3*2 = 6...'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - strictEqual vs. notStrictEqual",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=5').then(data => {  assert.equal(data.assertions[2].method, 'strictEqual', '6 * \\'2\\' is 12. Types match !'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - strictEqual vs. notStrictEqual",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=5').then(data => {  assert.equal(data.assertions[3].method, 'notStrictEqual', 'Even if they have the same elements, the Arrays are notStrictEqual'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d824c367417b2b2512c4c",
+      "title": "Assert Deep Equality with .deepEqual and .notDeepEqual",
+      "description": [
+        ".deepEqual(), .notDeepEqual()",
+        ".deepEqual() asserts that two object are deep equal"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "All tests should pass",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=6').then(data => {assert.equal(data.state,'passed'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - deepEqual vs. notDeepEqual",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=6').then(data => {  assert.equal(data.assertions[0].method, 'deepEqual', 'The order of the keys does not matter'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - deepEqual vs. notDeepEqual",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=6').then(data => {  assert.equal(data.assertions[1].method, 'notDeepEqual', 'The position of elements within an array does matter'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d824c367417b2b2512c4d",
+      "title": "Compare the Properties of Two Elements",
+      "description": [
+        ".isAbove() => a > b , .isAtMost() => a <= b"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "All tests should pass",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=7').then(data => {assert.equal(data.state,'passed'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - isAbove vs. isAtMost",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=7').then(data => {  assert.equal(data.assertions[0].method, 'isAtMost', '5 is at most (<=) 5'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - isAbove vs. isAtMost",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=7').then(data => {  assert.equal(data.assertions[1].method, 'isAbove', '1 is greater than 0'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - isAbove vs. isAtMost",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=7').then(data => {  assert.equal(data.assertions[2].method, 'isAbove', 'Math.PI = 3.14159265 is greater than 3'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - isAbove vs. isAtMost",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=7').then(data => {  assert.equal(data.assertions[3].method, 'isAtMost', '1 - Math.random() is > 0 and <= 1. It is atMost 1 !'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d824c367417b2b2512c4e",
+      "title": "Test whether one Value is Below or At Least as Large as Another",
+      "description": [
+        ".isBelow() => a < b , .isAtLeast =>  a >= b"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "All tests should pass",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=8').then(data => {assert.equal(data.state,'passed'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - isBelow vs. isAtLeast",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=8').then(data => {  assert.equal(data.assertions[0].method, 'isAtLeast', '5 is at least (>=) 5'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - isBelow vs. isAtLeast",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=8').then(data => {  assert.equal(data.assertions[0].method, 'isAtLeast', '2 * Math.random() is at least 0'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - isBelow vs. isAtLeast",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=8').then(data => {  assert.equal(data.assertions[0].method, 'isBelow', '1 is smaller than 2'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - isBelow vs. isAtLeast",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=8').then(data => {  assert.equal(data.assertions[0].method, 'isBelow', '2/3 (0.6666) is smaller than 1'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d824c367417b2b2512c4f",
+      "title": "Test whether a Value Falls within a Specific Range",
+      "description": [
+        ".approximately",
+        ".approximately(actual, expected, range, [message])",
+        "actual = expected +/- range",
+        "Choose the minimum range (3rd parameter) to make the test always pass",
+        "it should be less than 1"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "All tests should pass",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=10').then(data => {assert.equal(data.state,'passed'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Use approximately(actual, expected, range) - Chose the correct range",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=10').then(data => {  assert.equal(data.assertions[0].method, 'isApproximately', 'weirdNumbers(0.5) is in the range (0.5, 1.5]. It\\'s within 1 +/- 0.5');  assert.equal(data.assertions[0].args[2], 0.5); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Use approximately(actual, expected, range) - Chose the correct range",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=10').then(data => {  assert.equal(data.assertions[1].method, 'isApproximately');  assert.equal(data.assertions[1].args[2], 0.8, 'weirdNumbers(0.2) is in the range (0.2, 1.2] It\\'s within 1 +/- 0.8'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d824d367417b2b2512c50",
+      "title": "Test whether a Value is an Array",
+      "description": [],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "All tests should pass",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=10').then(data => {assert.equal(data.state,'passed'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - isArray vs. isNotArray",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=10').then(data => {  assert.equal(data.assertions[0].method, 'isArray', 'String.prototype.split() returns an Array'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - isArray vs. isNotArray",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=10').then(data => {  assert.equal(data.assertions[1].method, 'isNotArray', 'Array.prototype.indexOf() returns a number'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d824d367417b2b2512c51",
+      "title": "Test whether an Array Contains an Item",
+      "description": [],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "All tests should pass",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=11').then(data => { assert.equal(data.state,'passed'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - include vs. notInclude",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=11').then(data => {  assert.equal(data.assertions[0].method, 'notInclude', 'It\\'s summer in july...'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - include vs. notInclude",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=11').then(data => {  assert.equal(data.assertions[1].method, 'include', 'JavaScript is a backend language !!'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d824d367417b2b2512c52",
+      "title": "Test whether a Value is a String",
+      "description": [
+        "#isString asserts that the actual value is a string."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "All tests should pass",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=12').then(data => { assert.equal(data.state,'passed'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - isString vs. isNotString",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=12').then(data => {  assert.equal(data.assertions[0].method, 'isNotString', 'A float number is not a string'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - isString vs. isNotString",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=12').then(data => {  assert.equal(data.assertions[1].method, 'isString', 'environment vars are strings (or undefined)'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - isString vs. isNotString",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=12').then(data => {  assert.equal(data.assertions[2].method, 'isString', 'A JSON is a string'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d824d367417b2b2512c53",
+      "title": "Test whether a String Contains a Substring",
+      "description": [
+        "#include (on #notInclude ) works for strings too !!",
+        "It asserts that the actual string contains the expected substring"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "All tests should pass",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=13').then(data => { assert.equal(data.state,'passed'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - include vs. notInclude",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=13').then(data => {  assert.equal(data.assertions[0].method, 'include', '\\'Arrow\\' contains \\'row\\'...'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - include vs. notInclude",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=13').then(data => {  assert.equal(data.assertions[1].method, 'notInclude', '... a \\'dart\\' doesn\\'t contain a \\'queue\\''); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d824d367417b2b2512c54",
+      "title": "Use Regular Expressions to Test a String",
+      "description": [
+        "#match Asserts that the actual value",
+        "matches the second argument regular expression."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "All tests should pass",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=14').then(data => { assert.equal(data.state,'passed'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - match vs. notMatch",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=14').then(data => {  assert.equal(data.assertions[0].method, 'match', '\\'# name: John Doe, age: 35\\' matches the regex'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - match vs. notMatch",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=14').then(data => {  assert.equal(data.assertions[1].method, 'notMatch', '\\'# name: Paul Smith III, age: twenty-four\\' does not match the regex (the age must be numeric)'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d824e367417b2b2512c55",
+      "title": "Test whether an Object has a Property",
+      "description": [
+        "#property asserts that the actual object has a given property.",
+        "Use #property or #notProperty where appropriate"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "All tests should pass",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=15').then(data => { assert.equal(data.state,'passed'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - property vs. notProperty",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=15').then(data => { assert.equal(data.assertions[0].method, 'notProperty', 'A car has not wings'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - property vs. notProperty",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=15').then(data => { assert.equal(data.assertions[1].method, 'property', 'planes have engines'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - property vs. notProperty",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=15').then(data => { assert.equal(data.assertions[2].method, 'property', 'Cars have wheels'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d824e367417b2b2512c56",
+      "title": "Test whether a Value is of a Specific Data Structure Type",
+      "description": [
+        "#typeOf asserts that value’s type is the given string, as determined by Object.prototype.toString.",
+        "Use #typeOf or #notTypeOf where appropriate"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "All tests should pass",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=16').then(data => { assert.equal(data.state,'passed'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - typeOf vs. notTypeOf",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=16').then(data => { assert.equal(data.assertions[0].method, 'typeOf', 'myCar is typeOf Object'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - typeOf vs. notTypeOf",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=16').then(data => { assert.equal(data.assertions[1].method, 'typeOf', 'Car.model is a String'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - typeOf vs. notTypeOf",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=16').then(data => { assert.equal(data.assertions[1].method, 'notTypeOf', 'Plane.wings is a Number (not a String)'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - typeOf vs. notTypeOf",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=16').then(data => { assert.equal(data.assertions[3].method, 'typeOf', 'Plane.engines is an Array'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - typeOf vs. notTypeOf",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=16').then(data => { assert.equal(data.assertions[4].method, 'typeOf', 'Car.wheels is a Number'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d824e367417b2b2512c57",
+      "title": "Test whether an Object is an Instance of a Constructor",
+      "description": [
+        "#instanceOf asserts that an object is an instance of a constructor.",
+        "Use #instanceOf or #notInstanceOf where appropriate"
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "All tests should pass",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=17').then(data => { assert.equal(data.state,'passed'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - instanceOf vs. notInstanceOf",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=17').then(data => { assert.equal(data.assertions[0].method, 'notInstanceOf', 'myCar is not an instance of Plane'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - instanceOf vs. notInstanceOf",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=17').then(data => { assert.equal(data.assertions[1].method, 'instanceOf', 'airlinePlane is an instance of Plane'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - instanceOf vs. notInstanceOf",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=17').then(data => { assert.equal(data.assertions[2].method, 'instanceOf', 'everything is an Object in JavaScript...'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "Choose the right assertion - instanceOf vs. notInstanceOf",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=17').then(data => { assert.equal(data.assertions[3].method, 'notInstanceOf', 'myCar.wheels is not an instance of String'); }, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d824e367417b2b2512c58",
+      "title": "Run Functional Tests on API Endpoints using Chai-HTTP",
+      "description": [
+        "Replace assert.fail(). Test the status and the text.response. Make the test pass.",
+        "Don't send a name in the query, the endpoint with responds with 'hello Guest'."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "All tests should pass",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=0').then(data => { assert.equal(data.state,'passed'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "You should test for 'res.status' == 200",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=0').then(data => { assert.equal(data.assertions[0].method, 'equal'); assert.equal(data.assertions[0].args[0], 'res.status'); assert.equal(data.assertions[0].args[1], '200');}, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "You should test for 'res.text' == 'hello Guest'",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=0').then(data => { assert.equal(data.assertions[1].method, 'equal'); assert.equal(data.assertions[1].args[0], 'res.text'); assert.equal(data.assertions[1].args[1], '\\'hello Guest\\'');}, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d824f367417b2b2512c59",
+      "title": "Run Functional Tests on API Endpoints using Chai-HTTP II",
+      "description": [
+        "Replace assert.fail(). Test the status and the text.response. Make the test pass.",
+        "Send you name in the query appending ?name=<your_name>, the endpoint with responds with 'hello <your_name>'."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "All tests should pass",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=1').then(data => { assert.equal(data.state,'passed'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "You should test for 'res.status' == 200",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=1').then(data => { assert.equal(data.assertions[0].method, 'equal'); assert.equal(data.assertions[0].args[0], 'res.status'); assert.equal(data.assertions[0].args[1], '200');}, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "You should test for 'res.text' == 'hello Guest'",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=1').then(data => { assert.equal(data.assertions[1].method, 'equal'); assert.equal(data.assertions[1].args[0], 'res.text'); assert.match(data.assertions[1].args[1], /hello [\\w\\d_-]/);}, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d824f367417b2b2512c5a",
+      "title": "Run Functional Tests on an API Response using Chai-HTTP III - PUT method",
+      "description": [
+        "In the next example we'll see how to send data in a request payload (body).",
+        "We are going to test a PUT request. The '/travellers' endpoint accepts",
+        "a JSON object taking the structure :",
+        " {surname: [last name of a traveller of the past]} ,",
+        "The route responds with :",
+        " {name: [first name], surname:[last name], dates: [birth - death years]}",
+        "see the server code for more details.",
+        "Send {surname: 'Colombo'}. Replace assert.fail() and make the test pass.",
+        "Check for 1) status, 2) type, 3) body.name, 4) body.surname",
+        "Follow the assertion order above, We rely on it."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "All tests should pass",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=2').then(data => { assert.equal(data.state,'passed'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "You should test for 'res.status' to be 200",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=2').then(data => { assert.equal(data.assertions[0].method, 'equal'); assert.equal(data.assertions[0].args[0], 'res.status'); assert.equal(data.assertions[0].args[1], '200');}, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "You should test for 'res.type' to be 'application/json'",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=2').then(data => { assert.equal(data.assertions[1].method, 'equal'); assert.equal(data.assertions[1].args[0], 'res.type'); assert.equal(data.assertions[1].args[1], '\\'application/json\\'');}, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "You should test for 'res.body.name' to be 'Cristoforo'",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=2').then(data => { assert.equal(data.assertions[2].method, 'equal'); assert.equal(data.assertions[2].args[0], 'res.body.name'); assert.equal(data.assertions[2].args[1], '\\'Cristoforo\\'');}, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "You should test for 'res.body.surname' to be 'Colombo'",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=2').then(data => { assert.equal(data.assertions[3].method, 'equal'); assert.equal(data.assertions[3].args[0], 'res.body.surname'); assert.equal(data.assertions[3].args[1], '\\'Colombo\\'');}, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d824f367417b2b2512c5b",
+      "title": "Run Functional Tests on an API Response using Chai-HTTP IV - PUT method redux",
+      "description": [
+        "This exercise is similar to the preceding. Look at it for the details.",
+        "Send {surname: 'da Verrazzano'}. Replace assert.fail() and make the test pass.",
+        "Check for 1) status, 2) type, 3) body.name, 4) body.surname",
+        "Follow the assertion order above, We rely on it."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "All tests should pass",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=3').then(data => { assert.equal(data.state,'passed'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "You should test for 'res.status' to be 200",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=3').then(data => { assert.equal(data.assertions[0].method, 'equal'); assert.equal(data.assertions[0].args[0], 'res.status'); assert.equal(data.assertions[0].args[1], '200');}, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "You should test for 'res.type' to be 'application/json'",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=3').then(data => { assert.equal(data.assertions[1].method, 'equal'); assert.equal(data.assertions[1].args[0], 'res.type'); assert.equal(data.assertions[1].args[1], '\\'application/json\\'');}, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "You should test for 'res.body.name' to be 'Giovanni'",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=3').then(data => { assert.equal(data.assertions[2].method, 'equal'); assert.equal(data.assertions[2].args[0], 'res.body.name'); assert.equal(data.assertions[2].args[1], '\\'Giovanni\\'');}, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "You should test for 'res.body.surname' to be 'da Verrazzano'",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=3').then(data => { assert.equal(data.assertions[3].method, 'equal'); assert.equal(data.assertions[3].args[0], 'res.body.surname'); assert.equal(data.assertions[3].args[1], '\\'da Verrazzano\\'');}, xhr => { throw new Error(xhr.responseText); })"
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d824f367417b2b2512c5c",
+      "title": "Run Functional Tests using a Headless Browser",
+      "description": [
+        "In the next challenges we are going to simulate the human interaction with a page using a device called 'Headless Browser'.",
+        "A headless browser is a web browser without a graphical user interface. These kind of tools are particularly useful for testing web pages as they are able to render and understand HTML, CSS, and JavaScript the same way a browser would.",
+        "For these challenges we are using Zombie.JS. It's a lightweight browser which is totally based on JS, without relying on additional binaries to be installed. This feature makes it usable in an environment such as Hyperdev. There are many other (more powerful) options.<br>",
+        "Look at the examples in the code for the exercise directions Follow the assertions order, We rely on it."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "All tests should pass",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then(data => { assert.equal(data.state,'passed'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "assert that the headless browser request succeded",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then(data => { assert.equal(data.assertions[0].method, 'browser.success'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "assert that the text inside the element 'span#name' is 'Cristoforo'",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then(data => { assert.equal(data.assertions[1].method, 'browser.text'); assert.equal(data.assertions[1].args[0], '\\'span#name\\''); assert.equal(data.assertions[1].args[1], '\\'Cristoforo\\'');}, xhr => { throw new Error(xhr.responseText); })"
+
+        },
+        {
+          "text": "assert that the text inside the element 'span#surname' is 'Colombo'",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then(data => { assert.equal(data.assertions[2].method, 'browser.text'); assert.equal(data.assertions[2].args[0], '\\'span#surname\\''); assert.equal(data.assertions[2].args[1], '\\'Colombo\\'');}, xhr => { throw new Error(xhr.responseText); })"
+
+        },
+        {
+          "text": "assert that the element 'span#dates' exist and its count is 1",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then(data => { assert.equal(data.assertions[3].method, 'browser.element'); assert.equal(data.assertions[3].args[0], '\\'span#dates\\''); assert.equal(data.assertions[3].args[1], 1);}, xhr => { throw new Error(xhr.responseText); })"
+
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d8250367417b2b2512c5d",
+      "title": "Run Functional Tests using a Headless Browser II",
+      "description": [
+        "This exercise is similar to the preceding.",
+        "Look at  the code for directions. Follow the assertions order, We rely on it."
+      ],
+      "challengeSeed": [],
+      "tests": [
+        {
+          "text": "All tests should pass",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(data => { assert.equal(data.state,'passed'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": " assert that the headless browser request succeded",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(data => { assert.equal(data.assertions[0].method, 'browser.success'); }, xhr => { throw new Error(xhr.responseText); })"
+        },
+        {
+          "text": "assert that the text inside the element 'span#name' is 'Amerigo'",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(data => { assert.equal(data.assertions[1].method, 'browser.text'); assert.equal(data.assertions[1].args[0], '\\'span#name\\''); assert.equal(data.assertions[1].args[1], '\\'Amerigo\\'');}, xhr => { throw new Error(xhr.responseText); })"
+
+        },
+        {
+          "text": "assert that the text inside the element 'span#surname' is 'Vespucci'",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(data => { assert.equal(data.assertions[2].method, 'browser.text'); assert.equal(data.assertions[2].args[0], '\\'span#surname\\''); assert.equal(data.assertions[2].args[1], '\\'Vespucci\\'');}, xhr => { throw new Error(xhr.responseText); })"
+
+        },
+        {
+          "text": "assert that the element 'span#dates' exist and its count is 1",
+          "testString": "getUserInput => $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(data => { assert.equal(data.assertions[3].method, 'browser.element'); assert.equal(data.assertions[3].args[0], '\\'span#dates\\''); assert.equal(data.assertions[3].args[1], 1);}, xhr => { throw new Error(xhr.responseText); })"
+
+        }
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "backend",
+      "challengeType": 0,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        }
+      }
+    }
+  ]
+}
diff --git a/seed/challenges/07-contribute-to-open-source-and-help-nonprofits/contribute-to-open-source-and-help-nonprofits.json b/seed/challenges/07-contribute-to-open-source-and-help-nonprofits/contribute-to-open-source-and-help-nonprofits.json
new file mode 100644
index 00000000000000..f9bd231011da57
--- /dev/null
+++ b/seed/challenges/07-contribute-to-open-source-and-help-nonprofits/contribute-to-open-source-and-help-nonprofits.json
@@ -0,0 +1,28 @@
+{
+  "name": "Open Source Contributions",
+  "order": 22,
+  "time": "800 Hours",
+  "isLocked": true,
+  "message": "Before you can get credit toward your final Full Stack Development Certificate by contributing to open source, we recommend you complete all six of your certifications.",
+  "challenges": [
+    {
+      "title": "Contribute Pull Requests to Open Source projects",
+      "isRequired": true
+    },
+    {
+      "title": "QA Other Developers' Pull Requests",
+      "isRequired": true
+    },
+    {
+      "title": "Greenfield Code Grant Project for a Nonprofit",
+      "isRequired": true
+    },
+    {
+      "title": "Legacy Code Grant Project for a Nonprofit",
+      "isRequired": true
+    },
+    {
+      "title": "Claim your Full Stack Development Certificate"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/06-coding-interview-preparation/coding-interview-training.json b/seed/challenges/08-coding-interview-preparation/coding-interview-training.json
similarity index 77%
rename from seed/challenges/06-coding-interview-preparation/coding-interview-training.json
rename to seed/challenges/08-coding-interview-preparation/coding-interview-training.json
index de05dbb3fa43b8..9461ab0377cc7e 100644
--- a/seed/challenges/06-coding-interview-preparation/coding-interview-training.json
+++ b/seed/challenges/08-coding-interview-preparation/coding-interview-training.json
@@ -3,7 +3,7 @@
   "order": 23,
   "time": "70 Hours",
   "isLocked": true,
-  "message": "To qualify for the coding interview preparation, you must first earn all three foundational certifications: Front End, Data Visualization, and Back End",
+  "message": "To qualify for the coding interview preparation, you must first earn your Full Stack Developer Certificate by contributing to open source.",
   "challenges": [
     {
       "title": "Soft Skill Training"
diff --git a/seed/challenges/06-coding-interview-preparation/mock-interview-training.json b/seed/challenges/08-coding-interview-preparation/mock-interview-training.json
similarity index 58%
rename from seed/challenges/06-coding-interview-preparation/mock-interview-training.json
rename to seed/challenges/08-coding-interview-preparation/mock-interview-training.json
index 4ca6114c789a3a..b51a184fe79449 100644
--- a/seed/challenges/06-coding-interview-preparation/mock-interview-training.json
+++ b/seed/challenges/08-coding-interview-preparation/mock-interview-training.json
@@ -3,7 +3,7 @@
   "order": 24,
   "time": "10 Hours",
   "isLocked": true,
-  "message": "To qualify for the coding interview preparation, you must first earn all three foundational certifications: Front End, Data Visualization, and Back End",
+  "message": "To qualify for Mock Interviews, you must first earn your Full Stack Developer Certificate by contributing to open source, then complete our Coding Interview Training.",
   "challenges": [
     {
       "title": "Mock Interview #1"
diff --git a/seed/challenges/01-front-end-development-certification/advanced-bonfires.json b/seed/challenges/09-extra-practice-projects-and-challenges/advanced-algorithm-scripting.json
similarity index 80%
rename from seed/challenges/01-front-end-development-certification/advanced-bonfires.json
rename to seed/challenges/09-extra-practice-projects-and-challenges/advanced-algorithm-scripting.json
index f5bf14d9d4d110..18e58005c69664 100644
--- a/seed/challenges/01-front-end-development-certification/advanced-bonfires.json
+++ b/seed/challenges/09-extra-practice-projects-and-challenges/advanced-algorithm-scripting.json
@@ -1,6 +1,6 @@
 {
   "name": "Advanced Algorithm Scripting",
-  "order": 12,
+  "order": 10,
   "time": "50 hours",
   "helpRoom": "HelpJavaScript",
   "challenges": [
@@ -378,152 +378,7 @@
         }
       }
     },
-    {
-      "id": "a2f1d72d9b908d0bd72bb9f6",
-      "title": "Make a Person",
-      "description": [
-        "Fill in the object constructor with the following methods below:",
-        "<blockquote>getFirstName()\ngetLastName()\ngetFullName()\nsetFirstName(first)\nsetLastName(last)\nsetFullName(firstAndLast)</blockquote>",
-        "Run the tests to see the expected output for each method.",
-        "The methods that take an argument must accept only one argument and it has to be a string.",
-        "These methods must be the only available means of interacting with the object.",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
-      ],
-      "challengeSeed": [
-        "var Person = function(firstAndLast) {",
-        "    return firstAndLast;",
-        "};",
-        "",
-        "var bob = new Person('Bob Ross');",
-        "bob.getFullName();"
-      ],
-      "solutions": [
-        "var Person = function(firstAndLast) {\n\n  var firstName, lastName;\n\n  function updateName(str) {    \n    firstName = str.split(\" \")[0];\n    lastName = str.split(\" \")[1];    \n  }\n\n  updateName(firstAndLast);\n\n  this.getFirstName = function(){\n    return firstName;\n  };\n  \n  this.getLastName = function(){\n    return lastName;\n  };\n  \n  this.getFullName = function(){\n    return firstName + \" \" + lastName;\n  };\n  \n  this.setFirstName = function(str){\n    firstName = str;\n  };\n  \n\n  this.setLastName = function(str){\n    lastName = str;\n  };\n  \n  this.setFullName = function(str){\n    updateName(str);\n  };\n};\n\nvar bob = new Person('Bob Ross');\nbob.getFullName();"
-      ],
-      "tests": [
-        "assert.deepEqual(Object.keys(bob).length, 6, 'message: <code>Object.keys(bob).length</code> should return 6.');",
-        "assert.deepEqual(bob instanceof Person, true, 'message: <code>bob instanceof Person</code> should return true.');",
-        "assert.deepEqual(bob.firstName, undefined, 'message: <code>bob.firstName</code> should return undefined.');",
-        "assert.deepEqual(bob.lastName, undefined, 'message: <code>bob.lastName</code> should return undefined.');",
-        "assert.deepEqual(bob.getFirstName(), 'Bob', 'message: <code>bob.getFirstName()</code> should return \"Bob\".');",
-        "assert.deepEqual(bob.getLastName(), 'Ross', 'message: <code>bob.getLastName()</code> should return \"Ross\".');",
-        "assert.deepEqual(bob.getFullName(), 'Bob Ross', 'message: <code>bob.getFullName()</code> should return \"Bob Ross\".');",
-        "assert.strictEqual((function () { bob.setFirstName(\"Haskell\"); return bob.getFullName(); })(), 'Haskell Ross', 'message: <code>bob.getFullName()</code> should return \"Haskell Ross\" after <code>bob.setFirstName(\"Haskell\")</code>.');",
-        "assert.strictEqual((function () { var _bob=new Person('Haskell Ross'); _bob.setLastName(\"Curry\"); return _bob.getFullName(); })(), 'Haskell Curry', 'message: <code>bob.getFullName()</code> should return \"Haskell Curry\" after <code>bob.setLastName(\"Curry\")</code>.');",
-        "assert.strictEqual((function () { bob.setFullName(\"Haskell Curry\"); return bob.getFullName(); })(), 'Haskell Curry', 'message: <code>bob.getFullName()</code> should return \"Haskell Curry\" after <code>bob.setFullName(\"Haskell Curry\")</code>.');",
-        "assert.strictEqual((function () { bob.setFullName(\"Haskell Curry\"); return bob.getFirstName(); })(), 'Haskell', 'message: <code>bob.getFirstName()</code> should return \"Haskell\" after <code>bob.setFullName(\"Haskell Curry\")</code>.');",
-        "assert.strictEqual((function () { bob.setFullName(\"Haskell Curry\"); return bob.getLastName(); })(), 'Curry', 'message: <code>bob.getLastName()</code> should return \"Curry\" after <code>bob.setFullName(\"Haskell Curry\")</code>.');"
-      ],
-      "type": "bonfire",
-      "MDNlinks": [
-        "Closures",
-        "Details of the Object Model"
-      ],
-      "challengeType": 5,
-      "translations": {
-        "es": {
-          "title": "Crea una Persona",
-          "description": [
-            "Completa el constructor de objetos con los métodos especificados a continuación:",
-            "<blockquote>getFirstName()\ngetLastName()\ngetFullName()\nsetFirstName(first)\nsetLastName(last)\nsetFullName(firstAndLast)</blockquote>",
-            "Ejecuta las pruebas para ver el resultado esperado de cada método.",
-            "Las funciones que aceptan argumentos deben aceptar sólo uno, y este tiene que ser una cadena.",
-            "Estos métodos deben ser el único medio para interactuar con el objeto.",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
-          ]
-        },
-        "it": {
-          "title": "Crea una Persona",
-          "description": [
-            "Completa il costruttore dell'oggetto con i metodi specificati qui sotto:",
-            "<blockquote>getFirstName()\ngetLastName()\ngetFullName()\nsetFirstName(first)\nsetLastName(last)\nsetFullName(firstAndLast)</blockquote>",
-            "Esegui i test per vedere il risultato atteso per ogni metodo.",
-            "I metodi che richiedono un argomento devono accettarne solo uno e questo deve essere una stringa.",
-            "Questi metodi devono essere l'unica maniera possibile di interagire con l'oggetto.",
-            "Ricorda di usare <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leggi-Cerca-Chiedi</a> se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te."
-          ]
-        },
-        "pt-br": {
-          "title": "Faça uma Pessoa",
-          "description": [
-            "Preencha o contrutor do objeto com seguintes métodos:",
-            "<blockquote>getFirstName()\ngetLastName()\ngetFullName()\nsetFirstName(first)\nsetLastName(last)\nsetFullName(firstAndLast)</blockquote>",
-            "Rode os testes para ver o resultado esperado de cada método.",
-            "Os métodos que recebem um argumento deve aceitar somente um argumento e deve ser uma string.",
-            "Esses métodos devem ser o único meio de interação com o objeto.",
-            "Lembre-se de usar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Ler-Procurar-Perguntar</a> se você ficar preso. Tente programar em par. Escreva seu próprio código."
-          ]
-        }
-      }
-    },
-    {
-      "id": "af4afb223120f7348cdfc9fd",
-      "title": "Map the Debris",
-      "description": [
-        "Return a new array that transforms the element's average altitude into their orbital periods.",
-        "The array will contain objects in the format <code>{name: 'name', avgAlt: avgAlt}</code>.",
-        "You can read about orbital periods <a href=\"http://en.wikipedia.org/wiki/Orbital_period\" target='_blank'>on wikipedia</a>.",
-        "The values should be rounded to the nearest whole number. The body being orbited is Earth.",
-        "The radius of the earth is 6367.4447 kilometers, and the GM value of earth is 398600.4418 km<sup>3</sup>s<sup>-2</sup>.",
-        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck. Try to pair program. Write your own code."
-      ],
-      "challengeSeed": [
-        "function orbitalPeriod(arr) {",
-        "  var GM = 398600.4418;",
-        "  var earthRadius = 6367.4447;",
-        "  return arr;",
-        "}",
-        "",
-        "orbitalPeriod([{name : \"sputnik\", avgAlt : 35873.5553}]);"
-      ],
-      "solutions": [
-        "function orbitalPeriod(arr) {\n  var GM = 398600.4418;\n  var earthRadius = 6367.4447;\n  var TAU = 2 * Math.PI; \n  return arr.map(function(obj) {\n    return {\n      name: obj.name,\n      orbitalPeriod: Math.round(TAU * Math.sqrt(Math.pow(obj.avgAlt+earthRadius, 3)/GM))\n    };\n  });\n}\n\norbitalPeriod([{name : \"sputkin\", avgAlt : 35873.5553}]);\n"
-      ],
-      "tests": [
-        "assert.deepEqual(orbitalPeriod([{name : \"sputnik\", avgAlt : 35873.5553}]), [{name: \"sputnik\", orbitalPeriod: 86400}], 'message: <code>orbitalPeriod([{name : \"sputnik\", avgAlt : 35873.5553}])</code> should return <code>[{name: \"sputnik\", orbitalPeriod: 86400}]</code>.');",
-        "assert.deepEqual(orbitalPeriod([{name: \"iss\", avgAlt: 413.6}, {name: \"hubble\", avgAlt: 556.7}, {name: \"moon\", avgAlt: 378632.553}]), [{name : \"iss\", orbitalPeriod: 5557}, {name: \"hubble\", orbitalPeriod: 5734}, {name: \"moon\", orbitalPeriod: 2377399}], 'message: <code>orbitalPeriod([{name: \"iss\", avgAlt: 413.6}, {name: \"hubble\", avgAlt: 556.7}, {name: \"moon\", avgAlt: 378632.553}])</code> should return <code>[{name : \"iss\", orbitalPeriod: 5557}, {name: \"hubble\", orbitalPeriod: 5734}, {name: \"moon\", orbitalPeriod: 2377399}]</code>.');"
-      ],
-      "type": "bonfire",
-      "MDNlinks": [
-        "Math.pow()"
-      ],
-      "challengeType": 5,
-      "translations": {
-        "es": {
-          "title": "Ubica los Escombros",
-          "description": [
-            "Crea una función que devuelva un nuevo arreglo que transforme la altitud promedio del elemento en su período orbital.",
-            "El arreglo debe contener objetos en el formato <code>{name: 'name', avgAlt: avgAlt}</code>.",
-            "Puedes leer acerca de períodos orbitales <a href=\"http://en.wikipedia.org/wiki/Orbital_period\" target='_blank'>en wikipedia</a>.",
-            "Los valores deben estar redondeados al número entero más próximo. El cuerpo orbitado es la Tierra",
-            "El radio de la Tierra es 6367.4447 kilómetros, y el valor GM del planeta es de 398600.4418 km<sup>3</sup>s<sup>-2</sup>.",
-            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado. Intenta programar en pareja. Escribe tu propio código."
-          ]
-        },
-        "it": {
-          "title": "Mappa i Detriti",
-          "description": [
-            "Ritorna un nuovo array che trasformi l'altitudine media degli elementi nel loro periodo orbitale.",
-            "L'array conterrà oggetti in formato <code>{name: 'name', avgAlt: avgAlt}</code>.",
-            "Puoi leggere riguardo i periodi orbitali <a href=\"http://en.wikipedia.org/wiki/Orbital_period\" target='_blank'>su wikipedia</a>.",
-            "I valori devono essere arrotondati al numero intero più vicino. Il corpo attorno a cui orbitano gli elementi è la Terra.",
-            "Il raggio della Terra è di 6367.4447 kilometri, e il valore GM della Terra è di 398600.4418 km<sup>3</sup>s<sup>-2</sup>.",
-            "Ricorda di usare <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leggi-Cerca-Chiedi</a> se rimani bloccato. Prova a programmare in coppia. Scrivi il codice da te."
-          ]
-        },
-        "pt-br": {
-          "title": "Mapeie o Lixo espacial",
-          "description": [
-            "Retorne uma nova matriz que transforma a altitude média do elemento em seu período orbital.",
-            "A matriz vai conter objetos no formato <code>{name: 'name', avgAlt: avgAlt}</code>.",
-            "Você pode ler sobre período orbital <a href=\"https://pt.wikipedia.org/wiki/Per%C3%ADodo_orbital\" target='_blank'>na wikipedia</a>.",
-            "Os valores devem ser arredondados para número inteiro mais próximo. O corpe sendo orbitado é a Terra.",
-            "O raio da terra é 6367.4447 quilômetros, e o valor GM da terra é 398600.4418 km<sup>3</sup>s<sup>-2</sup>.",
-            "Lembre-se de usar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Ler-Procurar-Perguntar</a> se você ficar preso. Tente programar em par. Escreva seu próprio código."
-          ]
-        }
-      }
-    },
+
     {
       "id": "a3f503de51cfab748ff001aa",
       "title": "Pairwise",
diff --git a/seed/challenges/09-extra-practice-projects-and-challenges/advanced-data-structures.json b/seed/challenges/09-extra-practice-projects-and-challenges/advanced-data-structures.json
new file mode 100644
index 00000000000000..b95a2562e4e94c
--- /dev/null
+++ b/seed/challenges/09-extra-practice-projects-and-challenges/advanced-data-structures.json
@@ -0,0 +1,4198 @@
+{
+  "name": "Advanced Data Structures",
+  "order": 9,
+  "time": "50 hours",
+  "helpRoom": "Help",
+  "challenges": [
+    {
+      "id": "587d8250367417b2b2512c5e",
+      "title": "Learn how a Stack Works",
+      "description": [
+        "You are probably familiar with stack of books on your table. You might have used the undo feature in your computer. You are also used to hitting the back button on your phone to go back to the previous view in your app.",
+        "You know what they all have in common? They all store the data in a way so that you can traverse backwards.",
+        "The topmost book in the stack was the one that was put there at the last. If you remove that book from your stack's top, you would expose the book that was put there before the last book and so on.",
+        "If you think about it, in all the above examples, you are getting Last-In-First-Out type of service. We will try to mimic this with our code - create a similar data storage scheme with JS arrays and functions that we always get back first what we put there last.",
+        "Oh, and did I mention such data storage scheme is called Stack! In particular, we would have to implement the push function that pushes JS object at the top of the stack; and pop function, that removes the JS object that's at the top of the stack at the current moment.",
+        "Instructions",
+        "Here we have a stack of homework assignments represented as an array: BIO12 is at the base, and PSY44 is at the top of the stack.",
+        "Remove the element on top of the stack, and Add CS50."
+      ],
+      "challengeSeed": [
+        "var homeworkStack = ['BIO12','HIS80','MAT122','PSY44']",
+        "// Only change code below this line"
+      ],
+      "tests": [
+        "assert(homeworkStack.length === 4, 'message: <code>homeworkStack</code> should only contain 4 elements');",
+        "assert(homeworkStack[3] === 'CS50', 'message: The last element in <code>homeworkStack</code> should be CS50');",
+        "assert(homeworkStack.indexOf('PSY44') === -1, 'message: <code>homeworkStack</code> should not contain PSY44');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d8250367417b2b2512c5f",
+      "title": "Create a Stack Class",
+      "description": [
+        "In the last section, we talked about what a stack is and how we can use an array to represent a stack. In this section, we will be creating our own stack class.",
+        "Although you can use arrays to create stacks, sometimes it is best to limit the amount of control we have with our stacks.",
+        "Apart from the push and pop method, stacks has other useful methods. Let's add a peek, isEmpty, and clear method to our stack class.",
+        "Instructions",
+        "Write a push method that pushes an element to the top of the stack, a pop method that removes the element on the top of the stack, a peek method that looks at the first element in the stack, an isEmpty method that checks if the stack is empty, and a clear method that removes all elements from the stack.",
+        "Normally stacks don't have this, but we've added a print() helper method that console logs the collection."
+      ],
+      "challengeSeed": [
+        "function Stack() { ",
+        "    collection = [];",
+        "    this.print = function() {",
+        "        console.log(collection)",
+        "    }",
+        "    // Only change code below this line",
+        "",
+        "    // Only change code above this line",
+        "}",
+        "",
+        "// Test your stack class",
+        "var homework = new Stack();",
+        "homework.push('CS50');",
+        "console.log(homework.peek())",
+        "console.log(homework.isEmpty())",
+        "homework.clear();",
+        "console.log(homework.isEmpty())"
+      ],
+      "tests": [
+        "assert((function(){var test = new Stack(); return (typeof test.push === 'function')}()), 'message: Your <code>Stack</code> class should have a <code>push</code> method.');",
+        "assert((function(){var test = new Stack(); return (typeof test.pop === 'function')}()), 'message: Your <code>Stack</code> class should have a <code>pop</code> method.');",
+        "assert((function(){var test = new Stack(); return (typeof test.peek === 'function')}()), 'message: Your <code>Stack</code> class should have a <code>peek</code> method.');",
+        "assert((function(){var test = new Stack(); return (typeof test.isEmpty === 'function')}()), 'message: Your <code>Stack</code> class should have a <code>isEmpty</code> method.');",
+        "assert((function(){var test = new Stack(); return (typeof test.clear === 'function')}()), 'message: Your <code>Stack</code> class should have a <code>clear</code> method.');",
+        "assert((function(){var test = new Stack();  test.push('CS50'); return (test.peek() === 'CS50')}()), 'message: The <code>peek</code> method should return the top element of the stack');",
+        "assert((function(){var test = new Stack(); test.push('CS50'); return (test.pop() === 'CS50');}()), 'message: The <code>pop</code> method should remove and return the top element of the stack');",
+        "assert((function(){var test = new Stack(); return test.isEmpty()}()), 'message: The <code>isEmpty</code> method should return true if a stack does not contain any elements');",
+        "assert((function(){var test = new Stack();  test.push('CS50'); test.clear(); return (test.isEmpty())}()), 'message: The <code>clear</code> method should remove all element from the stack');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d8250367417b2b2512c60",
+      "title": "Create a Queue Class",
+      "description": [
+        "Like stacks, queues are a collection of elements. But unlike stacks, queues follow the FIFO (First-In First-Out) principle. Elements added to a queue are pushed to the tail, or the end, of the queue, and only the element at the front of the queue is allowed to be removed.",
+        "We could use an array to represent a queue, but just like stacks, we want to limit the amount of control we have over our queues.",
+        "The two main methods of a queue class is the enqueue and the dequeue method. The enqueue method pushes an element to the tail of the queue, and the dequeue method removes and returns the element at the front of the queue. Other useful methods are the front, size, and isEmpty methods.",
+        "Instructions",
+        "Write an enqueue method that pushes an element to the tail of the queue, a dequeue method that removes and returns the front element, a front method that lets us see the front element, a size method that shows the length, and an isEmpty method to check if the queue is empty."
+      ],
+      "challengeSeed": [
+        "function Queue () { ",
+        "    collection = [];",
+        "    this.print() = function(){",
+        "        console.log(collection);",
+        "    }",
+        "    // Only change code below this line",
+        "",
+        "    // Only change code above this line",
+        "}",
+        "",
+        "// Test your queue class",
+        "var DMV = new Queue();",
+        "DMV.enqueue('David Brown');",
+        "DMV.enqueue('Jon Snow');",
+        "DMV.size();",
+        "DMV.dequeue();",
+        "DMV.front();",
+        "DMV.isEmpty();"
+      ],
+      "tests": [
+        "assert((function(){var test = new Queue();  return (typeof test.enqueue === 'function')}()), 'message: Your <code>Queue</code> class should have a <code>enqueue</code> method.');",
+        "assert((function(){var test = new Queue();  return (typeof test.denqueue === 'function')}()), 'message: Your <code>Queue</code> class should have a <code>denqueue</code> method.');",
+        "assert((function(){var test = new Queue();  return (typeof test.front === 'function')}()), 'message: Your <code>Queue</code> class should have a <code>front</code> method.');",
+        "assert((function(){var test = new Queue();  return (typeof test.size === 'function')}()), 'message: Your <code>Queue</code> class should have a <code>size</code> method.');",
+        "assert((function(){var test = new Queue();  return (typeof test.isEmpty === 'function')}()), 'message: Your <code>Queue</code> class should have a <code>isEmpty</code> method.');",
+        "assert((function(){var test = new Queue();  test.enqueue('Smith'); return (test.dequeue() === 'Smith')}()), 'message: The <code>dequeue</code> method should remove and return the front element of the queue');",
+        "assert((function(){var test = new Queue();  test.enqueue('Smith'); test.enqueue('John'); return (test.front() === 'Smith')}()), 'message: The <code>front</code> method should return value of the front element of the queue');",
+        "assert((function(){var test = new Queue();  test.enqueue('Smith'); return (test.size() === 1)}()), 'message: The <code>size</code> method should return the length of the queue');",
+        "assert((function(){var test = new Queue();  test.enqueue('Smith'); return !(test.isEmpty())}()), 'message: The <code>isEmpty</code> method should return false if there are elements in the queue');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d8251367417b2b2512c61",
+      "title": "Work with Nodes in a Linked List",
+      "description": [
+        "Another common data structure is the linked list. In a linked list, elements are stored in a node. The node contains two key pieces of information: the element itself, and a reference to the next node.",
+        "Imagine that you are in a conga line. You have your hands on the next person in the line, and the person behind you has their hands on you. You can see the person straight ahead of you, but they are blocking the view of the other people ahead in line. A node is just like a person in a conga line, they know who they are and they can only see the next person in line, but they are not aware of the other people ahead or behind them.",
+        "Instructions",
+        "In the code, we've create two nodes, Kitten and Puppy, and we've manually connected the Kitten node to the Puppy node.",
+        "Create a Cat and Dog node and manually add them to the line."
+      ],
+      "challengeSeed": [
+        "var Node = function(element){",
+        "    this.element = element; ",
+        "    this.next = null; ",
+        "};",
+        "var Kitten = new Node(\"Kitten\");",
+        "var Puppy = new Node(\"Puppy\");",
+        "",
+        "Kitten.next = Puppy;",
+        "// only add code below this line",
+        "",
+        "// test your code",
+        "console.log(Kitten.next)"
+      ],
+      "tests": [
+        "assert(Puppy.next.element === \"Cat\", 'message: Your <code>Puppy</code> node should have a reference to a <code>Cat</code> node.');",
+        "assert(Cat.next.element === \"Dog\", 'message: Your <code>Cat</code> node should have a reference to a <code>Dog</code> node.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d8251367417b2b2512c62",
+      "title": "Create a Linked List Class",
+      "description": [
+        "Let's create a linked list class. Every linked list has a head and length. The head is the first node added to the linked list. The length is the size of the linked list. When an element is added to the linked list, the length should increment by one.",
+        "The first method of a linked list is the add method. When an element is added to a linked list, a new node is created. If is it the first node created, it is assigned to the head of the linked list. If it is not the first node, the previous node should reference the new created node.",
+        "Instructions",
+        "Write an add method that assigns head to the first node push to the linked list, and after that, every node should be referenced by the previous node.",
+        "We've added a head and size helper method.",
+        "Note",
+        "Length should increase by one every time an element is pushed to the linked list."
+      ],
+      "challengeSeed": [
+        "function LinkedList() { ",
+        "  var length = 0; ",
+        "  var head = null; ",
+        "",
+        "  var Node = function(element){",
+        "    this.element = element; ",
+        "    this.next = null; ",
+        "  }; ",
+        "",
+        "  this.head = function(){",
+        "    return head;",
+        "  };",
+        "",
+        "  this.size = function(){",
+        "    return length;",
+        "  };",
+        "",
+        "  this.add = function(element){",
+        "    // Only change code below this line",
+        "",
+        "    // Only change code above this line",
+        "  }; ",
+        "} ",
+        "",
+        "// Test your code",
+        "var conga = new LinkedList();",
+        "conga.add('Kitten');",
+        "console.log(conga.head().element);"
+      ],
+      "tests": [
+        "assert((function(){var test = new LinkedList(); return (typeof test.add === 'function')}()), 'message: Your <code>LinkedList</code> class should have a <code>add</code> method.');",
+        "assert((function(){var test = new LinkedList(); test.add('cat'); return test.head().element === 'cat'}()), 'message: Your <code>LinkedList</code> class should assign <code>head</code> to the first node added.');",
+        "assert((function(){var test = new LinkedList(); test.add('cat'); test.add('dog'); return test.head().next.element === 'dog'}()), 'message: The previous <code>node</code> in your <code>LinkedList</code> class should have reference to the newest node created.');",
+        "assert((function(){var test = new LinkedList(); test.add('cat'); test.add('dog'); return test.size() === 2}()), 'message: The  <code>size</code> of your <code>LinkedList</code> class should equal the amount of nodes in the linked list.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d8251367417b2b2512c63",
+      "title": "Remove Elements from a Linked List",
+      "description": [
+        "The next important method of a linked list is the remove method. The remove method takes an element and searches the linked list to find and remove the node containing that element. When a node is removed, the previous node that had reference to removed node, now has reference to the node that the removed node once referenced.",
+        "This might sound really confusing, but let's return to the conga line example. You're in conga line, and the person straight ahead of you leaves the line. The person leaving the line, no longer has his hands on any one in line and you no longer have hands on the person that left. You step forward and put your hands on next person you see.",
+        "If the element being removed is the head element, the head is reassigned to the second node of the linked list.",
+        "Instructions",
+        "Write a remove method that takes an element and removes it from the linked list.",
+        "Note",
+        "Length should decrease by one every time an element is removed from the linked list."
+      ],
+      "challengeSeed": [
+        "function LinkedList() { ",
+        "  var length = 0; ",
+        "  var head = null; ",
+        "",
+        "  var Node = function(element){ ",
+        "    this.element = element; ",
+        "    this.next = null; ",
+        "  }; ",
+        "",
+        "  this.length = function(){",
+        "    return length;",
+        "  };",
+        "",
+        "  this.head = function(){",
+        "    return head;",
+        "  };",
+        "",
+        "  this.add = function(element){",
+        "    var node = new Node(element);",
+        "    if(head === null){",
+        "        head = node;",
+        "    } else {",
+        "        currentNode = head;",
+        "",
+        "        while(currentNode.next){",
+        "            currentNode  = currentNode.next;",
+        "        }",
+        "",
+        "        currentNode.next = node;",
+        "    }",
+        "",
+        "    length++;",
+        "  }; ",
+        "",
+        "  this.remove = function(element){",
+        "    // Only change code below this line",
+        "",
+        "    // Only change code above this line",
+        "  }",
+        "} ",
+        "",
+        "// Test your code",
+        "var conga = new LinkedList();",
+        "conga.add('Kitten');",
+        "conga.add('Puppy');",
+        "console.log(conga.length());",
+        "conga.remove('Kitten');",
+        "console.log(conga.head());"
+      ],
+      "tests": [
+        "assert((function(){var test = new LinkedList(); return (typeof test.remove === 'function')}()), 'message: Your <code>LinkedList</code> class should have a <code>remove</code> method.');",
+        "assert((function(){var test = new LinkedList(); test.add('cat'); test.add('dog'); test.remove('cat'); return test.head().element === 'dog'}()), 'message: Your <code>Remove</code> method should reassign <code>head</code> to the second node when the first node is removed.');",
+        "assert((function(){var test = new LinkedList(); test.add('cat'); test.add('dog'); test.remove('cat'); return test.length() === 1}()), 'message: Your <code>Remove</code> method should decrease the <code>length</code> of the linked list by one for every node removed.');",
+        "assert((function(){var test = new LinkedList(); test.add('cat'); test.add('dog');test.add('kitten'); test.remove('dog'); return test.head().next.element === 'kitten'}()), 'message: Your <code>Remove</code> method should reassign the reference of the previous node of the removed node to the removed node's <code>next</code> reference ');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d8251367417b2b2512c64",
+      "title": "Search within a Linked List",
+      "description": [
+        "Let's add a few more useful methods to our linked list class. Like the stack and queue classes, we should add an isEmpty method to check if the linked list is empty.",
+        "We also want to find elements in our linked list. Let's create a indexOf method that takes an element and returns the indexs of it in the linked list. The method should return -1 if the element is not found in the linked list. We also need an elementAt method that takes an index and returns the element at the given index. The method should return undefined if no element is found.",
+        "Instructions",
+        "Write isEmpty method that checks if the linked list is empty, a size method that returns the length of the linked list, a indexOf method that returns the index of a given element, and an elementAt that returns an element at a given index."
+      ],
+      "challengeSeed": [
+        "function LinkedList() { ",
+        "  var length = 0; ",
+        "  var head = null; ",
+        "",
+        "  var Node = function(element){ // {1} ",
+        "    this.element = element; ",
+        "    this.next = null; ",
+        "  }; ",
+        "",
+        "  this.size = function() {",
+        "    return length;",
+        "  };",
+        "",
+        "  this.head = function(){",
+        "    return head;",
+        "  };",
+        "",
+        "  this.add = function(element){",
+        "    var node = new Node(element);",
+        "    if(head === null){",
+        "        head = node;",
+        "    } else {",
+        "        currentNode = head;",
+        "",
+        "        while(currentNode.next){",
+        "            currentNode  = currentNode.next;",
+        "        }",
+        "",
+        "        currentNode.next = node;",
+        "    }",
+        "",
+        "    length++;",
+        "  }; ",
+        "",
+        "  this.remove = function(element){",
+        "    var currentNode = head;",
+        "    var previousNode;",
+        "    if(currentNode.element === element){",
+        "        head = currentNode.next;",
+        "    } else {",
+        "        while(currentNode.element !== element) {",
+        "            previousNode = currentNode;",
+        "            currentNode = currentNode.next;",
+        "        }",
+        "",
+        "        previousNode.next = currentNode.next;",
+        "    }",
+        "",
+        "    length --;",
+        "  };",
+        "",
+        "  // Only change code below this line",
+        "",
+        "  // Only change code above this line",
+        "}",
+        "",
+        "// Test your code",
+        "var conga = new LinkedList();",
+        "conga.add('Kitten');",
+        "conga.add('Puppy');",
+        "console.log(conga.indexOf('Puppy'))",
+        "console.log(conga.elementAt('0'))",
+        "conga.remove('Kitten');",
+        "console.log(conga.head());"
+      ],
+      "tests": [
+        "assert((function(){var test = new LinkedList(); return (typeof test.indexOf === 'function')}()), 'message: Your <code>LinkedList</code> class should have a <code>indexOf</code> method.');",
+        "assert((function(){var test = new LinkedList(); return (typeof test.elementAt === 'function')}()), 'message: Your <code>LinkedList</code> class should have a <code>elementAt</code> method.');",
+        "assert((function(){var test = new LinkedList(); test.add('cat'); test.add('dog'); test.add('kitten'); return test.size() === 3}()), 'message: Your <code>size</code> method should return the length of the linked list');",
+        "assert((function(){var test = new LinkedList(); test.add('cat'); test.add('dog'); test.add('kitten'); return test.indexOf('kitten') === 2}()), 'message: Your <code>indexOf</code> method should return the index of the given element.');",
+        "assert((function(){var test = new LinkedList(); test.add('cat'); test.add('dog'); test.add('kitten'); return test.elementAt(1) === 'dog'}()), 'message: Your <code>elementAt</code> method should return at element at a given index.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d8251367417b2b2512c65",
+      "title": "Remove Elements from a Linked List by Index",
+      "description": [
+        "Now we need to create a remove method that removes the element at a given index. The method should be called removeAt(index). To remove an element at a certain index we need to keep count of each node as we move along the linked list. Starting at the head of the linked list, our currentIndex should be 0. The currentIndex should increment by one for each node we pass. Just like the remove(element) method, we need to reconnect the nodes. The node that has reference to the removed node should now have reference to the next node.",
+        "Instructions",
+        "Write a removeAt(index) method that removes and returns a node at a given index. The method should return null if the given index is a negative or is more than or equal to the length of the linked list.",
+        "Note",
+        "Remember to keep count of the currentIndex."
+      ],
+      "challengeSeed": [
+        "function LinkedList() { ",
+        "  var length = 0; ",
+        "  var head = null; ",
+        "",
+        "  var Node = function(element){ // {1} ",
+        "    this.element = element; ",
+        "    this.next = null; ",
+        "  }; ",
+        "",
+        "  this.size = function(){",
+        "    return length;",
+        "  };",
+        "",
+        "  this.head = function(){",
+        "    return head;",
+        "  };",
+        "",
+        "  this.add = function(element){",
+        "    var node = new Node(element);",
+        "    if(head === null){",
+        "        head = node;",
+        "    } else {",
+        "        currentNode = head;",
+        "",
+        "        while(currentNode.next){",
+        "            currentNode  = currentNode.next;",
+        "        }",
+        "",
+        "        currentNode.next = node;",
+        "    }",
+        "",
+        "    length++;",
+        "  }; ",
+        "",
+        "  this.remove = function(element){",
+        "    var currentNode = head;",
+        "    var previousNode;",
+        "    if(currentNode.element === element){",
+        "        head = currentNode.next;",
+        "    } else {",
+        "        while(currentNode.element !== element) {",
+        "            previousNode = currentNode;",
+        "            currentNode = currentNode.next;",
+        "        }",
+        "",
+        "        previousNode.next = currentNode.next;",
+        "    }",
+        "",
+        "    length --;",
+        "  };",
+        "",
+        "  // Only change code below this line",
+        "",
+        "  // Only change code above this line",
+        "} ",
+        "",
+        "// Test your code",
+        "var conga = new LinkedList();",
+        "conga.add('Kitten');",
+        "conga.add('Puppy');",
+        "conga.add('Dog');",
+        "conga.add('Cat');",
+        "conga.add('Fish');",
+        "console.log(conga.size());",
+        "console.log(conga.removeAt(3));",
+        "console.log(conga.size());"
+      ],
+      "tests": [
+        "assert((function(){var test = new LinkedList(); return (typeof test.removeAt === 'function')}()), 'message: Your <code>LinkedList</code> class should have a <code>removeAt</code> method.');",
+        "assert((function(){var test = new LinkedList(); test.add('cat'); test.add('dog'); test.add('kitten'); test.removeAt(1); return test.size() === 2}()), 'message: Your <code>removeAt</code> method should reduce the <code>length</code> of the linked list');",
+        "assert((function(){var test = new LinkedList(); test.add('cat'); test.add('dog'); test.add('kitten');  return test.removeAt(1) === 'dog'}()), 'message: Your <code>removeAt</code> method should also return the element of the removed node.');",
+        "assert((function(){var test = new LinkedList(); test.add('cat'); test.add('dog'); test.add('kitten');  return (test.removeAt(-1) === null)}()), 'message: Your <code>removeAt</code> method should also return <code>null</code> if the given index is less than <code>0</code>');",
+        "assert((function(){var test = new LinkedList(); test.add('cat'); test.add('dog'); test.add('kitten');  return (test.removeAt(3) === null)}()), 'message: Your <code>removeAt</code> method should also return <code>null</code> if the given index is equal or more than the <code>length</code> of the linked list.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d8252367417b2b2512c66",
+      "title": "Learn how Binary Search Trees Work",
+      "description": [
+        "Lets look at one of the most popular Data Structures : Trees. Like the literal meaning, a tree can have many leaves and many brances. Here, lets see an example of a simple tree, a Binary Search Tree. This tree is special, as at any level it can have two child's, a left child and a right child. Although, it has another unique speciality : The left child's value must be less than the parent, and the parents value must be less than the right child. Sound's confusing at first? Well, this is a rule enforced for all Binary Search Trees (BST)'s around the world for one simple reason, fast searching. Yes, hence the name Search in the Tree!",
+        "You might have guessed it by now : Suppose your job is to find the value 7 from a tree containing 1 to 10 values. Now whenever you encounter a value, instantly you can guess which child will contain 7. That is, say you face a node having value of 5, instantly you know that 7 must lie somewhere under the right child of this node. Simple yet elegant!",
+        "Today we are going to add a number in a Tree. While adding though you need to be careful about the golden rule : left child < parent < right child. So turn up your thinking hats and solve this challenge, such that every time an element is added its in the right position! And btw, lookout for the null values as usual! Btw, we have added a simple helper function for you to visualize the tree.",
+        "Also, we are going to display how trivial it is to search for an element in a Binary Search Tree. Given a value test whether the number isPresent in the tree!"
+      ],
+      "challengeSeed": [
+        "// helper function",
+        "function Node(val) {",
+        "    this.value = val;",
+        "    this.left = null;",
+        "    this.right = null;",
+        "}",
+        "",
+        "function BinarySearchTree() {",
+        "    this.root = null;",
+        "",
+        "        /**",
+        "     * Add an element in a BST",
+        "     */",
+        "    this.add = function(val) {",
+        "        var root = this.root;",
+        "        // Only change your code below this line",
+        "",
+        "",
+        "        // Only change your code above this line",
+        "    }",
+        "",
+        "    /**",
+        "     * Return true if value present in tree, false otherwise",
+        "     */",
+        "    this.isPresent = function(query) {",
+        "        var root = this.root;",
+        "        // Only change your code below this line",
+        "",
+        "",
+        "        // Only change your code above this line",
+        "    }",
+        "}",
+        "",
+        "var bst = new BinarySearchTree();",
+        "bst.add(2);",
+        "bst.add(1);",
+        "bst.add(3);",
+        "displayTree(bst);",
+        "bst.isPresent(3);",
+        "bst.isPresent(5);",
+        "",
+        "",
+        "// helper function",
+        "function displayTree(tree) {",
+        "    console.log(JSON.stringify(tree, null, 2))",
+        "}"
+      ],
+      "tests": [
+        "assert((function(){var test = new BinarySearchTree(); return (typeof test.add === 'function')}()), 'message: Your <code>BinarySearchTree</code> class should have a <code>add</code> method.');",
+        "assert((function(){var test = new BinarySearchTree(); test.add(2); test.add(1); test.add(3); return test.root.value === 2}()), 'message: Tree should have root element created from the first input');",
+        "assert((function(){var test = new BinarySearchTree(); test.add(2); test.add(1); test.add(3); return test.root.left.value === 1}()), 'message: Tree should have left child of root element as the least value input');",
+        "assert((function(){var test = new BinarySearchTree(); test.add(2); test.add(1); test.add(3); return test.root.right.value === 3}()), 'message: Tree should have right child of root element as the greatest value input');",
+        "assert((function(){var test = new BinarySearchTree(); test.add(1); test.add(2); test.add(3); return (test.root.value === 1 && test.root.right.value ==2 && test.root.right.right.value == 3)}()), 'message: When added in ascending order, all elements must be in right nodes');",
+        "assert((function(){var test = new BinarySearchTree(); test.add(3); test.add(2); test.add(1); return (test.root.value === 3 && test.root.left.value ==2 && test.root.left.left.value == 1)}()), 'message: When added in descending order, all elements must be in left nodes');",
+        "assert((function(){var test = new BinarySearchTree(); test.add(3); test.add(2); test.add(1); var t = test.isPresent(2); var f = test.isPresent(5); return (t == true && f == false)}()), 'message: If value present in tree, return isPresent true else false');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d8252367417b2b2512c67",
+      "title": "Add Elements at a Specific Index in a Linked List",
+      "description": [
+        "Let's create a addAt(index,element) method that adds an element at a given index.",
+        "Just like how we remove elements at a given index, we need to keep track of the currentIndex as we traverse the linked list. When the currentIndex matches the given index, we would need to reassign the previous node's next property to reference the new added node. And the new node should reference the next node in the currentIndex.",
+        "Returning to the conga line example, a new person wants to join the line, but he wants to join in the middle. You are in the middle of the line, so you take your hands off of the person ahead of you. The new person walks over and puts his hands on the person you once had hands on, and you now have your hands on the new person.",
+        "Instructions",
+        "Create an addAt(index,element) method that adds an element at a given index. Return false if an element was unable to be added.",
+        "Note",
+        "Remember to check if the given index is a negative or is longer than the length of the linked list."
+      ],
+      "challengeSeed": [
+        "function LinkedList() { ",
+        "  var length = 0; ",
+        "  var head = null; ",
+        "",
+        "  var Node = function(element){",
+        "    this.element = element; ",
+        "    this.next = null; ",
+        "  }; ",
+        "",
+        "  this.size = function(){",
+        "    return length;",
+        "  };",
+        "",
+        "  this.head = function(){",
+        "    return head;",
+        "  };",
+        "",
+        "  this.add = function(element){",
+        "    var node = new Node(element);",
+        "    if(head === null){",
+        "        head = node;",
+        "    } else {",
+        "        currentNode = head;",
+        "",
+        "        while(currentNode.next){",
+        "            currentNode  = currentNode.next;",
+        "        }",
+        "",
+        "        currentNode.next = node;",
+        "    }",
+        "",
+        "    length++;",
+        "  }; ",
+        "",
+        "  // Only change code below this line",
+        "",
+        "  // Only change code above this line",
+        "",
+        "} ",
+        "",
+        "// Test your code",
+        "var conga = new LinkedList();",
+        "conga.add('Kitten');",
+        "console.log(conga.addAt(1,'Puppy'));",
+        "console.log(conga.addAt(2,'Cat'));",
+        "console.log(conga.head());"
+      ],
+      "tests": [
+        "assert((function(){var test = new LinkedList(); test.add('cat'); test.add('dog'); test.addAt(0,'cat'); return test.head().element === 'cat'}()), 'message: Your <code>addAt</code> method should reassign <code>head</code> to the new node when the given index is 0.');",
+        "assert((function(){var test = new LinkedList(); test.add('cat'); test.add('dog'); test.addAt(0,'cat'); return test.size() === 3}()), 'message: Your <code>addAt</code> method should increase the length of the linked list by one for each new node added to the linked list.');",
+        "assert((function(){var test = new LinkedList(); test.add('cat'); test.add('dog'); return (test.addAt(4,'cat') === false); }()), 'message: Your <code>addAt</code> method should return <code>false</code> if a node was unable to be added.');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d8252367417b2b2512c68",
+      "title": "Traverse a Binary Search Tree In-order, Pre-order and Post-order",
+      "description": [
+        "When talking about trees, lets see how we can walk along a tree. There are three ways we can do so:",
+        "Inorder traversal : Traverse the nodes according to their value (ascending to descending)",
+        "Preorder traversal : Traverse the nodes according as they are added",
+        "Postorder traversal : Traverse the nodes in the reverse way as they were added. Usefull to delete a tree",
+        "These traversals can be easily implemented using a slight recursion technique. All you need to know when to recurse and when to print.",
+        "Here for our convenience we will not print a node, in turn we will push that node in an array and pass that array to the function for later use.",
+        "Remember to return that array as well!",
+        "Bonus exercise : Return the size of the tree."
+      ],
+      "challengeSeed": [
+        "function Node(val) {",
+        "    this.value = val;",
+        "    this.left = null;",
+        "    this.right = null;",
+        "}",
+        "",
+        "function BinarySearchTree() {",
+        "    this.root = null;",
+        "    this.current = null;",
+        "",
+        "    this.add = function(val) {",
+        "        var root = this.root;",
+        "        if(!root) {",
+        "            this.root = new Node(val);",
+        "            return;",
+        "        }",
+        "",
+        "        var currentNode = root;",
+        "        var newNode = new Node(val);",
+        "",
+        "        while(currentNode) {",
+        "            if(val < currentNode.value) {",
+        "                if(!currentNode.left) {",
+        "                    currentNode.left = newNode;",
+        "                    break;",
+        "                }",
+        "                else {",
+        "                    currentNode = currentNode.left;",
+        "                }",
+        "            } else {",
+        "                if(!currentNode.right) {",
+        "                    currentNode.right = newNode;",
+        "                    break;",
+        "                } else {",
+        "                    currentNode = currentNode.right;",
+        "                }",
+        "            }",
+        "        }",
+        "    }",
+        "",
+        "    this.isPresent = function(query) {",
+        "        var root = this.root;",
+        "        var currentNode = root;",
+        "        while(currentNode) {",
+        "            if(currentNode.value == query) {",
+        "                return true;",
+        "            } else if(query < currentNode.value) {",
+        "                currentNode = currentNode.left;",
+        "            } else {",
+        "                currentNode = currentNode.right;",
+        "            }",
+        "        }",
+        "        return false;",
+        "        // Only change your code above this line",
+        "    }",
+        "",
+        "    /**",
+        "     * Inorder traversal. For BST, the ouput should be a sorted array",
+        "     * Hint : For each node, the strategy is: recur left, print the node data, recur right",
+        "     */",
+        "    this.inorder = function(node, arr) {",
+        "        var root = this.root;",
+        "        // Only change your code below this line",
+        "",
+        "        // Only change your code above this line",
+        "    }",
+        "",
+        "    /**",
+        "     * Preorder traversal.",
+        "     * Hint : For each node, the strategy is: print the node data, recur left, recur right",
+        "     */",
+        "    this.preorder = function(node, arr) {",
+        "        var root = this.root;",
+        "        // Only change your code above this line",
+        "",
+        "        // Only change your code above this line",
+        "    }",
+        "",
+        "    /**",
+        "     * Postorder traversal.",
+        "     * Hint : For each node, the strategy is: recur left, recur right, print the node data",
+        "     */",
+        "    this.postorder = function(node, arr) {",
+        "        var root = this.root;",
+        "        // Only change your code above this line",
+        "",
+        "        // Only change your code above this line",
+        "    }",
+        "",
+        "    /**",
+        "     * Size of tree.",
+        "     */",
+        "    this.size = function() {",
+        "        // Only change your code above this line",
+        "",
+        "        // Only change your code above this line",
+        "    }",
+        "",
+        "}",
+        "",
+        "// helper function",
+        "function displayTree(tree) {",
+        "    console.log(JSON.stringify(tree, null, 2))",
+        "}",
+        "",
+        "var bst = new BinarySearchTree();",
+        "bst.add(2);",
+        "bst.add(1);",
+        "bst.add(3);",
+        "displayTree(bst);",
+        "",
+        "var a = bst.inorder();",
+        "console.log(a);",
+        "console.log(bst.size());",
+        "",
+        "var b = bst.postorder();",
+        "console.log(b);",
+        "",
+        "var c = bst.preorder();",
+        "console.log(c);"
+      ],
+      "tests": [
+        "assert((function(){var test = new BinarySearchTree(); return (typeof test.inorder === 'function' && typeof test.preorder === 'function' && typeof test.postorder === 'function' && typeof test.size === 'function')}()), 'message: Your <code>BinarySearchTree</code> class should have <code>inorder</code>, <code>preorder</code>, <code>postorder</code> and <code>size</code> methods.');",
+        "assert((function(){var test = new BinarySearchTree(); test.add(1); test.add(2); test.add(3); return (test.root.value === 1 && test.root.right.value ==2 && test.root.right.right.value == 3)}()), 'message: When added in ascending order, all elements must be in right nodes');",
+        "assert((function(){var test = new BinarySearchTree(); test.add(3); test.add(2); test.add(1); return (test.root.value === 3 && test.root.left.value ==2 && test.root.left.left.value == 1)}()), 'message: When added in descending order, all elements must be in left nodes');",
+        "assert((function(){var test = new BinarySearchTree(); test.add(2); test.add(1); test.add(3); var i = test.inorder(); return (i[0] == 1 && i[1] == 2 && i[2] == 3)}()), 'message: Inorder traversal must return sorted array');",
+        "assert((function(){var test = new BinarySearchTree(); test.add(2); test.add(1); test.add(3); var i = test.preorder(); return (i[0] == 2 && i[1] == 1 && i[2] == 3)}()), 'message: Preorder traversal must return BFS array');",
+        "assert((function(){var test = new BinarySearchTree(); test.add(2); test.add(1); test.add(3); var i = test.postorder(); return (i[0] == 1 && i[1] == 3 && i[2] == 2)}()), 'message: Postrder traversal must return reversed array');",
+        "assert((function(){var test = new BinarySearchTree(); test.add(2); test.add(1); test.add(3); var l = test.size(); return (l === 3)}()), 'message: Postrder traversal must return reversed array');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d8252367417b2b2512c69",
+      "title": "Delete Leaf Nodes from a Binary Search Tree",
+      "description": [
+        "This is a long and complicated task, but very useful to know. Basically while deleting tree nodes we encounter the following three cases:",
+        "Root to be deleted is a :",
+        "Leaf Node",
+        "A Node with just one child",
+        "Node with two children",
+        "Each case requires special handling. Also, it depends whether the node to delete is actually a root itself or not, because then you have to consider the child nodes as well.",
+        "Let's discuss the cases in detail :",
+        "Case 1 : Leaf Node",
+        "No brainer here, just obliterate the leaf node. No special things to do here, invalidate the pointer from its parent to itself!",
+        "Case 2 : Node with just one child",
+        "First, figure out which child it is, i.e either a left child or a right child. Then \"skip\" the pointer from its parent to its child, It's simple as that!",
+        "Case 3 : Node with two children",
+        "Now here is when the things start going crazy! Let us see this with an example image : https://en.wikipedia.org/wiki/File:Binary_search_tree.svg",
+        "With a root of 8 and a left child of 3, what would happen if the 3 was removed? There are two possibilities: 1 (3′s left child, called the in-order predecessor) could take the place of 3 or 4 (the left-most child of the right subtree, called the in-order successor) can take the place of 3.",
+        "Either of these two options is appropriate. To find the in-order predecessor, the value that comes before the value being removed, examine the left subtree of the node to remove and select the right-most descendant; to find the in-order successor, the value that comes immediately after the value being removed, reverse the process and examine the right subtree for the left-most descendant. Each of these requires another traversal of the tree to complete the operation.",
+        "Sounds tough? See this tutorial : https://webdocs.cs.ualberta.ca/~holte/T26/del-from-bst.html, or better yet, play with this superb animation : https://www.cs.usfca.edu/~galles/visualization/BST.html",
+        "Ready? Lets begin coding!"
+      ],
+      "challengeSeed": [
+        "function Node(val) {",
+        "    this.value = val;",
+        "    this.left = null;",
+        "    this.right = null;",
+        "}",
+        "",
+        "function BinarySearchTree() {",
+        "    this.root = null;",
+        "    this.current = null;",
+        "",
+        "    this.add = function(val) {",
+        "        var root = this.root;",
+        "        if(!root) {",
+        "            this.root = new Node(val);",
+        "            return;",
+        "        }",
+        "",
+        "        var currentNode = root;",
+        "        var newNode = new Node(val);",
+        "",
+        "        while(currentNode) {",
+        "            if(val < currentNode.value) {",
+        "                if(!currentNode.left) {",
+        "                    currentNode.left = newNode;",
+        "                    break;",
+        "                }",
+        "                else {",
+        "                    currentNode = currentNode.left;",
+        "                }",
+        "            } else {",
+        "                if(!currentNode.right) {",
+        "                    currentNode.right = newNode;",
+        "                    break;",
+        "                } else {",
+        "                    currentNode = currentNode.right;",
+        "                }",
+        "            }",
+        "        }",
+        "    }",
+        "",
+        "    this.isPresent = function(query) {",
+        "        var root = this.root;",
+        "        var currentNode = root;",
+        "        while(currentNode) {",
+        "            if(currentNode.value == query) {",
+        "                return true;",
+        "            } else if(query < currentNode.value) {",
+        "                currentNode = currentNode.left;",
+        "            } else {",
+        "                currentNode = currentNode.right;",
+        "            }",
+        "        }",
+        "        return false;",
+        "    }",
+        "",
+        "    this.remove = function (val) {",
+        "        var found = false,",
+        "                parent = null,",
+        "                current = this.root,",
+        "                childCount,",
+        "                replacement,",
+        "                replacementParent",
+        "",
+        "        // find the node and set `found` = true, with current pointing to the found node",
+        "        // and `parent` its parent",
+        "        // Only change your code below this line",
+        "",
+        "",
+        "        // Only change your code above this line",
+        "",
+        "        // If node was found, then we proceed deletion",
+        "        if(found) {",
+        "            // figure out how many children (i.e either 0 or 1 or 2)",
+        "            // Only change your code below this line",
+        "",
+        "",
+        "            // Only change your code above this line",
+        "",
+        "            // case : if value is at the root",
+        "            if(current == this.root) {",
+        "                console.log('root case')",
+        "                switch(childCount) {",
+        "                    // case : no children, so we will just proceed to erase the root",
+        "                    case 0:",
+        "                        console.log('case 0')",
+        "                        // Only change your code below this line",
+        "",
+        "                        // Only change your code above this line",
+        "                        break;",
+        "                    // case : one child, figure out which child and then use that as root",
+        "                    case 1:",
+        "                        console.log('case 1')",
+        "                        // Only change your code below this line",
+        "",
+        "                        // Only change your code above this line",
+        "                        break;",
+        "                    // case : two children",
+        "                    case 2:",
+        "                        console.log('case 2')",
+        "                        // let us select new root to be old root's left child",
+        "                        replacement = this.root.left;",
+        "                        // now let's find the right most leaf node to be the new root",
+        "                        // find the right most leaf node of `replacement` and save the its parent",
+        "                        // within `replacementParent`",
+        "                        // Only change your code below this line",
+        "",
+        "",
+        "                        // Only change your code above this line",
+        "",
+        "                        // If it is not the first left node",
+        "                        if (replacementParent !== null) {",
+        "                            // remove the new root from its previous position",
+        "                            // i.e, replace the right child of replacement parent with left child of the",
+        "                            // node to be replaced",
+        "                            // Only change your code below this line",
+        "",
+        "",
+        "                            // Only change your code above this line",
+        "",
+        "                            // Give the new root all of old root's children",
+        "                            // Only change your code below this line",
+        "",
+        "",
+        "                            // Only change your code above this line",
+        "                        } else {",
+        "                            // assign the children to the root's right child",
+        "                            // Only change your code below this line",
+        "",
+        "",
+        "                            // Only change your code above this line",
+        "                        }",
+        "                        // finally assign new root",
+        "                        this.root = replacement;",
+        "                        break;",
+        "                }",
+        "            }",
+        "            // case if value is not root",
+        "            else {",
+        "                console.log('child case')",
+        "                switch(childCount) {",
+        "                    // case 0 : no children, just detach it from parent",
+        "                    case 0:",
+        "                        console.log('case 0')",
+        "                        // if current's value is less than its parents, null out the left pointer,",
+        "                        // else null out the right pointer",
+        "                        // Only change your code below this line",
+        "",
+        "",
+        "                        // Only change your code above this line",
+        "                        break;",
+        "                    // case 1: one child, just reassign to parent",
+        "                    case 1:",
+        "                        console.log('case 1')",
+        "                        // if current's value is less than its parents, reset the left pointer,",
+        "                        // else reset the right pointer",
+        "                        // Only change your code below this line",
+        "",
+        "",
+        "                        // Only change your code above this line",
+        "                        break;",
+        "                    // case 2: two child",
+        "                    case 2:",
+        "                        console.log('case 2')",
+        "                        // reset pointers for new traversal",
+        "                        replacement = current.left;",
+        "                        // find the right most node",
+        "                        // find the right most leaf node of `replacement` and save the its parent",
+        "                        // within `replacementParent`",
+        "                        // Only change your code below this line",
+        "",
+        "",
+        "                        // Only change your code above this line",
+        "                        if (replacementParent) {",
+        "                            // remove the new node from its previous position",
+        "                            // i.e, replace the right child of replacement parent with left child of the",
+        "                            // node to be replaced",
+        "                            // Only change your code below this line",
+        "",
+        "                            // Only change your code above this line",
+        "",
+        "                            // assign all current's children to the replacement",
+        "                            // Only change your code below this line",
+        "",
+        "",
+        "                            // Only change your code above this line",
+        "                        } else {",
+        "                            // assign the children to the current's right child",
+        "                            // Only change your code below this line",
+        "",
+        "                            // Only change your code above this line",
+        "                        }",
+        "                        // place the replacement in the right spot",
+        "                        // if current value is less than parent, add replacement as parent left child,",
+        "                        // else right",
+        "                        // Only change your code below this line",
+        "",
+        "                        // Only change your above below this line",
+        "                        break;",
+        "                }",
+        "            }",
+        "        }",
+        "    }",
+        "}",
+        "",
+        "// helper function",
+        "function displayTree(tree) {",
+        "    console.log(JSON.stringify(tree, null, 2))",
+        "}",
+        "",
+        "var bst = new BinarySearchTree();",
+        "bst.add(3);",
+        "bst.add(1);",
+        "bst.add(4);",
+        "bst.add(2);",
+        "bst.add(0);",
+        "bst.add(5);",
+        "bst.add(6);",
+        "displayTree(bst);",
+        "",
+        "bst.remove(1);",
+        "displayTree(bst);"
+      ],
+      "tests": [
+        "assert((function(){var test = new BinarySearchTree(); return (typeof test.remove === 'function' && typeof test.add === 'function')}()), 'message: Your <code>BinarySearchTree</code> class should have <code>add</code> and <code>remove</code> methods.');",
+        "assert((function(){var test = new BinarySearchTree(); test.add(3); test.add(1); test.add(4); test.add(2); test.add(0); test.add(5); test.add(6); test.remove(6); return (test.isPresent(6) !== true)}()), 'message: Leaf node should be removed properly');",
+        "assert((function(){var test = new BinarySearchTree(); test.add(3); test.add(1); test.add(4); test.add(2); test.add(0); test.add(5); test.add(6); test.remove(3); return (test.isPresent(3) !== true && test.root.value == 2)}()), 'message: Root node should be removed properly and replaced by suitable candidate');",
+        "assert((function(){var test = new BinarySearchTree(); test.add(3); test.add(1); test.add(4); test.add(2); test.add(0); test.add(5); test.add(6); test.remove(5); return (test.isPresent(5) !== true)}()), 'message: Node with one child should be removed properly');",
+        "assert((function(){var test = new BinarySearchTree(); test.add(3); test.add(1); test.add(4); test.add(2); test.add(0); test.add(5); test.add(6); test.remove(1); return (test.isPresent(1) !== true && test.root.left.value == 0)}()), 'message: Node with two child should be removed properly and replaced by suitable candidate');"
+      ],
+      "solutions": [],
+      "hints": [],
+      "type": "waypoint",
+      "challengeType": 1,
+      "translations": {
+        "de": {
+          "description": [],
+          "title": ""
+        },
+        "fr": {
+          "description": [],
+          "title": ""
+        },
+        "pt-br": {
+          "description": [],
+          "title": ""
+        },
+        "ru": {
+          "description": [],
+          "title": ""
+        },
+        "es": {
+          "description": [],
+          "title": ""
+        },
+        "cn": {
+          "description": [],
+          "title": ""
+        }
+      }
+    },
+    {
+      "id": "587d8253367417b2b2512c6a",
+      "title": "Typed Arrays",
+      "description": [
+        "Arrays are JavaScript objects that can hold a lot of different elements.",
+        "<code>var complexArr = [1, 5, \"2\", \"Word\", {\"name\": \"James\"}];</code>",
+        "Basically what happens in the background is that your browser will automatically give the right amount of memory space for that array. It will also change as needed if you add or remove data.",
+        "However, in the world of high performance and different element types, sometimes you need to be more specific on how much memory is given to an array.",
+        "Typed arrays are the answer to this problem. You are now able to say how much memory you want to give an array. Below is a basic overview of the different types of arrays available and the size in bytes for each element in that array.",
+        "<code>Type  Each element size in bytes</code>",
+        "<code>Int8Array 1</code>",
+        "<code>Uint8Array  1</code>",
+        "<code>Uint8ClampedArray 1</code>",
+        "<code>Int16Array  2</code>",
+        "<code>Uint16Array 2</code>",
+        "<code>Int32Array  4</code>",
+        "<code>Uint32Array 4</code>",
+        "<code>Float32Array  4</code>",
+        "<code>Float64Array  8</code>",
+        "There are two ways in creating these kind of arrays. One way is to create it directly. Below is how to create a 7 length Int16Array.",
+        "<code>var i8 = new Int16Array(3);</code>",
+        "<code>console.log(i8);</code>",
+        "<code>// Returns [0, 0, 0]</code>",
+        "You can also create a buffer to assign how much data (in bytes) you want the array to take up.",
+        "Note",
+        "To create typed arrays using buffers, you need to assign the number of bytes to be a multiple of the bytes listed above.",
+        "<code>// Create same Int16Array array differently</code>",
+        "<code>var byteSize = 6; // Needs to be multiple of 2</code>",
+        "<code>var buffer = new ArrayBuffer(byteSize);</code>",
+        "<code>var i8View = new Int16Array(buffer);</code>",
+        "<code>buffer.byteLength; // Returns 6</code>",
+        "<code>i8View.byteLength; // Returns 6</code>",
+        "<code>console.log(i8View); // Returns [0, 0, 0]</code>",
+        "Buffers are general purpose objects that just carry data. You cannot access them normally. To access them, you need to first create a view.",
+        "<code>i8View[0] = 42;</code>",
+        "<code>console.log(i8View); // Returns [42, 0, 0]</code>",
+        "Note",
+        "Typed arrays do not have some of the methods traditional arrays have such as .pop() or .push(). Typed arrays also fail Array.isArray() that checks if something is an array. Although simplier, this can be an advantage for less-sophisticated JavaScript engines to implement them.",
+        "Instructions",
+        "First create a buffer that is 64-bytes. Then create a Int32Array typed array with a view of it called int32View.",
+        "Here are some helpful links:",
+        "Typed arrays",
+        "The code for the table used above is:",
+        "<table class='table table-striped'><tr><th>Type</th><th>Each element size in bytes</th></tr><tr><td><code>Int8Array</code></td><td>1</td></tr><tr><td><code>Uint8Array</code></td><td>1</td></tr><tr><td><code>Uint8ClampedArray</code></td><td>1</td></tr><tr><td><code>Int16Array</code></td><td>2</td></tr><tr><td><code>Uint16Array</code></td><td>2</td></tr><tr><td><code>Int32Array</code></td><td>4</td></tr><tr><td><code>Uint32Array</code></td><td>4</td></tr><tr><td><code>Float32Array</code></td><td>4</td></tr><tr><td><code>Float64Array</code></td><td>8</td></tr></table>",
+        "The class='table table-striped' is specific to FreeCodeCamp's CSS style."
+      ],
+      "challengeSeed": [
+        "var buffer;",
+        "var i32View;"
+      ],
+      "tests": [
+        "assert(buffer.byteLength === 64, 'message: Your `buffer` should be 64 bytes large.');",
+        "assert(i32View.byteLength === 64, 'message: Your `i32View` view of your buffer should be 64 bytes large.');",
+        "assert(i32View.length === 16, 'message: Your `i32View` view of your buffer should be 16 elements long.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "8d1323c8c441eddfaeb5bdef",
+      "title": "Creating a Set Class",
+      "description": [
+        "In the next few exercises we are going to create a function to emulate a data structure called a \"Set\". A Set is like an array, but it cannot contain duplicate values. The typical use for a Set is to simply check for the presence of an item. This can be implemented with an object, for instance:",
+        "<code>var set = new Object();</code>",
+        "<code>set.foo = true;</code>",
+        "<code>// See if foo exists in our set:</code>",
+        "<code>console.log(set.foo) // true</code>",
+        "In the next few exercises, we will build a full featured Set from scratch.",
+        "In this exercise you will add a function to add a value to our set collection:",
+        "<code>this.add = function(){</code>",
+        "<code>  //some code to add value to the set</code>",
+        "<code>}</code>"
+      ],
+      "challengeSeed": [
+        "function Set() {",
+        "    // the var collection will hold our set",
+        "    var collection = [];",
+        "    // this method will check for the presence of an element and return true or false",
+        "    this.has = function(element) {",
+        "        return (collection.indexOf(element) !== -1);",
+        "    };",
+        "    // this method will return all the values in the set",
+        "    this.values = function() {",
+        "        return collection;",
+        "    };",
+        "    // change code below this line",
+        "    // change code above this line",
+        "};",
+        "var setA = new Set();",
+        "setA.add(\"a\");",
+        "setA.add(\"b\");",
+        "setA.add(\"b\");",
+        "console.log(setA.values() // should be [ 'a', 'b'];"
+      ],
+      "tests": [
+        "assert((function(){var test = new Set(); return (typeof test.add === 'function')}()), 'message: Your <code>Set</code> class should have a <code>add</code> method.');",
+        "assert(function(){var test = new Set; test.add(\"a\");test.add(\"b\";test.add(\"a\");return test.values() === [ 'a', 'b' ])}(), 'message: Your code needs to prevent duplicates.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8253367417b2b2512c6b",
+      "title": "Remove from a Set",
+      "description": [
+        "In this exercises we are going to create a delete function for our Set. The function should be named this.remove"
+      ],
+      "challengeSeed": [
+        "function Set() {",
+        "    // the var collection will hold the set",
+        "    var collection = [];",
+        "    // this method will check for the presence of an element and return true or false",
+        "    this.has = function(element) {",
+        "        return (collection.indexOf(element) !== -1);",
+        "    };",
+        "    // this method will return all the values in the set",
+        "    this.values = function() {",
+        "        return collection;",
+        "    };",
+        "    // this method will add an element to the set",
+        "    this.add = function(element) {",
+        "        if(!this.has(element)){",
+        "            collection.push(element);",
+        "            return true;",
+        "        }",
+        "        return false;",
+        "    };",
+        "    // change code below this line",
+        "    // change code above this line",
+        "};",
+        "var setA = new Set();",
+        "setA.add(\"a\");",
+        "setA.add(\"b\");",
+        "setA.remove(\"b\");",
+        "console.log(setA.values())//should be [ 'a' ];"
+      ],
+      "tests": [
+        "assert((function(){var test = new Set(); return (typeof test.remove === 'function')}, 'message: Your <code>Set</code> class should have a <code>remove</code> method.');",
+        "assert(function(){var test = new Set; test.add(\"a\");test.add(\"b\");test.remove(\"a\");return (test.values() === [ 'b' ])}), 'message: Your code should remove the item from');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "8d1923c8c441eddfaeb5bdef",
+      "title": "Size of the set",
+      "description": [
+        "In this exercise we are going to create a size function for our Set. This function should be named this.size and it should return the size of the collection."
+      ],
+      "challengeSeed": [
+        "function Set() {",
+        "    // the var collection will hold the set",
+        "    var collection = [];",
+        "    // this method will check for the presence of an element and return true or false",
+        "    this.has = function(element) {",
+        "        return (collection.indexOf(element) !== -1);",
+        "    };",
+        "    // this method will return all the values in the set",
+        "    this.values = function() {",
+        "        return collection;",
+        "    };",
+        "    // this method will add an element to the set",
+        "    this.add = function(element) {",
+        "        if(!this.has(element)){",
+        "            collection.push(element);",
+        "            return true;",
+        "        }",
+        "        return false;",
+        "    };",
+        "    // this method will remove an element from a set",
+        "    this.remove = function(element) {",
+        "        if(this.has(element)){",
+        "            index = collection.indexOf(element);",
+        "            collection.splice(index,1);",
+        "            return true;",
+        "        }",
+        "        return false;",
+        "    };",
+        "    // change code below this line",
+        "    // change code above this line",
+        "}",
+        "var setA = new Set();",
+        "setA.add(\"a\");",
+        "setA.add(\"b\");",
+        "console.log(setA.size()) // should be 2;"
+      ],
+      "tests": [
+        "assert((function(){var test = new Set(); return (typeof test.size === 'function')}, 'message: Your <code>Set</code> class should have a <code>size</code> method.');",
+        "assert(function(){var test = new Set; test.add(\"a\");test.add(\"b\");test.remove(\"a\");return (test.size() === 2)}), 'message: return the number of elements in the collection.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8253367417b2b2512c6c",
+      "title": "Perform a union on 2 Sets of data",
+      "description": [
+        "In this exercise we are going to perform a union on 2 sets of data. We will create a method on our Set data structure called union. This method should take another set as an argument and update the set you called the method on to be the union of the two sets, excluding any duplicate values."
+      ],
+      "challengeSeed": [
+        "function Set() {",
+        "    // the var collection will hold the set",
+        "    var collection = [];",
+        "    // this method will check for the presence of an element and return true or false",
+        "    this.has = function(element) {",
+        "        return (collection.indexOf(element) !== -1);",
+        "    };",
+        "    // this method will return all the values in the set",
+        "    this.values = function() {",
+        "        return collection;",
+        "    };",
+        "    // this method will add an element to the set",
+        "    this.add = function(element) {",
+        "        if(!this.has(element)){",
+        "            collection.push(element);",
+        "            return true;",
+        "        }",
+        "        return false;",
+        "    };",
+        "   // this method will remove an element from a set",
+        "    this.remove = function(element) {",
+        "        if(this.has(element)){",
+        "            index = collection.indexOf(element);",
+        "            collection.splice(index,1);",
+        "            return true;",
+        "        }",
+        "        return false;",
+        "    };",
+        "    // this method will return the size of the set",
+        "    this.size = function() {",
+        "        return collection.length;",
+        "    };",
+        "    // change code below this line",
+        "    // change code above this line",
+        "};",
+        "  var setA = new Set();",
+        "  var setB = new Set();",
+        "  setA.add(\"a\");",
+        "  setA.add(\"b\");",
+        "  setA.add(\"c\");",
+        "  setB.add(\"c\");",
+        "  setB.add(\"d\");",
+        "  var unionSetAB = setA.union(setB);",
+        "  console.log(unionSetAB.values())//should be [ 'a', 'b', 'c', 'd' ];"
+      ],
+      "tests": [
+        "assert((function(){var test = new Set(); return (typeof test.union === 'function')}, 'message: Your <code>Set</code> class should have a <code>union</code> method.');",
+        "assert(function(){  var setA = new Set();  var setB = new Set();  setA.add(\"a\");  setA.add(\"b\");  setA.add(\"c\");  setB.add(\"c\");  setB.add(\"d\");  var unionSetAB = setA.union(setB);return (unionSetAB.values() === [ 'a', 'b', 'c', 'd' ])}), 'message: The proper collection was returned');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8253367417b2b2512c6d",
+      "title": "Perform an Intersection on two Sets of Data",
+      "description": [
+        "In this exercise we are going to perform an intersection on 2 sets of data. An intersection of sets represents all values that are common to two or more sets. This method should be called this.intersection. This method should return a new set containing the intersection of the sets the method was called against."
+      ],
+      "challengeSeed": [
+        "function Set() {",
+        "    // the var collection will hold the set",
+        "    var collection = [];",
+        "    // this method will check for the presence of an element and return true or false",
+        "    this.has = function(element) {",
+        "        return (collection.indexOf(element) !== -1);",
+        "    };",
+        "    // this method will return all the values in the set",
+        "    this.values = function() {",
+        "        return collection;",
+        "    };",
+        "   // this method will add an element to the set",
+        "    this.add = function(element) {",
+        "        if(!this.has(element)){",
+        "            collection.push(element);",
+        "            return true;",
+        "        }",
+        "        return false;",
+        "    };",
+        "    // this method will remove an element from a set",
+        "    this.remove = function(element) {",
+        "        if(this.has(element)){",
+        "            index = collection.indexOf(element);",
+        "            collection.splice(index,1);",
+        "            return true;",
+        "        }",
+        "        return false;",
+        "    };",
+        "    // this method will return the size of the collection",
+        "    this.size = function() {",
+        "        return collection.length;",
+        "    };",
+        "    // this method will return the union of two sets",
+        "    this.union = function(otherSet) {",
+        "        var unionSet = new Set();",
+        "        var firstSet = this.values();",
+        "        var secondSet = otherSet.values();",
+        "        firstSet.forEach(function(e){",
+        "            unionSet.add(e);",
+        "        });",
+        "        secondSet.forEach(function(e){",
+        "            unionSet.add(e);",
+        "        });",
+        "        return unionSet;",
+        "    };",
+        "    // change code below this line",
+        "    // change code above this line",
+        "};",
+        "  var setA = new Set();",
+        "  var setB = new Set();",
+        "  setA.add(\"a\");",
+        "  setA.add(\"b\");",
+        "  setA.add(\"c\");",
+        "  setB.add(\"c\");",
+        "  setB.add(\"d\");",
+        "  var intersectionSetAB = setA.intersection(setB);",
+        "  console.log(intersectionSetAB.values())//should be [ 'c' ];"
+      ],
+      "tests": [
+        "assert((function(){var test = new Set(); return (typeof test.intersection === 'function')}, 'message: Your <code>Set</code> class should have a <code>intersection</code> method.');",
+        "assert(function(){  var setA = new Set();  var setB = new Set();  setA.add(\"a\");  setA.add(\"b\");  setA.add(\"c\");  setB.add(\"c\");  setB.add(\"d\");  var intersectionSetAB = setA.intersection(setB);return (intersectionSetAB.values() === [ 'c' ])}), 'message: The proper collection was returned');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8254367417b2b2512c6e",
+      "title": "Perform a difference on two Sets of data",
+      "description": [
+        "In this exercise we are going to perform a difference on 2 sets of data. A difference of sets should compare two sets and return the items present in the first set that are absent in the second. This method should be called this.difference and should return a new set containing only the items that result from taking the difference of two sets."
+      ],
+      "challengeSeed": [
+        "function Set() {",
+        "    // the var collection will hold the set",
+        "    var collection = [];",
+        "    // this method will check for the presence of an element and return true or false",
+        "    this.has = function(element) {",
+        "        return (collection.indexOf(element) !== -1);",
+        "    };",
+        "    // this method will return all the values in the set",
+        "    this.values = function() {",
+        "        return collection;",
+        "    };",
+        "    // this method will add an element to the set",
+        "    this.add = function(element) {",
+        "        if(!this.has(element)){",
+        "            collection.push(element);",
+        "            return true;",
+        "        }",
+        "        return false;",
+        "    };",
+        "    // this method will remove an element from a set",
+        "    this.remove = function(element) {",
+        "        if(this.has(element)){",
+        "            index = collection.indexOf(element);",
+        "            collection.splice(index,1);",
+        "            return true;",
+        "        }",
+        "        return false;",
+        "    };",
+        "    // this method will return the size of the collection",
+        "    this.size = function() {",
+        "        return collection.length;",
+        "    };",
+        "    // this method will return the union of two sets",
+        "    this.union = function(otherSet) {",
+        "        var unionSet = new Set();",
+        "        var firstSet = this.values();",
+        "        var secondSet = otherSet.values();",
+        "        firstSet.forEach(function(e){",
+        "            unionSet.add(e);",
+        "        });",
+        "        secondSet.forEach(function(e){",
+        "            unionSet.add(e);",
+        "        });",
+        "        return unionSet;",
+        "    };",
+        "    // this method will return the intersection of two sets as a new set",
+        "    this.intersection = function(otherSet) {",
+        "        var intersectionSet = new Set();",
+        "        var firstSet = this.values();",
+        "        firstSet.forEach(function(e){",
+        "            if(otherSet.has(e)){",
+        "                intersectionSet.add(e);",
+        "            }",
+        "        });",
+        "        return intersectionSet;",
+        "    };",
+        "    // change code below this line",
+        "    // change code above this line",
+        "};",
+        "  var setA = new Set();",
+        "  var setB = new Set();",
+        "  setA.add(\"a\");",
+        "  setA.add(\"b\");",
+        "  setA.add(\"c\");",
+        "  setB.add(\"c\");",
+        "  setB.add(\"d\");",
+        "  var differenceSetAB = setA.difference(setB);",
+        "  console.log(differenceSetAB.values()) // should be [ 'a', 'b' ];"
+      ],
+      "tests": [
+        "assert((function(){var test = new Set(); return (typeof test.difference === 'function')}, 'message: Your <code>Set</code> class should have a <code>difference</code> method.');",
+        "assert(function(){  var setA = new Set();  var setB = new Set();  setA.add(\"a\");  setA.add(\"b\");  setA.add(\"c\");  setB.add(\"c\");  setB.add(\"d\");  var differenceSetAB = setA.difference(setB);return (differenceSetAB.values() === [ 'a', 'b' ])}), 'message: The proper collection was returned');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8254367417b2b2512c6f",
+      "title": "Perform a subset check on two Sets of data",
+      "description": [
+        "In this exercise we are going to perform a subset test on 2 sets of data. This will compare the first set, against the second and if the first set is fully contained within the Second then it will return true. This method should be called this.subset. At this point, we have added a lot of useful functionality to our Set data structure. This will complete the challenges for the set data structure."
+      ],
+      "challengeSeed": [
+        "assert((function(){var test = new Set(); return (typeof test.subset === 'function')}, 'message: Your <code>Set</code> class should have a <code>union</code> method.');",
+        "assert(function(){  var setA = new Set();  var setB = new Set();  setA.add(\"a\");  setB.add(\"b\");  setB.add(\"c\");  setB.add(\"a\");  setB.add(\"d\");  var subSetSetAB = setA.subset(setB);return (subSetSetAB === true)}), 'message: The first Set() was contained in the second Set');"
+      ],
+      "tests": [
+        "function Set() {",
+        "    // the var collection will hold the set",
+        "    var collection = [];",
+        "    // this method will check for the presence of an element and return true or false",
+        "    this.has = function(element) {",
+        "        return (collection.indexOf(element) !== -1);",
+        "    };",
+        "    // this method will return all the values in the set",
+        "    this.values = function() {",
+        "        return collection;",
+        "    };",
+        "    // this method will add an element to the set",
+        "    this.add = function(element) {",
+        "        if(!this.has(element)){",
+        "            collection.push(element);",
+        "            return true;",
+        "        }",
+        "        return false;",
+        "    };",
+        "    // this method will remove an element from a set",
+        "    this.remove = function(element) {",
+        "        if(this.has(element)){",
+        "            index = collection.indexOf(element);",
+        "            collection.splice(index,1);",
+        "            return true;",
+        "        }",
+        "        return false;",
+        "    };",
+        "    // this method will return the size of the collection",
+        "    this.size = function() {",
+        "        return collection.length;",
+        "    };",
+        "    // this method will return the union of two sets",
+        "    this.union = function(otherSet) {",
+        "        var unionSet = new Set();",
+        "        var firstSet = this.values();",
+        "        var secondSet = otherSet.values();",
+        "        firstSet.forEach(function(e){",
+        "            unionSet.add(e);",
+        "        });",
+        "        secondSet.forEach(function(e){",
+        "            unionSet.add(e);",
+        "        });",
+        "        return unionSet;",
+        "    };",
+        "    // this method will return the intersection of two sets as a new set",
+        "    this.intersection = function(otherSet) {",
+        "        var intersectionSet = new Set();",
+        "        var firstSet = this.values();",
+        "        firstSet.forEach(function(e){",
+        "            if(otherSet.has(e)){",
+        "                intersectionSet.add(e);",
+        "            }",
+        "        });",
+        "        return intersectionSet;",
+        "    };",
+        "    // this method will return the difference of two sets as a new set",
+        "    this.difference = function(otherSet) {",
+        "        var differenceSet = new Set();",
+        "        var firstSet = this.values();",
+        "        firstSet.forEach(function(e){",
+        "            if(!otherSet.has(e)){",
+        "                differenceSet.add(e);",
+        "            }",
+        "        });",
+        "        return differenceSet;",
+        "    };",
+        "    // change code below this line",
+        "    // change code above this line",
+        "};",
+        "  var setA = new Set();",
+        "  var setB = new Set();",
+        "  setA.add(\"a\");",
+        "  setB.add(\"b\");",
+        "  setB.add(\"c\");",
+        "  setB.add(\"a\");",
+        "  setB.add(\"d\");",
+        "  var subSetSetAB = setA.subset(setB);",
+        "  console.log(subSetSetAB) // should be true;"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8254367417b2b2512c70",
+      "title": "Creating and adding to sets in ES6",
+      "description": [
+        "Now we have worked through ES5, we are going to perform similar actions in ES6. This will be considerably easier. Set is now now a provided data structure like Object, Array, etc. so many of the operations we wrote by hand are now included for us. Let's take a look:",
+        "To create a new empty set:",
+        "let set = new Set();",
+        "You can create a set with a value:",
+        "let set = new Set(1);",
+        "You can create a set with an array:",
+        "let set = new Set([1,2,3]);",
+        "Once you have created a set, you can add the values you wish using set.add:",
+        "let set = new Set([1,2,3]);",
+        "set.add([4,5,6]);",
+        "For this exercise, we will return a set with the following values: 1, 2, 3, 'Taco', 'Cat', 'Awesome'",
+        "Test suite (using the assert method)",
+        "assert((function(){let test = checkSet(); let testArr = [...test];  testArr === [ 1, 2, 3, 'Taco', 'Cat', 'Awesome'])}, 'message: Your Set was returned correctly!');"
+      ],
+      "challengeSeed": [
+        "function checkSet(){",
+        "   let set = new Set([1,2,3,3,2,1,2,3,1]);",
+        "   // change code below this line",
+        "   // change code above this line",
+        "   console.log(set)",
+        "};",
+        "checkSet();"
+      ],
+      "tests": [
+        "assert((function(){let test = checkSet(); let testArr = [...test];  testArr === [ 1, 2, 3, 'Taco', 'Cat', 'Awesome'])}, 'message: Your Set was returned correctly!');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8254367417b2b2512c71",
+      "title": "Removing items from a set in ES6",
+      "description": [
+        "Now we will see how we can remove items from an ES6 Set.",
+        "Let's create a Set:",
+        "let set = new Set([1,2,3]);",
+        "Once you have created a set object, you can remove values you no longer want with delete. For example:",
+        "let set = new Set([1,2,3]);",
+        "set.delete(1);",
+        "console.log([...set]) // should return [ 2, 3 ]",
+        "In this exercise we will return a Set with the passed parameter."
+      ],
+      "challengeSeed": [
+        "function checkSet(itemToRemove){",
+        "   let set = new Set([1,2,3,3,2,1,2,3,1]);",
+        "   // change code below this line",
+        "   // change code above this line",
+        "   console.log(set)",
+        "}",
+        "checkSet(1);"
+      ],
+      "tests": [
+        "assert((function(){let test = checkSet(); let testArr = [...test];  testArr === [ 2, 3 ])}, 'message: Your Set was returned correctly!');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8255367417b2b2512c72",
+      "title": "Using .has and .size on an ES6 Set",
+      "description": [
+        "Now we will look at the .has and .size methods available on the Set object.",
+        "let set = new Set([1,2,3]);",
+        "let hasTwo = set.has(2); // will return true or false",
+        "let howBig = set.size; // will return an integer representing the size of the Array",
+        "console.log(\"Has a 2: \" + hasTwo); // should be true",
+        "console.log(\"Length of Set: \" + howBig); // should show 3",
+        "In this exercise we will pass in an array of a values and a value to check for. We will return a new array with (true or false) for the presence of the value and the size of the Set."
+      ],
+      "challengeSeed": [
+        "function checkSet(arrToBeSet, checkValue){",
+        "   // change code below this line",
+        "   // change code above this line",
+        "   console.log(set)",
+        "}",
+        "let checkSetOutput = checkSet([1,3,5],5);",
+        "console.log(checkSetOutput)"
+      ],
+      "tests": [
+        "assert((function(){let test = checkSet([1,2,3], 2); test === [ true, 3 ])}, 'message: Your Set was returned correctly!');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8255367417b2b2512c73",
+      "title": "Using Spread and Notes for ES5 Set() Integration",
+      "description": [
+        "Next up is one of the coolest things in ES6!",
+        "The noble spread operator! '...' can take iterable objects in ES6 and turn them into arrays",
+        "Let's create a Set, and check out the spread function.",
+        "let set = new Set([1,2,3]);",
+        "let setToArr = [...set]",
+        "console.log(setToArr) // returns [ 1, 2, 3 ]",
+        "Awesome, right!?",
+        "In this exercise we will pass in a set object. We will return an array with the values of the Set.",
+        "The ES5 Set() function we created, can be used to perform union, intersection, difference and subset functions using the new ES6 Sets with very little modification."
+      ],
+      "challengeSeed": [
+        "function checkSet(set){",
+        "   // change code below this line",
+        "   // change code above this line",
+        "};",
+        "let checkSetOutput = checkSet(new Set([1, 2, 3, 4, 5, 6, 27]));",
+        "console.log(checkSetOutput);"
+      ],
+      "tests": [
+        "assert((function(){let test = checkSet(new Set([1,2,3,4,5,6,7])); test === [ 1, 2, 3, 4, 5, 6, 7 ])}, 'message: Your Set was returned correctly!');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8255367417b2b2512c74",
+      "title": "Methods for queuing with priority using the Priority Queue",
+      "description": [
+        "In this challenge you will be creating a Priority Queue. A Priority Queue is a special type of Queue with one primary difference, that you can set the priority in the queue as either high represented by 0 or low represented by an integer greater than 0 during the enqueue process. Item priority will override the placement order: that is, an item enqueue with a higher priority than any preceding items will be moved to the front of the queue. If items have equal priority, then placement order will decide their dequeue order. For instance:",
+        "collection = [['taco',1]]",
+        "PriorityQueue.enqueue(['kitten', 1]);",
+        "console.log([...PriorityQueue])",
+        "// would be [['taco', 1], ['kitten', 1]]",
+        "// not [['kitten', 1], ['taco', 1]]",
+        "For this challenge, you will create an object called PriorityQueue. You will need to add an enqueue method for adding items with a priority, a dequeue method for popping off the front item, a size method to return the number of items in the queue, and finally an isEmpty method that will return true or false if the queue is empty."
+      ],
+      "challengeSeed": [
+        "function PriorityQueue () {",
+        "    let collection = [];",
+        "    this.printCollection = function(){",
+        "      (console.log(collection));",
+        "    };",
+        "    // Only change code below this line",
+        "    // Only change code above this line",
+        "  }",
+        "// Test your queue class",
+        "var DMV = new PriorityQueue();",
+        "DMV.enqueue(['David Brown', 2]);",
+        "DMV.enqueue(['Jon Snow', 1]);",
+        "DMV.dequeue();",
+        "DMV.front();",
+        "DMV.isEmpty();",
+        "DMV.size();",
+        "DMV.dequeue();",
+        "DMV.isEmpty();"
+      ],
+      "tests": [
+        "assert((function(){var test = new PriorityQueue();  return (typeof test.enqueue === 'function')}()), 'message: Your <code>Queue</code> class should have a <code>enqueue</code> method.');",
+        "assert((function(){var test = new PriorityQueue();  return (typeof test.denqueue === 'function')}()), 'message: Your <code>Queue</code> class should have a <code>denqueue</code> method.');",
+        "assert((function(){var test = new PriorityQueue();  return (typeof test.front === 'function')}()), 'message: Your <code>Queue</code> class should have a <code>front</code> method.');",
+        "assert((function(){var test = new PriorityQueue();  return (typeof test.size === 'function')}()), 'message: Your <code>Queue</code> class should have a <code>size</code> method.');",
+        "assert((function(){var test = new PriorityQueue();  return (typeof test.isEmpty === 'function')}()), 'message: Your <code>Queue</code> class should have a <code>isEmpty</code> method.');",
+        "assert((function(){var test = new PriorityQueue(); DMV.enqueue(['David Brown', 2]);DMV.enqueue(['Jon Snow', 1]); return ([...test]===[['Jon Snow', 1],['David Brown', 2]])}()),'message: Your code did not correctly prioritize the incoming items.')",
+        "assert((function(){var test = new PriorityQueue(); DMV.enqueue(['David Brown', 2]);DMV.enqueue(['Jon Snow', 1]); return (test.size()===2)}()),'message: Your code did not correctly add the incoming items.')",
+        "assert((function(){var test = new PriorityQueue(); DMV.enqueue(['David Brown', 2]);DMV.enqueue(['Jon Snow', 1]);DMV.dequeue(); return (test.size()===1)}()),'message: Your code did not correctly dequeue 1 item.')",
+        "assert((function(){var test = new PriorityQueue(); DMV.enqueue(['David Brown', 2]);DMV.enqueue(['Jon Snow', 1]);DMV.dequeue();DMV.dequeue(); return (DMV.isEmpty()===true)}()),'message: Your code is not correctly reporting that the queue is empty.')",
+        "assert((function(){var test = new PriorityQueue(); DMV.enqueue(['David Brown', 1]);DMV.enqueue(['Jon Snow', 1]); return ([...test]===[['David Brown', 2], ['Jon Snow', 1]])}()),'message: Your code did not correctly prioritize the incoming items. If 2 items have the same priority the older item remains infront of new items')"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8255367417b2b2512c75",
+      "title": "How to Create a Circular Queue",
+      "description": [
+        "In this challenge you will be creating a Circular Queue. A circular queue is basically a queue that writes to the end of a collection then begins over writing itself at the beginning of the collection. This is type of data structure has some useful applications in certain situations. For example, a circular buffer can be used in streaming media. Once the queue is full, new media data simply begins to overwrite old data.",
+        "A good way to illustrate this concept is with an array:",
+        "[1, 2, 3, 4, 5]",
+        "^Read @ 0",
+        "^Write @ 0",
+        "Here the read and write are both at position 0. Now the queue gets 3 new records a, b, and c. Our queue now looks like:",
+        "[a, b, c, 4, 5]",
+        "^Read @ 0",
+        "       ^write @ 3",
+        "As the read head reads, it can remove values or keep them:",
+        "[, , , 4, 5]",
+        "    ^Read @ 3",
+        "    ^write @ 3",
+        "Once the write reaches the end of the array it loops back to the beginning:",
+        "[f, , , d, e]",
+        "    ^Read @ 3",
+        "  ^write @ 1",
+        "So as you can see the buffer consumes less memory, this can be useful for processing large data file conversions and prevent a memory leak from slowing down a conversion process.",
+        "Instructions:",
+        "In this challenge you will implement a 5 element circular buffer. Your component will maintain a read pointer and a write pointer. New items can be added singly or as an array of items (Hint, use Array.isArray()). New items will be added to the collection starting at position 0, advancing the write pointer. As the queue is dequeued it will delete the data and advance the read pointer. We will also create methods to return the entire queue and the front of the queue."
+      ],
+      "challengeSeed": [
+        "function CircularQueue () {",
+        "    let collection = [,,,,];//remember length of 5",
+        "    this.printCollection = function(){",
+        "      (console.log(collection));",
+        "      return collection;",
+        "    };",
+        "    // Only change code below this line",
+        "    // Only change code above this line",
+        "  }",
+        "// Test your queue class",
+        "var CircQue = new CircularQueue();",
+        "CircQue.enqueue([1,2,3,4,5,6]);",
+        "CircQue.printCollection();//collection should look like [6,2,3,4,5]",
+        "CircQue.dequeue()",
+        "CircQue.printCollection();//collection should look like [,2,3,4,5]",
+        "CircQue.dequeue()",
+        "CircQue.printCollection();//collection should look like [,,3,4,5]",
+        "CircQue.dequeue()",
+        "CircQue.dequeue()",
+        "CircQue.front()//should return 5",
+        "CircQue.dequeue()",
+        "CircQue.front()//should return Null",
+        "CircQue.dequeue()//should not advance past WriteHead"
+      ],
+      "tests": [
+        "assert((function(){var test = new CircularQueuee(); test.enqueue('a'); test.enqueue('b'); test.enqueue('c'); test.enqueue('d'); test.enqueue('e'); test.enqueue('f');  return (test.printCollection === ['f', 'b', 'c', 'd', 'e'])}()), 'message: Your <code>Queue</code> class should have a <code>enqueue</code> method.');",
+        "assert((function(){var test = new CircularQueuee(); test.enqueue('a'); test.enqueue('b'); test.enqueue('c'); test.enqueue('d'); test.enqueue('e'); test.enqueue('f'); test.dequeue;  return (test.printCollection === ['', 'b', 'c', 'd', 'e'])}()), 'message: Your <code>dequeue</code> method did not remove the first item.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8255367417b2b2512c76",
+      "title": "Directed and Undirected Graphs",
+      "description": [
+        "This challenge starts a series of challenges that will teach graph data structures and some algorithms involving graphs. You may be familiar with graphs with an x- and y-axis found in your math classes. However, here graphs mean a different thing.",
+        "The data structure of graphs are collections of things and the relationships or connections among them. Graphs are also known as networks.",
+        "When talking about graphs, the precise term for \"objects\" are nodes or vertices. Similarly, the precise term for \"connections\" is edges.",
+        "One example of graphs is a social network where the nodes are you and other people, and the edges are whether two people are friends with each other.",
+        "There are two major types of graphs: directed and undirected. Undirected graphs are graphs without any direction on the edges between nodes. Directed graphs, in contrast, are graphs with a direction in its edges.",
+        "An example of an undirected graph could be a social network. The nodes are people and the edges are friendship. An example of a directed network could be the internet and web page links. Here, the nodes are web pages and the directed edges are links to other pages, which might not necessarily point the other way.",
+        "Instructions",
+        "Click \"Run tests\" to go to the next challenge to find out how different ways to represent graphs in JavaScript like the one in the editor."
+      ],
+      "challengeSeed": [
+        "var undirected = {",
+        "  1: [2],",
+        "  2: [1]",
+        "};"
+      ],
+      "tests": [
+        "assert(Object.keys(undirected).length === 2, 'message: <code>undirected</code> should only contain two nodes.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8256367417b2b2512c77",
+      "title": "Adjacency List",
+      "description": [
+        "Graphs can be represented in different ways. Here we describe one way, which is called an adjacency list.",
+        "An adjacency list is essentially a bulleted list where the left side is the node and the right side lists all the other nodes it's connected to. Below is a representation of an adjacency list.",
+        "Node1: Node2, Node3",
+        "Node2: Node1",
+        "Node3: Node1",
+        "Above is an undirected graph because Node1 is connected to Node2 and Node3, and that information is consistent with the connections Node2 and Node3 show. An adjacency list for a directed graph would mean each row of the list shows direction. If the above was directed, then Node2: Node1 would mean there the directed edge is pointing from Node2 towards Node1.",
+        "We can represent the undirected graph above as an adjacency list by putting it within a JavaScript object.",
+        "var undirectedG = {",
+        "  Node1: [\"Node2\", \"Node3\"],",
+        "  Node2: [\"Node1\"],",
+        "  Node3: [\"Node3\"]",
+        "};",
+        "This can also be more simply represented as an array where the nodes just have numbers rather than string labels.",
+        "var undirectedGArr = [",
+        "  [1, 2], # Node1",
+        "  [0],    # Node2",
+        "  [2]     # Node3",
+        "];",
+        "Instructions",
+        "Create a social network as an undirected graph with 4 nodes/people named James, Jill, Jenny, and Jeff. There are edges/relationships between James and Jeff, Jill and Jenny, and Jeff and Jenny."
+      ],
+      "challengeSeed": [
+        "var undirectedAdjList = {",
+        "};"
+      ],
+      "tests": [
+        "assert(Object.keys(undirectedAdjList).length === 4, 'message: <code>undirectedAdjList</code> should only contain four nodes.');",
+        "assert(undirectedAdjList.James.includes(\"Jeff\") && undirectedAdjList.Jeff.includes(\"James\"), 'message: There should be an edge between <code>Jeff</code> and <code>James</code>.');",
+        "assert(undirectedAdjList.Jill.includes(\"Jenny\") && undirectedAdjList.Jill.includes(\"Jenny\"), 'message: There should be an edge between <code>Jill</code> and <code>Jenny</code>.');",
+        "assert(undirectedAdjList.Jeff.includes(\"Jenny\") && undirectedAdjList.Jenny.includes(\"Jeff\"), 'message: There should be an edge between <code>Jeff</code> and <code>Jenny</code>.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8256367417b2b2512c78",
+      "title": "Adjacency Matrix",
+      "description": [
+        "Another way to represent a graph is to put it in an adjacency matrix.",
+        "An adjacency matrix is a two-dimensional (2D) array where each nested array has the same number of elements as the outer array. In other words, it is a matrix or grid of numbers, where the numbers represent the edges. Zeros mean there is no edge or relationship.",
+        "<code>    1 2 3</code>",
+        "<code>   ------</code>",
+        "<code>1 | 0 1 1</code>",
+        "<code>2 | 1 0 0</code>",
+        "<code>3 | 1 0 0</code>",
+        "Above is a very simple, undirected graph where you have three nodes, where the first node is connected to the second and third node. Note: The numbers to the top and left of the matrix are just labels for the nodes.",
+        "Below is a JavaScript implementation of the same thing.",
+        "<code>var adjMat = [</code>",
+        "<code>  [0, 1, 1],</code>",
+        "<code>  [1, 0, 0],</code>",
+        "<code>  [1, 0, 0]</code>",
+        "<code>];</code>",
+        "Unlike an adjacency list, each \"row\" of the matrix has to have the same number of elements as nodes in the graph. Here we have a three by three matrix, which means we have three nodes in our graph.",
+        "A directed graph would look similar. Below is a graph where the first node has an edge pointing toward the second node, and then the second node has an edge pointing to the third node.",
+        "<code>var adjMatDirected = [</code>",
+        "<code>  [0, 1, 0],</code>",
+        "<code>  [0, 0, 1],</code>",
+        "<code>  [0, 0, 0]</code>",
+        "<code>];</code>",
+        "Graphs can also have weights on their edges. So far, we have unweighted edges where just the presence and lack of edge is binary (0 or 1). You can have different weights depending on your application.",
+        "Instructions",
+        "Create an adjacency matrix of an undirected graph with five nodes. This matrix should be in a multi-dimensional array. These five nodes have relationships between the first and fourth node, the first and third node, the third and fifth node, and the fourth and fifth node. All edge weights are one."
+      ],
+      "challengeSeed": [
+        "var adjMatUndirected = [",
+        "];"
+      ],
+      "tests": [
+        "assert((adjMatUndirected.length === 5) && adjMatUndirected.map(function(x) { return x.length === 5 }).reduce(function(a, b) { return a && b }) , 'message: <code>undirectedAdjList</code> should only contain five nodes.');",
+        "assert((adjMatUndirected[0][3] === 1) && (adjMatUndirected[3][0] === 1), 'message: There should be an edge between the first and fourth node.');",
+        "assert((adjMatUndirected[0][2] === 1) && (adjMatUndirected[2][0] === 1), 'message: There should be an edge between the first and third node.');",
+        "assert((adjMatUndirected[2][4] === 1) && (adjMatUndirected[4][2] === 1), 'message: There should be an edge between the third and fifth node.');",
+        "assert((adjMatUndirected[3][4] === 1) && (adjMatUndirected[4][3] === 1), 'message: There should be an edge between the fourth and fifth node.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8256367417b2b2512c79",
+      "title": "Incidence matrix",
+      "description": [
+        "Yet another way to represent a graph is to put it in an incidence matrix.",
+        "An incidence matrix is a two-dimensional (2D) array. Generally speaking, an incidence matrix relates two different classes of objects between its two dimensions. This kind of matrix is similar to an adjacency matrix. However, the rows and columns mean something else here.",
+        "In graphs, we have edges and nodes. These will be our \"two different classes of objects\". This matrix will have the rows be the nodes and columns be the edges. This means that we can have an uneven number of rows and columns.",
+        "Each column will represent a unique edge. Also, each edge connects two nodes. To show that there is an edge between two nodes, you will put a 1 in the two rows of a particular column. Below is a 3 node graph with one edge between node 1 and node 3.",
+        "<code>    1</code>",
+        "<code>   ---</code>",
+        "<code>1 | 1</code>",
+        "<code>2 | 0</code>",
+        "<code>3 | 1</code>",
+        "Here is an example of an incidence matrix with 4 edges and 4 nodes. Remember, the columns are the edges and rows are the nodes themselves.",
+        "<code>    1 2 3 4</code>",
+        "<code>   --------</code>",
+        "<code>1 | 0 1 1 1</code>",
+        "<code>2 | 1 1 0 0</code>",
+        "<code>3 | 1 0 0 1</code>",
+        "<code>4 | 0 0 1 0</code>",
+        "Below is a JavaScript implementation of the same thing.",
+        "<code>var incMat = [</code>",
+        "<code>  [0, 1, 1, 1],</code>",
+        "<code>  [1, 1, 0, 0],</code>",
+        "<code>  [1, 0, 0, 1],</code>",
+        "<code>  [0, 0, 1, 0]</code>",
+        "<code>];</code>",
+        "To make a directed graph, use -1 for an edge leaving a particular node and 1 for an edge entering a node.",
+        "<code>var incMatDirected = [</code>",
+        "<code>  [ 0, -1,  1, -1],</code>",
+        "<code>  [-1,  1,  0,  0],</code>",
+        "<code>  [ 1,  0,  0,  1],</code>",
+        "<code>  [ 0,  0, -1,  0]</code>",
+        "<code>];</code>",
+        "Graphs can also have weights on their edges. So far, we have unweighted edges where just the presence and lack of edge is binary (0 or 1). You can have different weights depending on your application. A different weight is represented as numbers greater than 1.",
+        "Instructions",
+        "Create an incidence matrix of an undirected graph with five nodes and four edges. This matrix should be in a multi-dimensional array.",
+        "These five nodes have relationships following relationships. The first edge is between the first and second node. The second edge is between the second and third node. The third edge is between the third and fifth node. And four edge is between the fourth and second node. All edge weights are one and the edge order matters."
+      ],
+      "challengeSeed": [
+        "var incMatUndirected = [",
+        "];"
+      ],
+      "tests": [
+        "assert((incMatUndirected.length === 5) && incMatUndirected.map(function(x) { return x.length === 4 }).reduce(function(a, b) { return a && b }) , 'message: <code>undirectedAdjList</code> should only contain five nodes.');",
+        "assert((incMatUndirected[0][0] === 1) && (incMatUndirected[1][0] === 1), 'message: There should be a first edge between the first and second node.');",
+        "assert((incMatUndirected[1][1] === 1) && (incMatUndirected[2][1] === 1), 'message: There should be a second edge between the second and third node.');",
+        "assert((incMatUndirected[2][2] === 1) && (incMatUndirected[4][2] === 1), 'message: There should be a third edge between the third and fifth node.');",
+        "assert((incMatUndirected[1][3] === 1) && (incMatUndirected[3][3] === 1), 'message: There should be a fourth edge between the second and fourth node.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8256367417b2b2512c7a",
+      "title": "Find the Minimum and Maximum Value in a Binary Search Tree",
+      "description": [
+        "This series of challenges will introduce the tree data structure. Trees are an important and versatile data structure in computer science. Of course, their name comes from the fact that when visualized they look much like the trees we are familiar with in the natural world. A tree data structure begins with one node, typically referred to as the root, and from here branches out to additional nodes, each of which may have more child nodes, and so on and so forth. The data structure is usually visualized with the root node at the top; you can think of it as a natural tree flipped upside down.",
+        "First, let's describe some common terminology we will encounter with trees. The root node is the top of the tree. Data points in the tree are called nodes. Nodes with branches leading to other nodes are referred to as the parent of the node the branch leads to (the child). Other more complicated familial terms apply as you might expect. A subtree refers to all the descendants of a particular node, branches may be referred to as edges, and leaf nodes are nodes at the end of the tree that have no children. Finally, note that trees are inherently recursive data structures. That is, any children of a node are parents of their own subtree, and so on. The recursive nature of trees is important to understand when designing algorithms for common tree operations.",
+        "To begin, we will discuss a particular type of a tree, the binary tree. In fact, we will actually discuss a particular binary tree, a binary search tree. Let's describe what this means. While the tree data structure can have any number of branches at a single node, a binary tree can only have two branches for every node. Furthermore, a binary search tree is ordered with respective to the child subtrees, such that each left subtree is less than or equal to the parent node, and each right subtree is greater than or equal to the parent node. Binary search trees are very common and useful data structures because they provide logarithmic time in the average case for several common operations such as lookup, insertion, and deletion.",
+        "Instructions: We'll start simple. We've defined the skeleton of a binary search tree structure here in addition to a function to create nodes for our tree. Observe that each node may have a left and right value. These will be assigned child subtrees if they exist. In our binary search tree, define two methods,",
+        "findMin and findMax. These methods should return the minimum and maximum value held in the binary search tree. If you get stuck, reflect on the invariant that must be true for binary search trees: each left subtree is less than or equal to its parent and each right subtree is greater than or equal to",
+        "its parent. Let's also say that our tree can only store integer values. If the tree is empty, either method should return null."
+      ],
+      "challengeSeed": [
+        "const displayTree = (tree) => console.log(JSON.stringify(tree, null, 2));",
+        "function Node(value) {",
+        "    this.value = value;",
+        "    this.left = null;",
+        "    this.right = null;",
+        "};",
+        "function BinarySearchTree() {",
+        "    this.root = null;",
+        "    // change code below this line",
+        "    // change code above this line",
+        "};"
+      ],
+      "tests": [
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() }; return (typeof test == 'object')})(), 'The BinarySearchTree data structure exists.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; return (typeof test.findMin == 'function')})(), 'The binary search tree has a method called findMin.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; return (typeof test.findMax == 'function')})(), 'The binary search tree has a method called findMax.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.findMin !== 'function') { return false; }; test.add(4); test.add(1); test.add(7); test.add(87); test.add(34); test.add(45); test.add(73); test.add(8); return test.findMin() == 1; })(), 'The findMin method returns the minimum value in the binary search tree.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.findMax !== 'function') { return false; }; test.add(4); test.add(1); test.add(7); test.add(87); test.add(34); test.add(45); test.add(73); test.add(8); return test.findMax() == 87; })(), 'The findMax method returns the maximum value in the binary search tree.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.findMin !== 'function') { return false; }; if (typeof test.findMax !== 'function') { return false; }; return (test.findMin() == null && test.findMax() == null) })(), 'The findMin and findMax methods return null for an empty tree.');"
+      ],
+      "tail": [
+        "BinarySearchTree.prototype = {",
+        "    add: function(value) {",
+        "        let node = this.root;",
+        "        if (node == null) {",
+        "          this.root = new Node(value);",
+        "          return;",
+        "        } else {",
+        "            function searchTree(node) {",
+        "                if (value < node.value) {",
+        "                    if (node.left == null) {",
+        "                        node.left = new Node(value);",
+        "                        return;",
+        "                    } else if (node.left != null) {",
+        "                        return searchTree(node.left)",
+        "                    };",
+        "                } else if (value > node.value) {",
+        "                    if (node.right == null) {",
+        "                        node.right = new Node(value);",
+        "                        return;",
+        "                    } else if (node.right != null) {",
+        "                        return searchTree(node.right);",
+        "                    };",
+        "                } else {",
+        "                    return null;",
+        "                };",
+        "            };",
+        "            return searchTree(node);",
+        "        };",
+        "    }",
+        "};"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8257367417b2b2512c7b",
+      "title": "Add a New Element to a Binary Search Tree",
+      "description": [
+        "Now that we have an idea of the basics lets write a more complex method.",
+        "In this challenge, we will create a method to add new values to our binary search tree. The method should be called add and it should accept an integer value to add to the tree. Take care to maintain the invariant of a binary search tree: the value in each left child should be less than or equal to the parent value, and the value in each right child should be greater than or equal to the parent value. Here, let's make it so our tree cannot hold duplicate values. If we try to add a value that already exists, the method should return null. Otherwise, if the addition is successful, undefined should be returned.",
+        "Hint: trees are naturally recursive data structures!"
+      ],
+      "challengeSeed": [
+        "const displayTree = (tree) => console.log(JSON.stringify(tree, null, 2));",
+        "function Node(value) {",
+        "    this.value = value;",
+        "    this.left = null;",
+        "    this.right = null;",
+        "};",
+        "function BinarySearchTree() {",
+        "    this.root = null;",
+        "    // change code below this line",
+        "    // change code above this line",
+        "};"
+      ],
+      "tail": [
+        "BinarySearchTree.prototype = {",
+        "    isBinarySearchTree() {",
+        "        if (this.root == null) {",
+        "            return null;",
+        "        } else {",
+        "            let check = true;",
+        "            function checkTree(node) {",
+        "                if (node.left != null) {",
+        "                    let left = node.left;",
+        "                    if (left.value > node.value) {",
+        "                        check = false;",
+        "                    } else {",
+        "                        checkTree(left);",
+        "                    }",
+        "                }",
+        "                if (node.right != null) {",
+        "                    let right = node.right;",
+        "                    if (right.value < node.value) {",
+        "                        check = false;",
+        "                    } else {",
+        "                        checkTree(right);",
+        "                    };",
+        "                };",
+        "            };",
+        "            checkTree(this.root);",
+        "            return check;",
+        "        };",
+        "    }",
+        "};"
+      ],
+      "tests": [
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() }; return (typeof test == 'object')})(), 'The BinarySearchTree data structure exists.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; return (typeof test.add == 'function')})(), 'The binary search tree has a method called add.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.add !== 'function') { return false; }; test.add(4); test.add(1); test.add(7); test.add(87); test.add(34); test.add(45); test.add(73); test.add(8); return (test.isBinarySearchTree()); })(), 'The add method adds elements according to the binary search tree rules.')",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.add !== 'function') { return false; }; test.add(4); return test.add(4) == null; })(), 'Adding an element that already exists returns null');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8257367417b2b2512c7c",
+      "title": "Check if an Element is Present in a Binary Search Tree",
+      "description": [
+        "Now that we have a general sense of what a binary search tree is let's talk about it in a little more detail. Binary search trees provide logarithmic time for the common operations of lookup, insertion, and deletion in the average case, and linear time in the worst case. Why is this? Each of those basic operations requires us to find an item in the tree (or in the case of insertion to find where it should go) and because of the tree structure at each parent node we are branching left or right and effectively excluding half the size of the remaining tree. This makes the search proportional to the logarithm of the number of nodes in the tree, which creates logarithmic time for these operations in the average case.",
+        "Ok, but what about the worst case? Well, consider constructing a tree from the following values, adding them left to right: 10, 12, 17, 25. Following our rules for a binary search tree, we will add 12 to the right of 10, 17 to the right of this, and 25 to the right of this. Now our tree resembles a linked list and traversing it to find 25 would require us to traverse all the items in linear fashion. Hence, linear time in the worst case. The problem here is that the tree is unbalanced. We'll look a little more into what this means in the following challenges.",
+        "Instructions: In this challenge, we will create a utility for our tree. Write a method isPresent which takes an integer value as input and returns a boolean value for the presence or absence of that value in the binary search tree."
+      ],
+      "challengeSeed": [
+        "const displayTree = (tree) => console.log(JSON.stringify(tree, null, 2));",
+        "function Node(value) {",
+        "    this.value = value;",
+        "    this.left = null;",
+        "    this.right = null;",
+        "};",
+        "function BinarySearchTree() {    ",
+        "    this.root = null;",
+        "    // change code below this line",
+        "    // change code above this line",
+        "};"
+      ],
+      "tail": [
+        "BinarySearchTree.prototype = {",
+        "    add: function(value) {",
+        "        let node = this.root;",
+        "        if (node == null) {",
+        "          this.root = new Node(value);",
+        "          return;",
+        "        } else {",
+        "            function searchTree(node) {",
+        "                if (value < node.value) {",
+        "                    if (node.left == null) {",
+        "                        node.left = new Node(value);",
+        "                        return;",
+        "                    } else if (node.left != null) {",
+        "                        return searchTree(node.left)",
+        "                    };",
+        "                } else if (value > node.value) {",
+        "                    if (node.right == null) {",
+        "                        node.right = new Node(value);",
+        "                        return;",
+        "                    } else if (node.right != null) {",
+        "                        return searchTree(node.right);",
+        "                    };",
+        "                } else {",
+        "                    return null;",
+        "                };",
+        "            };",
+        "            return searchTree(node);",
+        "        };",
+        "    }",
+        "};"
+      ],
+      "tests": [
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() }; return (typeof test == 'object')})(), 'The BinarySearchTree data structure exists.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; return (typeof test.isPresent == 'function')})(), 'The binary search tree has a method called isPresent.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.isPresent !== 'function') { return false; }; test.add(4); test.add(7); test.add(411); test.add(452); return ( test.isPresent(452) && test.isPresent(411) && test.isPresent(7) && !test.isPresent(100) ); })(), 'The isPresent method correctly checks for the presence of absence of elements added to the tree.')",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.isPresent !== 'function') { return false; }; return test.isPresent(5) == false; })(), 'isPresent handles cases where the tree is empty.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8257367417b2b2512c7d",
+      "title": "Find the Minimum and Maximum Height of a Binary Search Tree",
+      "description": [
+        "In the last challenge we described a scenario in which a tree could become unbalanced. To understand the concept of balance, let's take a look at another tree property: height. Height in a tree represents the distance from the root node to any given leaf node. Different paths in a highly branched tree structure may have different heights, but for a given tree there will be a minimum and maximum height. If the tree is balanced, these values will differ at most by one. This means that in a balanced tree, all the leaf nodes exist within the same level, or if they are not within the same level they are at most one level apart.",
+        "The property of balance is important for trees because it is what determines the efficiency of tree operations. As we explained in the last challenge, we face worst case time complexity for heavily unbalanced trees. Self-balancing trees are commonly used to account for this issue in trees with dynamic data sets. Common examples of these include AVL trees, red-black trees, and B-trees. These trees all contain additional internal logic which re-balance the tree when insertions or deletions create a state of imbalance.",
+        "Note: A similar property to height is depth, which refers to how far a given node is from the root node.",
+        "Instructions: Write two methods for our binary tree: findMinHeight and findMaxHeight. These methods should return an integer value for the minimum and maximum height within a given binary tree, respectively. If the node is empty let's assign it a height of -1 (that's the base case). Finally, add a third method isBalanced which returns a true or false depending on whether the tree is balanced or not. You can use the first two methods you just wrote to determine this."
+      ],
+      "challengeSeed": [
+        "const displayTree = (tree) => console.log(JSON.stringify(tree, null, 2));",
+        "function Node(value) {",
+        "    this.value = value;",
+        "    this.left = null;",
+        "    this.right = null;",
+        "};",
+        "function BinarySearchTree() {",
+        "    this.root = null;",
+        "    // change code below this line",
+        "    // change code above this line",
+        "};"
+      ],
+      "tail": [
+        "BinarySearchTree.prototype = {",
+        "    add: function(value) {",
+        "        let node = this.root;",
+        "        if (node == null) {",
+        "          this.root = new Node(value);",
+        "          return;",
+        "        } else {",
+        "            function searchTree(node) {",
+        "                if (value < node.value) {",
+        "                    if (node.left == null) {",
+        "                        node.left = new Node(value);",
+        "                        return;",
+        "                    } else if (node.left != null) {",
+        "                        return searchTree(node.left)",
+        "                    };",
+        "                } else if (value > node.value) {",
+        "                    if (node.right == null) {",
+        "                        node.right = new Node(value);",
+        "                        return;",
+        "                    } else if (node.right != null) {",
+        "                        return searchTree(node.right);",
+        "                    };",
+        "                } else {",
+        "                    return null;",
+        "                };",
+        "            };",
+        "            return searchTree(node);",
+        "        };",
+        "    }",
+        "};"
+      ],
+      "tests": [
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() }; return (typeof test == 'object')})(), 'The BinarySearchTree data structure exists.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; return (typeof test.findMinHeight == 'function')})(), 'The binary search tree has a method called findMinHeight.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; return (typeof test.findMaxHeight == 'function')})(), 'The binary search tree has a method called findMaxHeight.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; return (typeof test.isBalanced == 'function')})(), 'The binary search tree has a method called isBalanced.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.findMinHeight !== 'function') { return false; }; test.add(4); test.add(1); test.add(7); test.add(87); test.add(34); test.add(45); test.add(73); test.add(8); return (test.findMinHeight() == 1); })(), 'The findMinHeight method returns the minimum height of the tree.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.findMaxHeight !== 'function') { return false; }; test.add(4); test.add(1); test.add(7); test.add(87); test.add(34); test.add(45); test.add(73); test.add(8); return (test.findMaxHeight() == 5); })(), 'The findMaxHeight method returns the maximum height of the tree.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.findMaxHeight !== 'function') { return false; }; return (test.findMaxHeight() == -1); })(), 'An empty tree returns a height of -1.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.isBalanced !== 'function') { return false; }; test.add(4); test.add(1); test.add(7); test.add(87); test.add(34); test.add(45); test.add(73); test.add(8); return test.isBalanced(); })(), 'The isBalanced method returns true if the tree is a balanced binary search tree.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8257367417b2b2512c7e",
+      "title": "Use Depth First Search in a Binary Search Tree",
+      "description": [
+        "We know how to search a binary search tree for a specific value. But what if we just want to explore the entire tree? Or what if we don't have an ordered tree and we need to just search for a value? Here we will introduce some tree traversal methods which can be used to explore tree data structures. First up is depth-first search. In depth-first search, a given subtree is explored as deeply as possible before the search continues on to another subtree. There are three ways this can be done:",
+        "In-order: Begin the search at the left-most node and end at the right-most node.",
+        "Pre-order: Explore all the roots before the leaves.",
+        "Post-order: Explore all the leaves before the roots.",
+        "As you may guess, you may choose different search methods depending on what type of data your tree is storing and what you are looking for. For a binary search tree, an inorder traversal returns the nodes in sorted order.",
+        "Instructions: Here we will create these three search methods on our binary search tree. Depth-first search is an inherently recursive operation which continues to explore further subtrees so long as child nodes are present. Once you understand this basic concept, you can simply rearrange the order in which you explore the nodes and subtrees to produce any of the three searches above. For example, in post-order search we would want to recurse all the way to a leaf node before we begin to return any of the nodes themselves, whereas in pre-order search we would want to return the nodes first, and then continue recursing down the tree.",
+        "Define inorder, preorder, and postorder methods on our tree. Each of these methods should return an array of items which represent the tree traversal. Be sure to return the integer values at each node in the array, not the nodes themselves. Finally, return null if the tree is empty."
+      ],
+      "challengeSeed": [
+        "const displayTree = (tree) => console.log(JSON.stringify(tree, null, 2));",
+        "function Node(value) {",
+        "    this.value = value;",
+        "    this.left = null;",
+        "    this.right = null;",
+        "};",
+        "function BinarySearchTree() {",
+        "    this.root = null;",
+        "    // change code below this line",
+        "    // change code above this line",
+        "};"
+      ],
+      "tail": [
+        "BinarySearchTree.prototype = {",
+        "    add: function(value) {",
+        "        let node = this.root;",
+        "        if (node == null) {",
+        "          this.root = new Node(value);",
+        "          return;",
+        "        } else {",
+        "            function searchTree(node) {",
+        "                if (value < node.value) {",
+        "                    if (node.left == null) {",
+        "                        node.left = new Node(value);",
+        "                        return;",
+        "                    } else if (node.left != null) {",
+        "                        return searchTree(node.left)",
+        "                    };",
+        "                } else if (value > node.value) {",
+        "                    if (node.right == null) {",
+        "                        node.right = new Node(value);",
+        "                        return;",
+        "                    } else if (node.right != null) {",
+        "                        return searchTree(node.right);",
+        "                    };",
+        "                } else {",
+        "                    return null;",
+        "                };",
+        "            };",
+        "            return searchTree(node);",
+        "        };",
+        "    }",
+        "};"
+      ],
+      "tests": [
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() }; return (typeof test == 'object')})(), 'The BinarySearchTree data structure exists.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; return (typeof test.inorder == 'function')})(), 'The binary search tree has a method called inorder.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; return (typeof test.preorder == 'function')})(), 'The binary search tree has a method called preorder.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; return (typeof test.postorder == 'function')})(), 'The binary search tree has a method called postorder.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.inorder !== 'function') { return false; }; test.add(7); test.add(1); test.add(9); test.add(0); test.add(3); test.add(8); test.add(10); test.add(2); test.add(5); test.add(4); test.add(6); return (test.inorder().join('') == '012345678910'); })(), 'The inorder method returns an array of the node values that result from an inorder traversal.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.preorder !== 'function') { return false; }; test.add(7); test.add(1); test.add(9); test.add(0); test.add(3); test.add(8); test.add(10); test.add(2); test.add(5); test.add(4); test.add(6); return (test.preorder().join('') == '710325469810'); })(), 'The preorder method returns an array of the node values that result from a preorder traversal.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.postorder !== 'function') { return false; }; test.add(7); test.add(1); test.add(9); test.add(0); test.add(3); test.add(8); test.add(10); test.add(2); test.add(5); test.add(4); test.add(6); return (test.postorder().join('') == '024653181097'); })(), 'The postorder method returns an array of the node values that result from a postorder traversal.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.inorder !== 'function') { return false; }; return (test.inorder() == null); })(), 'The inorder method returns null for an empty tree.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.preorder !== 'function') { return false; }; return (test.preorder() == null); })(), 'The preorder method returns null for an empty tree.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.postorder !== 'function') { return false; }; return (test.postorder() == null); })(), 'The postorder method returns null for an empty tree.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8258367417b2b2512c7f",
+      "title": "Use Breadth First Search in a Binary Search Tree",
+      "description": [
+        "Here we will introduce another tree traversal method: breadth-first search. In contrast to the depth-first search methods from the last challenge, breadth-first search explores all the nodes in a given level within a tree before continuing on to the next level. Typically, queues are utilized as helper data structures in the design of breadth-first search algorithms.",
+        "In this method, we start by adding the root node to a queue. Then we begin a loop where we dequeue the first item in the queue, add it to a new array, and then inspect both its child subtrees. If it's children are not null, they are each enqueued. This process continues until the queue is empty.",
+        "Instructions: Let's create a breadth-first search method in our tree called levelOrder. This method should return an array containing the values of all the tree nodes, explored in a breadth-first manner. Be sure to return the values in the array, not the nodes themselves. A level should be",
+        "traversed from left to right. Next, let's write a similar method called reverseLevelOrder which performs the same search but in the reverse direction (right to left) at each level."
+      ],
+      "challengeSeed": [
+        "const displayTree = (tree) => console.log(JSON.stringify(tree, null, 2));",
+        "function Node(value) {",
+        "    this.value = value;",
+        "    this.left = null;",
+        "    this.right = null;",
+        "};",
+        "function BinarySearchTree() {",
+        "    this.root = null;",
+        "    // change code below this line",
+        "    // change code above this line",
+        "};"
+      ],
+      "tail": [
+        "BinarySearchTree.prototype = {",
+        "    add: function(value) {",
+        "        let node = this.root;",
+        "        if (node == null) {",
+        "          this.root = new Node(value);",
+        "          return;",
+        "        } else {",
+        "            function searchTree(node) {",
+        "                if (value < node.value) {",
+        "                    if (node.left == null) {",
+        "                        node.left = new Node(value);",
+        "                        return;",
+        "                    } else if (node.left != null) {",
+        "                        return searchTree(node.left)",
+        "                    };",
+        "                } else if (value > node.value) {",
+        "                    if (node.right == null) {",
+        "                        node.right = new Node(value);",
+        "                        return;",
+        "                    } else if (node.right != null) {",
+        "                        return searchTree(node.right);",
+        "                    };",
+        "                } else {",
+        "                    return null;",
+        "                };",
+        "            };",
+        "            return searchTree(node);",
+        "        };",
+        "    }",
+        "};"
+      ],
+      "tests": [
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() }; return (typeof test == 'object')})(), 'The BinarySearchTree data structure exists.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; return (typeof test.levelOrder == 'function')})(), 'The binary search tree has a method called levelOrder.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; return (typeof test.reverseLevelOrder == 'function')})(), 'The binary search tree has a method called reverseLevelOrder.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.levelOrder !== 'function') { return false; }; test.add(7); test.add(1); test.add(9); test.add(0); test.add(3); test.add(8); test.add(10); test.add(2); test.add(5); test.add(4); test.add(6); return (test.levelOrder().join('') == '719038102546'); })(), 'The levelOrder method returns an array of the tree node values explored in level order.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.reverseLevelOrder !== 'function') { return false; }; test.add(7); test.add(1); test.add(9); test.add(0); test.add(3); test.add(8); test.add(10); test.add(2); test.add(5); test.add(4); test.add(6); return (test.reverseLevelOrder().join('') == '791108305264'); })(), 'The reverseLevelOrder method returns an array of the tree node values explored in reverse level order.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.levelOrder !== 'function') { return false; }; return (test.levelOrder() == null); })(), 'The levelOrder method returns null for an empty tree.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.reverseLevelOrder !== 'function') { return false; }; return (test.reverseLevelOrder() == null); })(), 'The reverseLevelOrder method returns null for an empty tree.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8258367417b2b2512c80",
+      "title": "Delete a Leaf Node in a Binary Search Tree",
+      "description": [
+        "This is the first of three challenges where we will implement a more difficult operation in binary search trees: deletion. Deletion is difficult because removing nodes breaks links in the tree. These links must be carefully reestablished to ensure the binary tree structure is maintained. For some deletions, this means the tree must be rearranged. In general, you will encounter one of three cases when trying to delete a node:",
+        "Leaf Node: The target to delete has zero children.",
+        "One Child: The target to delete only has one child.",
+        "Two Children: The target to delete has two child nodes.",
+        "Removing a leaf node is easy, we simply remove it. Deleting a node with one child is also relatively easy, we simply remove it and link its parent to child of the node we deleted. Removing a node with two children is more difficult, however, because this creates two child nodes that need to be reconnected to the parent tree. We'll see how to deal with this case in the third challenge. Additionally, you need to be mindful of some edge cases when handling deletion. What if the tree is empty? What if the node to delete is the root node? What if there are only two elements in the tree? For now, let's handle the first case where we delete a leaf node.",
+        "Instructions: Create a method on our binary tree called remove. We'll build the logic for our deletion operation in here. First, you'll want to create a function within remove that finds the node we are trying to delete in the current tree. If the node is not present in the tree, remove should return null. Now, if the target node is a leaf node with no children, then the parent reference to it should be set to null. This effectively deletes the node from the tree. To do this, you will have to keep track of",
+        "the parent of the node we are trying to delete as well. It will also be useful to create a way to track the number of children the target node has, as this will determine which case our deletion falls under.",
+        "We will handle the second and third cases in the next challenges. Good luck!"
+      ],
+      "challengeSeed": [
+        "const displayTree = (tree) => console.log(JSON.stringify(tree, null, 2));",
+        "function Node(value) {",
+        "    this.value = value;",
+        "    this.left = null;",
+        "    this.right = null;",
+        "};",
+        "// SEED CODE --------------------------------",
+        "function BinarySearchTree() {",
+        "    this.root = null;",
+        "    // case 1: target has no children, change code below this line",
+        "};"
+      ],
+      "tests": [
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() }; return (typeof test == 'object')})(), 'The BinarySearchTree data structure exists.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; return (typeof test.remove == 'function')})(), 'The binary search tree has a method called remove.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.remove !== 'function') { return false; }; return (test.remove(100) == null); })(), 'Trying to remove an element that doesn\\'t exist returns null.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.remove !== 'function') { return false; }; test.add(500); test.remove(500); return (test.inorder() == null); })(), 'If the root node has no children, deleting it sets the root to null.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.remove !== 'function') { return false; }; test.add(5); test.add(3); test.add(7); test.add(6); test.add(10); test.add(12); test.remove(3); test.remove(12); test.remove(10); return (test.inorder().join('') == '567'); })(), 'The remove method removes leaf nodes from the tree');"
+      ],
+      "tail": [
+        "BinarySearchTree.prototype = {",
+        "    add: function(value) {",
+        "        let node = this.root;",
+        "        if (node == null) {",
+        "          this.root = new Node(value);",
+        "          return;",
+        "        } else {",
+        "            function searchTree(node) {",
+        "                if (value < node.value) {",
+        "                    if (node.left == null) {",
+        "                        node.left = new Node(value);",
+        "                        return;",
+        "                    } else if (node.left != null) {",
+        "                        return searchTree(node.left)",
+        "                    };",
+        "                } else if (value > node.value) {",
+        "                    if (node.right == null) {",
+        "                        node.right = new Node(value);",
+        "                        return;",
+        "                    } else if (node.right != null) {",
+        "                        return searchTree(node.right);",
+        "                    };",
+        "                } else {",
+        "                    return null;",
+        "                };",
+        "            };",
+        "            return searchTree(node);",
+        "        };",
+        "    },",
+        "    inorder: function() {",
+        "        if (this.root == null) {",
+        "          return null;",
+        "        } else {",
+        "          var result = new Array();",
+        "          function traverseInOrder(node) {",
+        "              if (node.left != null) {",
+        "                  traverseInOrder(node.left);",
+        "              };",
+        "              result.push(node.value);",
+        "              if (node.right != null) {",
+        "                  traverseInOrder(node.right);",
+        "              };",
+        "          }",
+        "          traverseInOrder(this.root);",
+        "          return result;",
+        "        };",
+        "    },    ",
+        "    isBinarySearchTree() {",
+        "        if (this.root == null) {",
+        "            return null;",
+        "        } else {",
+        "            let check = true;",
+        "            function checkTree(node) {",
+        "                if (node.left != null) {",
+        "                    let left = node.left;",
+        "                    if (left.value > node.value) {",
+        "                        check = false;",
+        "                    } else {",
+        "                        checkTree(left);",
+        "                    }",
+        "                }",
+        "                if (node.right != null) {",
+        "                    let right = node.right;",
+        "                    if (right.value < node.value) {",
+        "                        check = false;",
+        "                    } else {",
+        "                        checkTree(right);",
+        "                    };",
+        "                };",
+        "            };",
+        "            checkTree(this.root);",
+        "            return check;",
+        "        }",
+        "    }",
+        "};"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8258367417b2b2512c81",
+      "title": "Delete a Node with One Child in a Binary Search Tree",
+      "description": [
+        "Now that we can delete leaf nodes let's move on to the second case: deleting a node with one child. For this case, say we have a tree with the following nodes 1 — 2 — 3 where 1 is the root. To delete 2, we simply need to make the right reference in 1 point to 3. More generally,",
+        "to delete a node with only one child, we make that node's parent reference the next node in the tree.",
+        "Instructions: We've provided some code in our remove method that accomplishes the tasks from the last challenge. We find the target to delete and its parent and define the number of children",
+        "the target node has. Let's add the next case here for target nodes with only one child. Here, we'll have to determine if the single child is a left or right branch in the tree and then set the correct reference in the parent to point to this node. In addition, let's account for the case where the target is the root node (this means the parent node will be null). Feel free to replace all the starter code with your own as long as it passes the tests."
+      ],
+      "challengeSeed": [
+        "const displayTree = (tree) => console.log(JSON.stringify(tree, null, 2));",
+        "function Node(value) {",
+        "    this.value = value;",
+        "    this.left = null;",
+        "    this.right = null;",
+        "};",
+        "// SEED CODE --------------------------------",
+        "function BinarySearchTree() {",
+        "    this.root = null;",
+        "    this.remove = function(value) {",
+        "        if (this.root == null) {",
+        "            return null;",
+        "        };",
+        "        let target;",
+        "        let parent = null;",
+        "        // find the target value and its parent",
+        "        (function findValue(node = this.root) {",
+        "            if (value == node.value) {",
+        "                target = node;",
+        "            } else if (value < node.value && node.left != null) {",
+        "                parent = node;",
+        "                return findValue(node.left);",
+        "            } else if (value < node.value && node.left == null) {",
+        "                return null;",
+        "            } else if (value > node.value && node.right != null) {",
+        "                parent = node;",
+        "                return findValue(node.right);",
+        "            } else {",
+        "                return null;",
+        "            };",
+        "        }).bind(this)();",
+        "        if (target == null) {",
+        "            return null;",
+        "        }",
+        "        // count the children of the target to delete",
+        "        let children = (target.left != null ? 1 : 0) + (target.right != null ? 1 : 0);",
+        "        // case 1: target has no children",
+        "        if (children == 0) {",
+        "            if (target == this.root) {",
+        "                this.root = null;",
+        "            }",
+        "            else {",
+        "                if (parent.left == target) {",
+        "                    parent.left = null;",
+        "                } else {",
+        "                    parent.right = null;",
+        "                };",
+        "            };",
+        "        }",
+        "        // case 2: target has one child, change code below this line",
+        "};"
+      ],
+      "tests": [
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() }; return (typeof test == 'object')})(), 'The BinarySearchTree data structure exists.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; return (typeof test.remove == 'function')})(), 'The binary search tree has a method called remove.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.remove !== 'function') { return false; }; return (test.remove(100) == null); })(), 'Trying to remove an element that doesn\\'t exist returns null.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.remove !== 'function') { return false; }; test.add(500); test.remove(500); return (test.inorder() == null); })(), 'If the root node has no children, deleting it sets the root to null.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.remove !== 'function') { return false; }; test.add(5); test.add(3); test.add(7); test.add(6); test.add(10); test.add(12); test.remove(3); test.remove(12); test.remove(10); return (test.inorder().join('') == '567'); })(), 'The remove method removes leaf nodes from the tree');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.remove !== 'function') { return false; }; test.add(-1); test.add(3); test.add(7); test.add(16); test.remove(16); test.remove(7); test.remove(3); return (test.inorder().join('') == '-1'); })(), 'The remove method removes nodes with one child.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.remove !== 'function') { return false; }; test.add(15); test.add(27); test.remove(15); return (test.inorder().join('') == '27'); })(), 'Removing the root in a tree with two nodes sets the second to be the root.');"
+      ],
+      "tail": [
+        "BinarySearchTree.prototype = {",
+        "    add: function(value) {",
+        "        let node = this.root;",
+        "        if (node == null) {",
+        "          this.root = new Node(value);",
+        "          return;",
+        "        } else {",
+        "            function searchTree(node) {",
+        "                if (value < node.value) {",
+        "                    if (node.left == null) {",
+        "                        node.left = new Node(value);",
+        "                        return;",
+        "                    } else if (node.left != null) {",
+        "                        return searchTree(node.left)",
+        "                    };",
+        "                } else if (value > node.value) {",
+        "                    if (node.right == null) {",
+        "                        node.right = new Node(value);",
+        "                        return;",
+        "                    } else if (node.right != null) {",
+        "                        return searchTree(node.right);",
+        "                    };",
+        "                } else {",
+        "                    return null;",
+        "                };",
+        "            };",
+        "            return searchTree(node);",
+        "        };",
+        "    },",
+        "    inorder: function() {",
+        "        if (this.root == null) {",
+        "          return null;",
+        "        } else {",
+        "          var result = new Array();",
+        "          function traverseInOrder(node) {",
+        "              if (node.left != null) {",
+        "                  traverseInOrder(node.left);",
+        "              };",
+        "              result.push(node.value);",
+        "              if (node.right != null) {",
+        "                  traverseInOrder(node.right);",
+        "              };",
+        "          }",
+        "          traverseInOrder(this.root);",
+        "          return result;",
+        "        };",
+        "    },    ",
+        "    isBinarySearchTree() {",
+        "        if (this.root == null) {",
+        "            return null;",
+        "        } else {",
+        "            let check = true;",
+        "            function checkTree(node) {",
+        "                if (node.left != null) {",
+        "                    let left = node.left;",
+        "                    if (left.value > node.value) {",
+        "                        check = false;",
+        "                    } else {",
+        "                        checkTree(left);",
+        "                    }",
+        "                }",
+        "                if (node.right != null) {",
+        "                    let right = node.right;",
+        "                    if (right.value < node.value) {",
+        "                        check = false;",
+        "                    } else {",
+        "                        checkTree(right);",
+        "                    };",
+        "                };",
+        "            };",
+        "            checkTree(this.root);",
+        "            return check;",
+        "        }",
+        "    }",
+        "};"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8258367417b2b2512c82",
+      "title": "Delete a Node with Two Children in a Binary Search Tree",
+      "description": [
+        "Removing nodes that have two children is the hardest case to implement. Removing a node like this produces two subtrees that are no longer connected to the original tree structure. How can we reconnect them? One method is to find the smallest value in the right subtree of the target node and replace the target node with this value. Selecting the replacement in this way ensures that it is greater than every node in the left subtree it becomes the new parent of but also less than every node in the right subtree it becomes the new parent of.",
+        "Once this replacement is made the replacement node must be removed from the right subtree. Even this operation is tricky because the replacement may be a leaf or it may itself be the parent of a right subtree. If it is a leaf we must remove its parent's reference to it. Otherwise, it must be the right child of the target. In this case, we must replace the target value with the replacement value and make the target reference the replacement's right child.",
+        "Instructions: Let's finish our remove method by handling the third case. We've provided some code again for the first two cases. Add some code now to handle target nodes with two children. Any edge cases to be aware of? What if the tree has only three nodes? Once you are finished this will complete our deletion operation for binary search trees. Nice job, this is a pretty hard problem!"
+      ],
+      "challengeSeed": [
+        "const displayTree = (tree) => console.log(JSON.stringify(tree, null, 2));",
+        "function Node(value) {",
+        "    this.value = value;",
+        "    this.left = null;",
+        "    this.right = null;",
+        "};",
+        "// SEED CODE --------------------------------",
+        "function BinarySearchTree() {",
+        "    this.root = null;",
+        "    this.remove = function(value) {",
+        "        if (this.root == null) {",
+        "            return null;",
+        "        };",
+        "        let target;",
+        "        let parent = null;",
+        "        // find the target value and its parent",
+        "        (function findValue(node = this.root) {",
+        "            if (value == node.value) {",
+        "                target = node;",
+        "            } else if (value < node.value && node.left != null) {",
+        "                parent = node;",
+        "                return findValue(node.left);",
+        "            } else if (value < node.value && node.left == null) {",
+        "                return null;",
+        "            } else if (value > node.value && node.right != null) {",
+        "                parent = node;",
+        "                return findValue(node.right);",
+        "            } else {",
+        "                return null;",
+        "            };",
+        "        }).bind(this)();",
+        "        if (target == null) {",
+        "            return null;",
+        "        }",
+        "        // count the children of the target to delete",
+        "        let children = (target.left != null ? 1 : 0) + (target.right != null ? 1 : 0);",
+        "        // case 1: target has no children",
+        "        if (children == 0) {",
+        "            if (target == this.root) {",
+        "                this.root = null;",
+        "            }",
+        "            else {",
+        "                if (parent.left == target) {",
+        "                    parent.left = null;",
+        "                } else {",
+        "                    parent.right = null;",
+        "                };",
+        "            };",
+        "        }",
+        "        // case 2: target has one child",
+        "        else if (children == 1) {",
+        "            let newChild = (target.left != null) ? target.left : target.right;",
+        "            if (parent == null) {",
+        "                target.value = newChild.value;",
+        "                target.left = null;",
+        "                target.right = null;",
+        "            } else if (newChild.value < parent.value) {",
+        "                parent.left = newChild;",
+        "            } else {",
+        "                parent.right = newChild;",
+        "            }",
+        "            target = null;",
+        "        }",
+        "        // case 3: target has two children, change code below this line",
+        "    };",
+        "};"
+      ],
+      "tests": [
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() }; return (typeof test == 'object')})(), 'The BinarySearchTree data structure exists.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; return (typeof test.remove == 'function')})(), 'The binary search tree has a method called remove.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; return (typeof test.remove == 'function') ? (test.remove(100) == null) : false})(), 'Trying to remove an element that doesn\\'t exist returns null.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; test.add(500); test.remove(500); return (typeof test.remove == 'function') ? (test.inorder() == null) : false})(), 'If the root node has no children, deleting it sets the root to null.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; test.add(5); test.add(3); test.add(7); test.add(6); test.add(10); test.add(12); test.remove(3); test.remove(12); test.remove(10); return (typeof test.remove == 'function') ? (test.inorder().join('') == '567') : false})(), 'The remove method removes leaf nodes from the tree');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.remove !== 'function') { return false; }; test.add(-1); test.add(3); test.add(7); test.add(16); test.remove(16); test.remove(7); test.remove(3); return (test.inorder().join('') == '-1'); })(), 'The remove method removes nodes with one child.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.remove !== 'function') { return false; }; test.add(15); test.add(27); test.remove(15); return (test.inorder().join('') == '27'); })(), 'Removing the root in a tree with two nodes sets the second to be the root.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.remove !== 'function') { return false; }; test.add(1); test.add(4); test.add(3); test.add(7); test.add(9); test.add(11); test.add(14); test.add(15); test.add(19); test.add(50); test.remove(9); if (!test.isBinarySearchTree()) { return false; }; test.remove(11); if (!test.isBinarySearchTree()) { return false; }; test.remove(14); if (!test.isBinarySearchTree()) { return false; }; test.remove(19); if (!test.isBinarySearchTree()) { return false; }; test.remove(3); if (!test.isBinarySearchTree()) { return false; }; test.remove(50); if (!test.isBinarySearchTree()) { return false; }; test.remove(15); if (!test.isBinarySearchTree()) { return false; }; return (test.inorder().join('') == '147'); })(), 'The remove method removes nodes with two children while maintaining the binary search tree structure.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.remove !== 'function') { return false; }; test.add(100); test.add(50); test.add(300); test.remove(100); return (test.inorder().join('') == 50300); })(), 'The root can be removed on a tree of three nodes.');"
+      ],
+      "tail": [
+        "BinarySearchTree.prototype = {",
+        "    add: function(value) {",
+        "        let node = this.root;",
+        "        if (node == null) {",
+        "          this.root = new Node(value);",
+        "          return;",
+        "        } else {",
+        "            function searchTree(node) {",
+        "                if (value < node.value) {",
+        "                    if (node.left == null) {",
+        "                        node.left = new Node(value);",
+        "                        return;",
+        "                    } else if (node.left != null) {",
+        "                        return searchTree(node.left)",
+        "                    };",
+        "                } else if (value > node.value) {",
+        "                    if (node.right == null) {",
+        "                        node.right = new Node(value);",
+        "                        return;",
+        "                    } else if (node.right != null) {",
+        "                        return searchTree(node.right);",
+        "                    };",
+        "                } else {",
+        "                    return null;",
+        "                };",
+        "            };",
+        "            return searchTree(node);",
+        "        };",
+        "    },",
+        "    inorder: function() {",
+        "        if (this.root == null) {",
+        "          return null;",
+        "        } else {",
+        "          var result = new Array();",
+        "          function traverseInOrder(node) {",
+        "              if (node.left != null) {",
+        "                  traverseInOrder(node.left);",
+        "              };",
+        "              result.push(node.value);",
+        "              if (node.right != null) {",
+        "                  traverseInOrder(node.right);",
+        "              };",
+        "          }",
+        "          traverseInOrder(this.root);",
+        "          return result;",
+        "        };",
+        "    },    ",
+        "    isBinarySearchTree() {",
+        "        if (this.root == null) {",
+        "            return null;",
+        "        } else {",
+        "            let check = true;",
+        "            function checkTree(node) {",
+        "                if (node.left != null) {",
+        "                    let left = node.left;",
+        "                    if (left.value > node.value) {",
+        "                        check = false;",
+        "                    } else {",
+        "                        checkTree(left);",
+        "                    }",
+        "                }",
+        "                if (node.right != null) {",
+        "                    let right = node.right;",
+        "                    if (right.value < node.value) {",
+        "                        check = false;",
+        "                    } else {",
+        "                        checkTree(right);",
+        "                    };",
+        "                };",
+        "            };",
+        "            checkTree(this.root);",
+        "            return check;",
+        "        }",
+        "    }",
+        "};"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8259367417b2b2512c83",
+      "title": "Invert a Binary Tree",
+      "description": [
+        "Here will we create a function to invert a binary tree. Given a binary tree, we want to produce a new tree that is equivalently the mirror image of this tree. Running an inorder traversal on an inverted tree will explore the nodes in reverse order when compared to the inorder traversal of the original tree. Write a method to do this called invert on our binary tree. Calling this method should invert the current tree structure. Ideally, we would like to do this in-place in linear time. That is, we only visit each node once and we modify the existing tree structure as we go, without using any additional memory. Good luck!"
+      ],
+      "challengeSeed": [
+        "const displayTree = (tree) => console.log(JSON.stringify(tree, null, 2));",
+        "function Node(value) {",
+        "    this.value = value;",
+        "    this.left = null;",
+        "    this.right = null;",
+        "};",
+        "function BinarySearchTree() {",
+        "    this.root = null;",
+        "    // change code below this line",
+        "    // change code above this line",
+        "};"
+      ],
+      "tail": [
+        "BinarySearchTree.prototype = {",
+        "    add: function(value) {",
+        "        let node = this.root;",
+        "        if (node == null) {",
+        "          this.root = new Node(value);",
+        "          return;",
+        "        } else {",
+        "            function searchTree(node) {",
+        "                if (value < node.value) {",
+        "                    if (node.left == null) {",
+        "                        node.left = new Node(value);",
+        "                        return;",
+        "                    } else if (node.left != null) {",
+        "                        return searchTree(node.left)",
+        "                    };",
+        "                } else if (value > node.value) {",
+        "                    if (node.right == null) {",
+        "                        node.right = new Node(value);",
+        "                        return;",
+        "                    } else if (node.right != null) {",
+        "                        return searchTree(node.right);",
+        "                    };",
+        "                } else {",
+        "                    return null;",
+        "                };",
+        "            };",
+        "            return searchTree(node);",
+        "        };",
+        "    },",
+        "    inorder: function() {",
+        "        if (this.root == null) {",
+        "          return null;",
+        "        } else {",
+        "          var result = new Array();",
+        "          function traverseInOrder(node) {",
+        "              if (node.left != null) {",
+        "                  traverseInOrder(node.left);",
+        "              };",
+        "              result.push(node.value);",
+        "              if (node.right != null) {",
+        "                  traverseInOrder(node.right);",
+        "              };",
+        "          }",
+        "          traverseInOrder(this.root);",
+        "          return result;",
+        "        };",
+        "    }",
+        "};"
+      ],
+      "tests": [
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() }; return (typeof test == 'object')})(), 'The BinarySearchTree data structure exists.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; return (typeof test.invert == 'function')})(), 'The binary search tree has a method called invert.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.invert !== 'function') { return false; }; test.add(4); test.add(1); test.add(7); test.add(87); test.add(34); test.add(45); test.add(73); test.add(8); test.invert(); return test.inorder().join('') == '877345348741'; })(), 'The invert method correctly inverts the tree structure.');",
+        "assert((function() { let test = false; if (typeof BinarySearchTree !== 'undefined') { test = new BinarySearchTree() } else { return false; }; if (typeof test.invert !== 'function') { return false; }; return (test.invert() == null); })(), 'Inverting an empty tree returns null.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8259367417b2b2512c84",
+      "title": "Create a Trie Search Tree",
+      "description": [
+        "Here we will move on from binary search trees and take a look at another type of tree structure called a trie. A trie is an ordered search tree commonly used to hold strings, or more generically associative arrays or dynamic datasets in which the keys are strings. They are very good at storing sets of data when many keys will have overlapping prefixes, for example, all",
+        "the words in a dictionary.",
+        "Unlike a binary tree, nodes are not associated with actual values. Instead, the path to a node represents a specific key. For instance, if we wanted to store the string code in a trie, we would have four nodes, one for each letter: c — o — d — e. Following that path through all these nodes will then create code as a string — that path is the key we stored. Then, if we wanted to add the string coding, it would share the first three nodes of code before branching away after the d. In this way, large datasets can be stored very compactly. In addition, search can be very quick because it is effectively limited to the length of the string you are storing. Furthermore, unlike binary trees a node can store any number of child nodes.",
+        "As you might have guessed from the above example, some metadata is commonly stored at nodes that hold the end of a key so that on later traversals that key can still be retrieved. For instance, if we added codes in our example above we would need some way to know that the e in code represents the end of a key that was previously entered. Otherwise, this information would effectively be lost when we add codes.",
+        "Instructions: Let's create a trie to store words. It will accept words through an add method and store these in a trie data structure. It will also allow us to query if a given string is a word with an isWord method, and retrieve all the words entered into the trie with a print method. isWord should return a",
+        "boolean value and print should return an array of all these words as string values.",
+        "In order for us to verify that this data structure is implemented correctly, we've provided a Node structure for each node in the tree. Each node will be an object with a keys property which is a JavaScript Map object. This will hold the individual letters that are valid keys of each node. We've also",
+        "created an end property on the nodes that can be set to true if the node represents the termination of a word."
+      ],
+      "challengeSeed": [
+        "const displayTree = (tree) => console.log(JSON.stringify(tree, null, 2));",
+        "let Node = function() {",
+        "  this.keys = new Map();",
+        "  this.end = false;",
+        "  this.setEnd = function() {",
+        "    this.end = true;",
+        "  };",
+        "  this.isEnd = function() {",
+        "    return this.end;",
+        "  };",
+        "};",
+        "let Trie = function() {",
+        "  // change code below this line",
+        "  // change code above this line",
+        "};"
+      ],
+      "tests": [
+        "assert((function testTrie() { let test = false; if (typeof Trie !== 'undefined') { test = new Trie() } else { return false; }; return (typeof test.add == 'function') }()), 'The Trie has an add method.');",
+        "assert((function testTrie() { let test = false; if (typeof Trie !== 'undefined') { test = new Trie() } else { return false; }; return (typeof test.print == 'function') }()), 'The Trie has a print method.');",
+        "assert((function testTrie() { let test = false; if (typeof Trie !== 'undefined') { test = new Trie() } else { return false; }; return (typeof test.isWord == 'function') }()), 'The Trie has an isWord method.');",
+        "assert((function testTrie() { let test = false; if (typeof Trie !== 'undefined') { test = new Trie() } else { return false; }; test.add('jump'); test.add('jumps'); test.add('jumped'); test.add('house'); test.add('mouse'); let added = test.print(); return (added.indexOf('jump') != -1 && added.indexOf('jumps') != -1 && added.indexOf('jumped') != -1 && added.indexOf('house') != -1 && added.indexOf('mouse') != -1 && added.length == 5); }()), 'The print method returns all items added to the trie as strings in an array.');",
+        "assert((function testTrie() { let test = false; if (typeof Trie !== 'undefined') { test = new Trie() } else { return false; }; test.add('hop'); test.add('hops'); test.add('hopped'); test.add('hoppy'); test.add('hope'); return (test.isWord('hop') && !test.isWord('ho') && test.isWord('hopped') && !test.isWord('hopp') && test.isWord('hoppy') && !test.isWord('hoping')); }()), 'The isWord method returns true only for words added to the trie and false for all other words.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "8d5123c8c441eddfaeb5bdef",
+      "title": "Implement Bubble Sort",
+      "description": [
+        "This is the first of several challenges on sorting algorithms. Given an array of unsorted items, we want to be able to return a sorted array. We will see several different methods to do this and learn some tradeoffs between these different approaches. While most modern languages have built-in sorting methods for operations like this, it is still important to understand some of the common basic approaches and learn how they can be implemented.",
+        "Here we will see bubble sort. The bubble sort method starts at the beginning of an unsorted array and 'bubbles up' unsorted values towards the end, iterating through the array until it is completely sorted. It does this by comparing adjacent items and swapping them if they are out of order. The method continues looping through the array until no swaps occur at which point the array is sorted.",
+        "This method requires multiple iterations through the array and for average and worst cases has quadratic time complexity. While simple, it is usually impractical in most situations.",
+        "Instructions: Write a function bubbleSort which takes an array of integers as input and returns an array of these integers in sorted order. We've provided a helper method to generate a random array of integer values."
+      ],
+      "challengeSeed": [
+        "// generate a randomly filled array",
+        "let array = new Array();",
+        "(function createArray(size = 5) {",
+        "  array.push(+(Math.random() * 100).toFixed(0));",
+        "  return (size > 1) ? createArray(size - 1) : undefined;",
+        "})(12);",
+        "function bubbleSort(array) {",
+        "  // change code below this line",
+        "  // change code above this line",
+        "  return array;",
+        "};"
+      ],
+      "tail": [
+        "function isSorted(arr) {",
+        "  let check = (i) => (i == arr.length - 1) ? true : (arr[i] > arr[i + 1]) ? false : check(i + 1);",
+        "  return check(0);",
+        "};"
+      ],
+      "tests": [
+        "console.assert(typeof bubbleSort == 'function', 'bubbleSort is a function');",
+        "console.assert(isSorted(bubbleSort([1,4,2,8,345,123,43,32,5643,63,123,43,2,55,1,234,92])), 'bubbleSort returns a sorted array');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8259367417b2b2512c85",
+      "title": "Implement Selection Sort",
+      "description": [
+        "Here we will implement selection sort. Selection sort works by selecting the minimum value in a list and swapping it with the first value in the list. It then starts at the second position, selects the smallest value in the remaining list, and swaps it with the second element. It continues iterating through the list and swapping elements until it reaches the end of the list. Now the list is sorted. Selection sort has quadratic time complexity in all cases.",
+        "Instructions: Write a function selectionSort which takes an array of integers as input and returns an array of these integers in sorted order."
+      ],
+      "challengeSeed": [
+        "// generate a randomly filled array",
+        "let array = new Array();",
+        "(function createArray(size = 5) {",
+        "  array.push(+(Math.random() * 100).toFixed(0));",
+        "  return (size > 1) ? createArray(size - 1) : undefined;",
+        "})(12);",
+        "function selectionSort(array) {",
+        "  // change code below this line",
+        "  // change code above this line",
+        "  return array;",
+        "};"
+      ],
+      "tail": [
+        "function isSorted(arr) {",
+        "  let check = (i) => (i == arr.length - 1) ? true : (arr[i] > arr[i + 1]) ? false : check(i + 1);",
+        "  return check(0);",
+        "};"
+      ],
+      "tests": [
+        "console.assert(typeof selectionSort == 'function', 'selectionSort is a function');",
+        "console.assert(isSorted(selectionSort([1,4,2,8,345,123,43,32,5643,63,123,43,2,55,1,234,92])), 'selectionSort returns a sorted array');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d8259367417b2b2512c86",
+      "title": "Implement Insertion Sort",
+      "description": [
+        "The next sorting method we'll look at is insertion sort. This method works by building up a sorted array at the beginning of the list. It begins the sorted array with the first element. Then it inspects the next element and swaps it backwards into the sorted array until it is in sorted position. It continues iterating through the list and swapping new items backwards into the sorted portion until it reaches the end. This algorithm has quadratic time complexity in the average and worst cases.",
+        "Instructions: Write a function insertionSort which takes an array of integers as input and returns an array of these integers in sorted order."
+      ],
+      "challengeSeed": [
+        "// generate a randomly filled array",
+        "let array = new Array();",
+        "(function createArray(size = 5) {",
+        "  array.push(+(Math.random() * 100).toFixed(0));",
+        "  return (size > 1) ? createArray(size - 1) : undefined;",
+        "})(12);",
+        "function insertionSort(array) {",
+        "  // change code below this line",
+        "  // change code above this line",
+        "  return array;",
+        "};"
+      ],
+      "tail": [
+        "function isSorted(arr) {",
+        "  let check = (i) => (i == arr.length - 1) ? true : (arr[i] > arr[i + 1]) ? false : check(i + 1);",
+        "  return check(0);",
+        "};"
+      ],
+      "tests": [
+        "console.assert(typeof insertionSort == 'function', 'insertionSort is a function');",
+        "console.assert(isSorted(insertionSort([1,4,2,8,345,123,43,32,5643,63,123,43,2,55,1,234,92])), 'insertionSort returns a sorted array');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d825a367417b2b2512c87",
+      "title": "Create a Doubly Linked List",
+      "description": [
+        "All of the linked lists we've created so far are singly linked lists. Here, we'll create",
+        "a doubly linked list. As the name implies, nodes in a doubly linked list have references to the next and previous node in the list. This allows us to traverse the list in both directions but it also requires more memory to be used because every node must contain an additional reference to the previous node in the list.",
+        "Instructions: We've provided a Node object and started our DoublyLinkedList. Let's",
+        "add two methods to our doubly linked list called add and remove. The add method should accept integers or strings and add them to the list and remove should accept an integer or string and remove all copies of this integer or string that exist in the list. Be careful to handle any possible edge cases when writing these methods, such as deletions for the first or last element. Also, removing any item on an empty list should return null."
+      ],
+      "challengeSeed": [
+        "let Node = function(data, prev) {",
+        "  this.data = data;",
+        "  this.prev = prev;",
+        "  this.next = null;",
+        "};",
+        "let DoublyLinkedList = function() {",
+        "  this.head = null;",
+        "  this.tail = null;",
+        "  // change code below this line",
+        "  // change code above this line",
+        "};"
+      ],
+      "tail": [
+        "DoublyLinkedList.prototype = {",
+        "  print() {",
+        "    if (this.head == null) {",
+        "      return null;",
+        "    } else {",
+        "      let result = new Array();",
+        "      let node = this.head;",
+        "      while (node.next != null) {",
+        "        result.push(node.data);",
+        "        node = node.next;",
+        "      };",
+        "      result.push(node.data);",
+        "      return result;",
+        "    };",
+        "  },",
+        "  printReverse() {",
+        "    if (this.tail == null) {",
+        "      return null;",
+        "    } else {",
+        "      let result = new Array();",
+        "      let node = this.tail;",
+        "      while (node.prev != null) {",
+        "        result.push(node.data);",
+        "        node = node.prev;",
+        "      };",
+        "      result.push(node.data);",
+        "      return result;",
+        "    };",
+        "  } ",
+        "};"
+      ],
+      "tests": [
+        "assert((function() { let test = false; if (typeof DoublyLinkedList !== 'undefined') { test = new DoublyLinkedList() }; return (typeof test == 'object')})(), 'The DoublyLinkedList data structure exists.');",
+        "assert((function() { let test = false; if (typeof DoublyLinkedList !== 'undefined') { test = new DoublyLinkedList() }; if (test.add == undefined) { return false; }; return (typeof test.add == 'function')})(), 'The DoublyLinkedList has a method called add.');",
+        "assert((function() { let test = false; if (typeof DoublyLinkedList !== 'undefined') { test = new DoublyLinkedList() }; if (test.remove == undefined) { return false; }; return (typeof test.remove == 'function')})(), 'The DoublyLinkedList has a method called remove.');",
+        "assert((function() { let test = false; if (typeof DoublyLinkedList !== 'undefined') { test = new DoublyLinkedList() }; return (test.remove(100) == null); })(), 'Removing an item from an empty list returns null.');",
+        "assert((function() { let test = false; if (typeof DoublyLinkedList !== 'undefined') { test = new DoublyLinkedList() }; test.add(5); test.add(6); test.add(723); return (test.print().join('') == '56723'); })(), 'The add method adds items to the list.');",
+        "assert((function() { let test = false; if (typeof DoublyLinkedList !== 'undefined') { test = new DoublyLinkedList() }; test.add(50); test.add(68); test.add(73); return (test.printReverse().join('') == '736850'); })(), 'Each node keeps track of the previous node.');",
+        "assert((function() { let test = false; if (typeof DoublyLinkedList !== 'undefined') { test = new DoublyLinkedList() }; test.add(25); test.add(35); test.add(60); test.remove(25); return ( test.print().join('') == '3560' ) })(), 'The first item can be removed from the list.');",
+        "assert((function() { let test = false; if (typeof DoublyLinkedList !== 'undefined') { test = new DoublyLinkedList() }; test.add(25); test.add(35); test.add(60); test.remove(60); return ( test.print().join('') == '2535' ) })(), 'The last item can be removed from the list.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d825a367417b2b2512c88",
+      "title": "Reverse a Doubly Linked List",
+      "description": [
+        "Let's create one more method for our doubly linked list called reverse which reverses the list in place. Once the method is executed the head should point to the previous tail and the tail should point to the previous head. Now, if we traverse the list from head to tail we should meet the nodes in a reverse order compared to the original list. Trying to reverse an empty list should return null."
+      ],
+      "challengeSeed": [
+        "let Node = function(data, prev) {",
+        "  this.data = data;",
+        "  this.prev = prev;",
+        "  this.next = null;",
+        "};",
+        "let DoublyLinkedList = function() {",
+        "  this.head = null;",
+        "  this.tail = null;",
+        "  // change code below this line",
+        "  // change code above this line",
+        "};"
+      ],
+      "tests": [
+        "assert((function() { let test = false; if (typeof DoublyLinkedList !== 'undefined') { test = new DoublyLinkedList() }; return (typeof test == 'object')})(), 'The DoublyLinkedList data structure exists.');",
+        "assert((function() { let test = false; if (typeof DoublyLinkedList !== 'undefined') { test = new DoublyLinkedList() }; if (test.add == undefined) { return false; }; return (typeof test.add == 'function')})(), 'The DoublyLinkedList has a method called add.');",
+        "assert((function() { let test = false; if (typeof DoublyLinkedList !== 'undefined') { test = new DoublyLinkedList() }; if (test.reverse == undefined) { return false; }; return (typeof test.reverse == 'function')})(), 'The DoublyLinkedList has a method called reverse.');",
+        "assert((function() { let test = false; if (typeof DoublyLinkedList !== 'undefined') { test = new DoublyLinkedList() }; return (test.reverse() == null); })(), 'Reversing an empty list returns null.');",
+        "assert((function() { let test = false; if (typeof DoublyLinkedList !== 'undefined') { test = new DoublyLinkedList() }; test.add(58); test.add(61); test.add(32); test.reverse(); return (test.print().join('') == '326158'); })(), 'The reverse method reverses the list.');",
+        "assert((function() { let test = false; if (typeof DoublyLinkedList !== 'undefined') { test = new DoublyLinkedList() }; test.add(11); test.add(22); test.add(33); test.reverse(); return (test.printReverse().join('') == '112233'); })(), 'The next and previous references are correctly maintained when a list is reversed.');"
+      ],
+      "tail": [
+        "DoublyLinkedList.prototype = {",
+        "  add(data) {",
+        "    if (this.head == null) {",
+        "      this.head = new Node(data, null);",
+        "      this.tail = this.head;",
+        "    } else {",
+        "      let node = this.head;",
+        "      let prev = null;",
+        "      while (node.next != null) {",
+        "        prev = node;",
+        "        node = node.next;",
+        "      };",
+        "      let newNode = new Node(data, node);",
+        "      node.next = newNode;",
+        "      this.tail = newNode;",
+        "    };",
+        "  },",
+        "  print() {",
+        "    if (this.head == null) {",
+        "      return null;",
+        "    } else {",
+        "      let result = new Array();",
+        "      let node = this.head;",
+        "      while (node.next != null) {",
+        "        result.push(node.data);",
+        "        node = node.next;",
+        "      };",
+        "      result.push(node.data);",
+        "      return result;",
+        "    };",
+        "  },",
+        "  printReverse() {",
+        "    if (this.tail == null) {",
+        "      return null;",
+        "    } else {",
+        "      let result = new Array();",
+        "      let node = this.tail;",
+        "      while (node.prev != null) {",
+        "        result.push(node.data);",
+        "        node = node.prev;",
+        "      };",
+        "      result.push(node.data);",
+        "      return result;",
+        "    };",
+        "  }",
+        "};"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d825a367417b2b2512c89",
+      "title": " Implement Quick Sort",
+      "description": [
+        "Here we will move on to an intermediate sorting algorithm: quick sort. Quick sort is an",
+        "efficient, recursive divide-and-conquer approach to sorting an array. In this method, a pivot value is chosen in the original array. The array is then partitioned into two subarrays of values less than and greater than the pivot value. We then combine the result of recursively calling the quick sort algorithm on both sub-arrays. This continues until the base case of an empty or single-item array is reached, which we return. The unwinding of the recursive calls return us the sorted array.",
+        "Quick sort is a very efficient sorting method, providing O(nlog(n)) performance on average. It is also relatively easy to implement. These attributes make it a popular and useful sorting method.",
+        "Instructions: Write a function quickSort which takes an array of integers as input and returns an array of these integers in sorted order. While the choice of the pivot value is important, any pivot will do for our purposes here. For simplicity, the first or last element could be used."
+      ],
+      "challengeSeed": [
+        "// generate a randomly filled array",
+        "let array = new Array();",
+        "(function createArray(size = 5) {",
+        "  array.push(+(Math.random() * 100).toFixed(0));",
+        "  return (size > 1) ? createArray(size - 1) : undefined;",
+        "})(12);",
+        "function quickSort(array) {",
+        "  // change code below this line",
+        "  // change code above this line",
+        "  return array;",
+        "};"
+      ],
+      "tests": [
+        "assert(typeof quickSort == 'function', 'quickSort is a function');",
+        "assert(isSorted(quickSort([1,4,2,8,345,123,43,32,5643,63,123,43,2,55,1,234,92])), 'quickSort returns a sorted array');"
+      ],
+      "tail": [
+        "function isSorted(arr) {",
+        "  let check = (i) => (i == arr.length - 1) ? true : (arr[i] > arr[i + 1]) ? false : check(i + 1);",
+        "  return check(0);",
+        "};"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "8d5823c8c441eddfaeb5bdef",
+      "title": "Create a Map Data Structure",
+      "description": [
+        "The next few challenges will cover maps and hash tables. Maps are data structurs that store key-value pairs. In JavaScript, these are available to us as objects. Maps provide rapid lookup of stored items based on key values and are very common and useful data structures.",
+        "Instructions: Let's get some practice creating our own map. Because JavaScript objects provide a much more efficient map structure than anything we could write here, this is intended primarily as a learning exercise. However, JavaScript objects only provide us with certain operations. What if we wanted to define custom operations?",
+        "Use the Map object provided here as a wrapper around a JavaScript object. Create the following methods and operations on the Map object:",
+        "add accepts a key, value pair to add to the map",
+        "remove accepts a key and removes the associated key, value pair",
+        "get accepts a key and returns the stored value",
+        "has returns a boolean for the presence or absence of an item",
+        "values returns an array of all the values in the map",
+        "size returns the number of items in the map",
+        "clear empties the map"
+      ],
+      "challengeSeed": [
+        "let Map = function() {",
+        "  this.collection = {}",
+        "  // change code below this line",
+        "  // change code above this line",
+        "};"
+      ],
+      "tests": [
+        "assert((function() { let test = false; if (typeof Map !== 'undefined') { test = new Map() }; return (typeof test == 'object')})(), 'The Map data structure exists.');",
+        "assert((function() { let test = false; if (typeof Map !== 'undefined') { test = new Map() }; return (typeof test.add == 'function' && typeof test.remove == 'function' && typeof test.get == 'function' && typeof test.has == 'function' && typeof test.values == 'function' && typeof test.clear == 'function' && typeof test.size == 'function')})(), 'The Map object has the following methods: add, remove, get, has, values, clear, and size.');",
+        "assert((function() { let test = false; if (typeof Map !== 'undefined') { test = new Map() }; test.add(5,6); test.add(2,3); test.add(2,5); return (test.size() == 3)})(), 'The add method adds items to the map.');",
+        "assert((function() { let test = false; if (typeof Map !== 'undefined') { test = new Map() }; test.add('test','value'); return (test.has('test') && !test.has('false'))})(), 'The has method returns true for added items and false for absent items.');",
+        "assert((function() { let test = false; if (typeof Map !== 'undefined') { test = new Map() }; test.add('abc','def'); return (test.get('abc') == 'def')})(), 'The get method accepts keys as input and returns the associated values.');",
+        "assert((function() { let test = false; if (typeof Map !== 'undefined') { test = new Map() }; test.add('a','b'); test.add('c','d'); test.add('e','f'); let vals = test.values(); return (vals.indexOf('b') != -1 && vals.indexOf('d') != -1 && vals.indexOf('f') != -1)})(), 'The values method returns all the values stored in the map as strings in an array.');",
+        "assert((function() { let test = false; if (typeof Map !== 'undefined') { test = new Map() }; test.add('b','b'); test.add('c','d'); test.remove('asdfas'); let init = test.size(); test.clear(); return (init == 2 && test.size() == 0)})(), 'The clear method empties the map and the size method returns the number of items present in the map.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d825a367417b2b2512c8a",
+      "title": "Insert an Element into a Max Heap",
+      "description": [
+        "Now we will move on to another tree data structure, the binary heap. A binary heap is a partially ordered binary tree which satisfies the heap property. The heap property specifies a relationship between parent and child nodes. You may have a max heap, in which all parent nodes are greater than or equal to their child nodes, or a min heap, in which the reverse is true. Binary heaps are also complete binary trees. This means that all levels of the tree are fully filled and if the last level is partially filled it is filled from left to right.",
+        "While binary heaps may be implemented as tree structures with nodes that contain left and right references, the partial ordering according to the heap property allows us to represent the heap with an array. The parent-children relationship is what we're interested in and with simple arithmetic we can compute the children of any parent and the parent of any child node.",
+        "For instance, consider this array representation of a binary max heap:",
+        "<code>[ 6, 22, 30, 37, 63, 48, 42, 76 ]</code>",
+        "The root node is the first element, 6. Its children are 22 and 30. If we look at the relationship between the array indices of these values, for index i the children are 2 * i + 1 and 2 * i + 2. Similarly, the element at index 0 is the parent of these two children at indices 1 and 2. More generally, we can find the parent of a node at any index with the following: i - 1 / 2. These patterns will hold true as the binary tree grows to any size. Finally, we can make a slight adjustment to make this arithmetic even easier by skipping the first element in the array. Doing this creates the following relationship for any element at a given index i:",
+        "Example Array representation: <code>[ null, 22, 30, 37, 63, 48, 42, 76 ]</code>",
+        "An element's left child: i * 2",
+        "An element's right child: i * 2 + 1",
+        "An element's parent: i / 2",
+        "Once you wrap your head around the math, using an array representation is very useful because node locations can be quickly determined with this arithmetic and memory usage is diminished because you don't need to maintain references to child nodes.",
+        "Instructions: Here we will create a max heap. Start by just creating an insert method which adds elements to our heap. During insertion, it is important to always maintain the heap property. For a max heap this means the root element should always have the greatest value in the tree and all parent nodes should be greater than their children. For an array implementation of a heap, this is typically accomplished in three steps:",
+        "Add the new element to the end of the array.",
+        "If the element is larger than its parents, switch them.",
+        "Continue switching until the new element is either smaller than its parent or you reach the root of the tree.",
+        "Finally, add a print method which returns an array of all the items that have been added to the heap."
+      ],
+      "challengeSeed": [
+        "let MaxHeap = function() {",
+        "  // change code below this line",
+        "  // change code above this line",
+        "};"
+      ],
+      "tests": [
+        "assert((function() { let test = false; if (typeof MaxHeap !== 'undefined') { test = new MaxHeap() }; return (typeof test == 'object')})(), 'The MaxHeap data structure exists.');",
+        "assert((function() { let test = false; if (typeof MaxHeap !== 'undefined') { test = new MaxHeap() } else { return false; }; return (typeof test.insert == 'function')})(), 'MaxHeap has a method called insert.');",
+        "assert((function() { let test = false; if (typeof MaxHeap !== 'undefined') { test = new MaxHeap() } else { return false; }; return (typeof test.print == 'function')})(), 'MaxHeap has a method called print.');",
+        "assert((function() { let test = false; if (typeof MaxHeap !== 'undefined') { test = new MaxHeap() } else { return false; }; test.insert(50); test.insert(100); test.insert(700); test.insert(32); test.insert(51); let result = test.print(); return ((result.length == 5) ? result[0] == 700 : result[1] == 700) })(), 'The insert method adds elements according to the max heap property.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d825b367417b2b2512c8b",
+      "title": "Remove an Element from a Max Heap",
+      "description": [
+        "Now that we can add elements to our heap let's see how we can remove elements. Removing and inserting elements both require similar logic. In a max heap you will usually want to remove the greatest value, so this involves simply extracting it from the root of our tree. This will break the heap property of our tree, so we must reestablish it in some way. Typically, for a max heap this is done in the following way:",
+        "Move the last element in the heap into the root position.",
+        "If either child of the root is greater than it, swap the root with the child of greater value.",
+        "Continue swapping until the parent is greater than both children, or you reach the last level in the tree.",
+        "Instructions: Add a method to our max heap called remove. This method should return the greatest value that has been added to our max heap and remove it from the heap. It should also reorder the heap so the heap property is maintained. After removing an element, the next greatest element remaining in the heap should become the root. Add your insert method again here as well."
+      ],
+      "challengeSeed": [
+        "let MaxHeap = function() {",
+        "  // change code below this line",
+        "  // change code above this line",
+        "};"
+      ],
+      "tests": [
+        "assert((function() { let test = false; if (typeof MaxHeap !== 'undefined') { test = new MaxHeap() }; return (typeof test == 'object')})(), 'The MaxHeap data structure exists.');",
+        "assert((function() { let test = false; if (typeof MaxHeap !== 'undefined') { test = new MaxHeap() } else { return false; }; return (typeof test.print == 'function')})(), 'MaxHeap has a method called print.');",
+        "assert((function() { let test = false; if (typeof MaxHeap !== 'undefined') { test = new MaxHeap() } else { return false; }; return (typeof test.insert == 'function')})(), 'MaxHeap has a method called insert.');",
+        "assert((function() { let test = false; if (typeof MaxHeap !== 'undefined') { test = new MaxHeap() } else { return false; }; return (typeof test.remove == 'function')})(), 'MaxHeap has a method called remove.');",
+        "assert((function() { let test = false; if (typeof MaxHeap !== 'undefined') { test = new MaxHeap() } else { return false; }; test.insert(30); test.insert(300); test.insert(500); test.insert(10); let result = []; result.push(test.remove()); result.push(test.remove()); result.push(test.remove()); result.push(test.remove());  return (result.join('') == '5003003010') })(), 'The remove method removes the greatest element from the max heap while maintaining the max heap property.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d825b367417b2b2512c8c",
+      "title": "Implement Heap Sort with a Min Heap",
+      "description": [
+        "Now that we can add and remove elements let's see some of the applications heaps can be used for. Heaps are commonly used to implement priority queues because they always store an item of greatest or least value in first position. In addition, they are used to implement a sorting algorithm called heap sort. We'll see how to do this here. Heap sort uses a min heap, the reverse of a max heap. A min heap always stores the element of least value in the root position.",
+        "Heap sort works by taking an unsorted array, adding each item in the array into a min heap, and then extracting every item out of the min heap into a new array. The min heap structure ensures that the new array will contain the original items in least to greatest order. This is one of the most efficient sorting algorithms with average and worst case performance of O(nlog(n)).",
+        "Instructions: Let's implement heap sort with a min heap. Feel free to adapt your max heap code here. Create an object MinHeap with insert, remove, and sort methods. The sort method should return an array of all the elements in the min heap sorted from smallest to largest."
+      ],
+      "challengeSeed": [
+        "// check if array is sorted",
+        "function isSorted(arr) {",
+        "  let check = (i) => (i == arr.length - 1) ? true : (arr[i] > arr[i + 1]) ? false : check(i + 1);",
+        "  return check(0);",
+        "};",
+        "// generate a randomly filled array",
+        "let array = new Array();",
+        "(function createArray(size = 5) {",
+        "  array.push(+(Math.random() * 100).toFixed(0));",
+        "  return (size > 1) ? createArray(size - 1) : undefined;",
+        "})(25);",
+        "let MinHeap = function() {",
+        "  // change code below this line",
+        "  // change code above this line",
+        "};"
+      ],
+      "tests": [
+        "assert((function() { let test = false; if (typeof MinHeap !== 'undefined') { test = new MinHeap() }; return (typeof test == 'object')})(), 'The MinHeap data structure exists.');",
+        "assert((function() { let test = false; if (typeof MinHeap !== 'undefined') { test = new MinHeap() } else { return false; }; return (typeof test.insert == 'function')})(), 'MinHeap has a method called insert.');",
+        "assert((function() { let test = false; if (typeof MinHeap !== 'undefined') { test = new MinHeap() } else { return false; }; return (typeof test.remove == 'function')})(), 'MinHeap has a method called remove.');",
+        "assert((function() { let test = false; if (typeof MinHeap !== 'undefined') { test = new MinHeap() } else { return false; }; return (typeof test.sort == 'function')})(), 'MinHeap has a method called sort.');",
+        "assert((function() { let test = false; if (typeof MinHeap !== 'undefined') { test = new MinHeap() } else { return false; }; test.insert(3); test.insert(12); test.insert(5); test.insert(10); test.insert(1); test.insert(27); test.insert(42); test.insert(57); test.insert(5); let result = test.sort(); return (isSorted(result)); })(), 'The sort method returns an array containing all items added to the min heap in sorted order.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d825b367417b2b2512c8d",
+      "title": "Create an ES6 JavaScript Map",
+      "description": [
+        "The new version of JavaScript provides us with a built-in Map object which provides much of the functionality we wrote by hand in the last challenge. This Map object, although similar to regular JavaScript objects, provides some useful functionality that normal objects lack. For example, an ES6 Map tracks the insertion order of items that are added to it. Here is a more complete overview of its methods:",
+        ".has(key) returns true or false based on the presence of a key",
+        ".get(key) returns the value associated with a key",
+        ".set(key, value) sets a new key, value pair",
+        ".delete(key) removes a key, value pair",
+        ".clear() removes all key, value pairs",
+        ".entries() returns an array of all the keys in insertion order",
+        ".values() returns an array of all the values in insertion order",
+        "Instructions: Define a JavaScript Map object and assign to it a variable called myMap. Add the key, value pair 'Free Code Camp', 'Awesome!' to it."
+      ],
+      "challengeSeed": [
+        "// change code below this line"
+      ],
+      "tests": [
+        "assert(typeof myMap == 'object', 'The myMap object exists.');",
+        "assert(myMap.get('Free Code Camp') == 'Awesome!', 'myMap contains the key value pair \\'Free Code Camp\\', \\'Awesome!\\'.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d825b367417b2b2512c8e",
+      "title": "Create a Hash Table",
+      "description": [
+        "In this challenge we will learn about hash tables. A Hash table is used to implement associative arrays, or mappings of key-value pairs, like the objects and Maps we have just been studying. A JavaScript object could be implemented as a hash table, for instance (its actual implementation will depend on the environment it's running in). The way a hash table works is that it takes a key input and hashes this key in a deterministic way to some numerical value. This numerical value is then used as the actual key the associated value is stored by. Then, if you try to access the same key again, the hashing function will process the key, return the same numerical result, which will then be used to look up the associated value. This provides very efficient O(n) lookup time on average.",
+        "Hash tables can be implemented as arrays with hash functions producing array indices within a specified range. In this method, the choice of the array size is important, as is the hashing function. For instance, what if the hashing function produces the same value for two different keys? This is called a collision. One way to handle collisions is to just store both key-value pairs at that index. Then, upon lookup of either, you would have to iterate through the bucket of items to find the key you are looking for. A good hashing function will minimize collisions to maintain efficient search time.",
+        "Here, we won't be concerned with the details of hashing or hash table implementation, we will just try to get a general sense of how they work.",
+        "Instructions: Let's create the basic functionality of a hash table. We've created a naive hashing function for you to use. You can pass a string value to the function hash and it will return a hashed value you can use as a key for storage. Store items based on this hashed value in the this.collection object. Create these three methods: add, remove, and lookup. The first should accept a key value pair to add to the hash table. The second should remove a key-value pair when passed a key. The third should accept a key and return the associated value or null if the key is not present.",
+        "Be sure to write your code to account for collisions!"
+      ],
+      "challengeSeed": [
+        "let called = 0;",
+        "let hash = (string) => {",
+        "  called++;",
+        "  let hash = 0;",
+        "  for (let i = 0; i < string.length; i++) { hash += string.charCodeAt(i); };",
+        "  return hash;",
+        "};",
+        "let HashTable = function() {",
+        "  this.collection = {};",
+        "  // change code below this line",
+        "  // change code above this line",
+        "};"
+      ],
+      "tests": [
+        "assert((function() { let test = false; if (typeof HashTable !== 'undefined') { test = new HashTable() }; return (typeof test == 'object')})(), 'The HashTable data structure exists.');",
+        "assert((function() { let test = false; if (typeof HashTable !== 'undefined') { test = new HashTable() }; return ((typeof test.add) == 'function')})(), 'The HashTable has an add method.');",
+        "assert((function() { let test = false; if (typeof HashTable !== 'undefined') { test = new HashTable() }; return ((typeof test.remove) == 'function')})(), 'The HashTable has an remove method.');",
+        "assert((function() { let test = false; if (typeof HashTable !== 'undefined') { test = new HashTable() }; return ((typeof test.lookup) == 'function')})(), 'The HashTable has an lookup method.');",
+        "assert((function() { let test = false; if (typeof HashTable !== 'undefined') { test = new HashTable() }; test.add('key', 'value'); return (test.lookup('key') == 'value')})(), 'The add method adds key value pairs and the lookup method returns the values associated with a given key.');",
+        "assert((function() { let test = false; if (typeof HashTable !== 'undefined') { test = new HashTable() }; test.add('key', 'value'); test.remove('key'); return (test.lookup('key') == null)})(), 'The remove method accepts a key as input and removes the associated key value pair.');",
+        "assert((function() { let test = false; if (typeof HashTable !== 'undefined') { test = new HashTable() }; called = 0; test.add('key1','value1'); test.add('key2','value2'); test.add('key3','value3'); return (called == 3)})(), 'Items are added using the hash function.');",
+        "assert((function() { let test = false; if (typeof HashTable !== 'undefined') { test = new HashTable() }; called = 0; test.add('key1','value1'); test.add('1key','value2'); test.add('ke1y','value3'); return (test.lookup('key1') == 'value1' && test.lookup('1key') == 'value2' && test.lookup('ke1y') == 'value3')})(), 'The hash table handles collisions.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d825c367417b2b2512c8f",
+      "title": "Implement Merge Sort",
+      "description": [
+        "Another intermediate sorting algorithm that is very common is merge sort. Like quick sort, merge sort also uses a divide-and-conquer, recursive methodology to sort an array. It takes advantage of the fact that it is relatively easy to sort two arrays as long as each is sorted in the first place. But we'll start with only one array as input, so how do we get to two sorted arrays from that? Well, we can recursively divide the original input in two until we reach the base case of an array with one item. A single-item array is naturally sorted, so then we can start combining. This combination will unwind the recursive calls that split the original array, eventually producing a final sorted array of all the elements. The steps of merge sort, then, are:",
+        "Recursively split the input array in half until a sub-array with only one element is produced.",
+        "Merge each sorted sub-array together to produce the final sorted array.",
+        "Merge sort is an efficient sorting method, with time complexity of O(nlog(n)). This algorithm is popular because it is performant and relatively easy to implement.",
+        "As an aside, this will be the last sorting algorithm we cover here. However, later in the section on tree data structures we will describe heap sort, another efficient sorting method that requires a binary heap in its implementation.",
+        "Instructions: Write a function mergeSort which takes an array of integers as input and returns an array of these integers in sorted order. A good way to implement this is to write one function, for instance merge, which is responsible for merging two sorted arrays, and another function, for instance mergeSort, which is responsible for the recursion that produces single-item arrays to feed into merge. Good luck!"
+      ],
+      "challengeSeed": [
+        "// generate a randomly filled array",
+        "let array = new Array();",
+        "(function createArray(size = 5) {",
+        "  array.push(+(Math.random() * 100).toFixed(0));",
+        "  return (size > 1) ? createArray(size - 1) : undefined;",
+        "})(25);",
+        "// change code below this line"
+      ],
+      "tests": [
+        "assert(typeof mergeSort == 'function', 'mergeSort is a function');",
+        "assert(isSorted(mergeSort([1,4,2,8,345,123,43,32,5643,63,123,43,2,55,1,234,92])), 'mergeSort returns a sorted array');"
+      ],
+      "tail": [
+        "function isSorted(arr) {",
+        "  let check = (i) => (i == arr.length - 1) ? true : (arr[i] > arr[i + 1]) ? false : check(i + 1);",
+        "  return check(0);",
+        "};"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d825c367417b2b2512c90",
+      "title": "Breadth-First Search",
+      "description": [
+        "So far, we've learned different ways of creating representations of graphs. What now? One natural question to have is what are the distances between any two nodes in the graph? Enter graph traversal algorithms.",
+        "Traversal algorithms are algorithms to traverse or visit nodes in a graph. One type of traversal algorithm is the breadth-first search algorithm.",
+        "This algorithm starts at one node, first visits all its neighbors that are one edge away, then goes on to visiting each of their neighbors.",
+        "Visually, this is what the algorithm is doing.",
+        "<img src='https://camo.githubusercontent.com/2f57e6239884a1a03402912f13c49555dec76d06/68747470733a2f2f75706c6f61642e77696b696d656469612e6f72672f77696b6970656469612f636f6d6d6f6e732f342f34362f416e696d617465645f4246532e676966'>",
+        "To implement this algorithm, you'll need to input a graph structure and a node you want to start at.",
+        "First, you'll want to be aware of the distances from the start node. This you'll want to start all your distances initially some large number, like Infinity. This gives a reference for the case where a node may not be reachable from your start node.",
+        "Next, you'll want to go from the start node to its neighbors. These neighbors are one edge away and at this point you should add one unit of distance to the distances you're keeping track of.",
+        "Last, an important data structure that will help implement the breadth-first search algorithm is the queue. This is an array where you can add elements to one end and remove elements from the other end. This is also known as a FIFO or First-In-First-Out data structure.",
+        "Instructions",
+        "Write a function bfs() that takes an adjacency matrix graph (a two-dimensional array) and a node label root as parameters. The node label will just be the integer value of the node between 0 and n - 1, where n is the total number of nodes in the graph.",
+        "Your function will output a JavaScript object key-value pairs with the node and its distance from the root. If the node could not be reached, it should have a distance of Infinity."
+      ],
+      "challengeSeed": [
+        "function bfs(graph, root) {",
+        "  // Distance object returned",
+        "  var nodesLen = {};",
+        "  ",
+        "  return nodesLen;",
+        "};",
+        "var exBFSGraph = [",
+        "  [0, 1, 0, 0],",
+        "  [1, 0, 1, 0],",
+        "  [0, 1, 0, 1],",
+        "  [0, 0, 1, 0]",
+        "];",
+        "console.log(bfs(exBFSGraph, 3));"
+      ],
+      "tests": [
+        "assert((function() { var graph = [[0, 1, 0, 0], [1, 0, 1, 0], [0, 1, 0, 1], [0, 0, 1, 0]]; var results = bfs(graph, 1); return isEquivalent(results, {0: 1, 1: 0, 2: 1, 3: 2})})(), 'message: The input graph <code>[[0, 1, 0, 0], [1, 0, 1, 0], [0, 1, 0, 1], [0, 0, 1, 0]]</code> with a start node of <code>1</code> should return <code>{0: 1, 1: 0, 2: 1, 3: 2}</code>');",
+        "assert((function() { var graph = [[0, 1, 0, 0], [1, 0, 1, 0], [0, 1, 0, 0], [0, 0, 0, 0]]; var results = bfs(graph, 1); return isEquivalent(results, {0: 1, 1: 0, 2: 1, 3: 2})})(), 'message: The input graph <code>[[0, 1, 0, 0], [1, 0, 1, 0], [0, 1, 0, 0], [0, 0, 0, 0]]</code> with a start node of <code>1</code> should return <code>{0: 1, 1: 0, 2: 1, 3: Infinity}</code>');",
+        "assert((function() { var graph = [[0, 1, 0, 0], [1, 0, 1, 0], [0, 1, 0, 1], [0, 0, 1, 0]]; var results = bfs(graph, 0); return isEquivalent(results, {0: 0, 1: 1, 2: 2, 3: 3})})(), 'message: The input graph <code>[[0, 1, 0, 0], [1, 0, 1, 0], [0, 1, 0, 1], [0, 0, 1, 0]]</code> with a start node of <code>0</code> should return <code>{0: 0, 1: 1, 2: 2, 3: 3}</code>');",
+        "assert((function() { var graph = [[0, 1], [1, 0]]; var results = bfs(graph, 0); return isEquivalent(results, {0: 0, 1: 1})})(), 'message: The input graph <code>[[0, 1], [1, 0]]</code> with a start node of <code>0</code> should return <code>{0: 0, 1: 1}</code>');"
+      ],
+      "tail": [
+        "// Source: http://adripofjavascript.com/blog/drips/object-equality-in-javascript.html",
+        "function isEquivalent(a, b) {",
+        "    // Create arrays of property names",
+        "    var aProps = Object.getOwnPropertyNames(a);",
+        "    var bProps = Object.getOwnPropertyNames(b);",
+        "    // If number of properties is different,",
+        "    // objects are not equivalent",
+        "    if (aProps.length != bProps.length) {",
+        "        return false;",
+        "    }",
+        "    for (var i = 0; i < aProps.length; i++) {",
+        "        var propName = aProps[i];",
+        "        // If values of same property are not equal,",
+        "        // objects are not equivalent",
+        "        if (a[propName] !== b[propName]) {",
+        "            return false;",
+        "        }",
+        "    }",
+        "    // If we made it this far, objects",
+        "    // are considered equivalent",
+        "    return true;",
+        "}"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d825c367417b2b2512c91",
+      "title": "Nodes in a Doubly Linked List",
+      "description": [
+        "A doubly linked list is similar to a linked list. The difference between these data structures is the information in the nodes, which store: the element, a reference to the previous node and a reference to the next node of the list.",
+        "Imagine that you're a moutaineer in a team that's trying to summit a mountain. There's a rope that connects you to the person in front of you and a rope that connects you to the person after you in the line. However, due to fog, you can only see the person directly ahead of you and the person directly behind you.",
+        "A doubly linked list node is similar to a person in this line. The person represents the element of the node and the rope connections between the mountaineers represent the references to the previous and next nodes of the list.",
+        "Instructions",
+        "We have created two nodes that represent the first two mountaineers (Joe and Cameron).",
+        "Create one new node that represents a new mountaineer (Donna) and manually add it to the line."
+      ],
+      "challengeSeed": [
+        "var Node = function(element){",
+        "  this.element = element;",
+        "  this.prev = null;",
+        "  this.next = null;",
+        "}",
+        "var Joe = new Node(\"Joe\");",
+        "var Cameron = new Node(\"Cameron\");",
+        "Joe.next = Cameron;",
+        "Cameron.prev = Joe;",
+        "// only add code below this line",
+        "// test your code",
+        "console.log(\"After Joe is \" + Joe.next.element);",
+        "console.log(\"Before Cameron is \" + Cameron.prev.element);"
+      ],
+      "tests": [
+        "assert(Cameron.next.element === \"Donna\", 'message: The <code>Cameron</code> node should reference to a <code>Donna</code> next node.');",
+        "assert(Donna.prev.element === \"Cameron\", 'message: The <code>Donna</code> node should reference to a <code>Cameron</code> prev node.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d825c367417b2b2512c92",
+      "title": "Inserting Nodes in a Doubly Linked List",
+      "description": [
+        "One of the most important methods in a Doubly Linked List implementation is the insert method. When a new node is inserted into the doubly linked list, the list's size is increased by one.",
+        "If the new node is the first element of the list, it should be referenced as the next element of the head and the previous element of the tail. If there are already nodes in the list, the new node should be referenced as the previous node of the tail and the next of the penultimate node of the list.",
+        "Instructions",
+        "Create a method that inserts nodes to the list.",
+        "We've created the auxiliary methods:",
+        "getSizeOfList - returns the size of the list.",
+        "isListEmpty - returns true if the list is empty.",
+        "printList - prints the list.",
+        "getHeadNode - returns the head node of the list.",
+        "getTailNode - returns the tail node of the list.",
+        "Note",
+        "The size of the list should increase when you insert a new node."
+      ],
+      "challengeSeed": [
+        "function DoublyLinkedList(){",
+        "  var length = 0;",
+        "  var head = new Node(null);",
+        "  var tail = new Node(null);",
+        "  head.next = tail;",
+        "  tail.prev = head;",
+        "  ",
+        "  // constructor for a list node",
+        "  function Node(element){",
+        "    this.element = element;",
+        "    this.next = null;",
+        "    this.prev = null;",
+        "  }",
+        "  ",
+        "       // get the head node of the list",
+        "  this.getHeadNode = function(){",
+        "    return head;",
+        "  }",
+        "  ",
+        "  // get the tail node of the list",
+        "  this.getTailNode = function(){",
+        "    return tail;",
+        "  }",
+        "  // get the size of the list",
+        "  this.getSizeOfList = function(){",
+        "    return length;",
+        "  }",
+        "  ",
+        "  // check if a list is empty",
+        "  this.isListEmpty = function (){",
+        "    return (head.next === tail);",
+        "  }",
+        "  ",
+        "  // only add code below this line",
+        "  ",
+        "  // only add code above this line",
+        "  ",
+        "  // prints the contents of the doubly linked list",
+        "  this.printList = function(){",
+        "    var current = head;",
+        "    var list=\"[\";",
+        "    ",
+        "    while(current){",
+        "      if(current.element!==null){",
+        "        list = list + current.element;",
+        "        if(current.next.element!== null){",
+        "          list=list+",
+        ";",
+        "        }",
+        "      }",
+        "      current = current.next;",
+        "    }",
+        "      list = list + \"]\";",
+        "      return list;",
+        "    }",
+        "    // test your code",
+        "    var conga = new DoublyLinkedList();",
+        "  conga.insert(\"Joe\");",
+        "  conga.insert(\"Cameron\");",
+        "  conga.printList();",
+        "}"
+      ],
+      "tests": [
+        "assert((function(){var conga = new DoublyLinkedList(); return (typeof conga.insert === 'function')}()), 'message: Your <code>DoublyLinkedList</code> class should have a <code>insert</code> method.');",
+        "assert((function(){var conga = new DoublyLinkedList(); conga.insert('Joe'); return conga.getHeadNode().next.element === 'Joe'}()), 'message: Your <code>DoublyLinkedList</code> class should contain the node <code>Joe</code>.');",
+        "assert((function(){var conga = new DoublyLinkedList(); conga.insert('Joe'); return conga.isListEmpty() === false}()), 'message: Your <code>DoublyLinkedList</code> should not be empty.');",
+        "assert((function(){var conga = new DoublyLinkedList(); conga.insert('Joe'); return conga.getSizeOfList() > 0}()), 'message: Your <code>DoublyLinkedList</code> class should contain at least 1 node.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d825c367417b2b2512c93",
+      "title": "Removing Nodes From a Doubly Linked List",
+      "description": [
+        "A method that removes items is an essential component of every Doubly Linked List implementation.",
+        "When a node is removed from a Doubly Linked List, the references that connect it to its neighbors should be updated and the number of elements of the list should be decremented.",
+        "For example:",
+        "You have the nodes {cat, dog, bird} in a Doubly Linked List and you remove the dog node. The cat.next reference should now point to the bird node and the bird.prev reference should now point to the cat node. Then, the size of the list should decrease by 1.",
+        "Instructions",
+        "Create a method that removes a node from the list.",
+        "We've created the auxiliary methods:",
+        "getSizeOfList - returns the size of the list",
+        "isListEmpty - returns true if the list is empty.",
+        "printList - prints the list.",
+        "getHeadNode - returns the head node of the list.",
+        "getTailNode - returns the tail node of the list.",
+        "Note",
+        "The size of the list should be decremented when you remove a node."
+      ],
+      "challengeSeed": [
+        "function DoublyLinkedList(){",
+        "  var length = 0;",
+        "  var head = new Node(null);",
+        "  var tail = new Node(null);",
+        "  head.next = tail;",
+        "  tail.prev = head;",
+        "  ",
+        "  // constructor for a list node",
+        "  function Node(element){",
+        "    this.element = element;",
+        "    this.next = null;",
+        "    this.prev = null;",
+        "  }",
+        "  ",
+        "  // get the head node of the list",
+        "  this.getHeadNode = function(){",
+        "    return head;",
+        "  }",
+        "  ",
+        "  // get the tail node of the list",
+        "  this.getTailNode = function(){",
+        "    return tail;",
+        "  }",
+        "  ",
+        "  // get the size of the list",
+        "  this.getSizeOfList = function(){",
+        "    return length;",
+        "  }",
+        "  ",
+        "  // check if a list is empty",
+        "  this.isListEmpty = function (){",
+        "    return (head.next === tail);",
+        "  }",
+        "  ",
+        "  this.insert = function(element){",
+        "    var node = new Node(element);",
+        "    ",
+        "    var current = head;",
+        "      ",
+        "    while(current.next !== tail){",
+        "      current = current.next; ",
+        "    }",
+        "    ",
+        "    current.next = node;",
+        "    node.prev = current;",
+        "    node.next = tail;",
+        "    tail.prev = node;",
+        "    ",
+        "    length++;",
+        "  }",
+        "  ",
+        "  // only add code below this line",
+        "  ",
+        "  // only add code above this line",
+        "  ",
+        "  // prints the contents of the doubly linked list",
+        "  this.printList = function(){",
+        "    var current = head;",
+        "    var list=\"[\";",
+        "    ",
+        "    while(current){",
+        "      if(current.element!==null){",
+        "        list = list + current.element;",
+        "        if(current.next.element!== null){",
+        "          list=list+",
+        ";",
+        "        }",
+        "      }",
+        "      current = current.next;",
+        "    }",
+        "      list = list + \"]\";",
+        "      return list;",
+        "    }",
+        "}",
+        "    // test your code",
+        "    var conga = new DoublyLinkedList();",
+        "  conga.insert(\"Joe\");",
+        "  conga.insert(\"Cameron\");",
+        "  conga.printList();",
+        "}"
+      ],
+      "tests": [
+        "assert((function(){var conga = new DoublyLinkedList(); return (typeof conga.remove === 'function')}()), 'message: Your <code>DoublyLinkedList</code> class should have a <code>remove</code> method.');",
+        "assert((function(){var conga = new DoublyLinkedList(); conga.insert('Joe'); conga.remove('Joe'); return conga.getSizeOfList() === 0}()), 'message: Your <code>DoublyLinkedList</code> class should have 0 elements.');",
+        "assert((function(){var conga = new DoublyLinkedList(); conga.insert('Joe'); conga.remove('Joe'); return conga.isListEmpty() === true}()), 'message: Your <code>DoublyLinkedList</code> should be empty.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d825d367417b2b2512c94",
+      "title": "Searching For Nodes In a Doubly Linked List",
+      "description": [
+        "When you have a lot of nodes in a Doubly Linked List, you'll likely need a method to search for a node in your list.",
+        "Since Doubly Linked Lists can be traversed from front to back or from back to front, you can search for nodes in both directions.",
+        "Instructions",
+        "Create a method that searches for a node in the list and returns its index on the list.",
+        "We've created the auxiliary methods:",
+        "getSizeOfList - returns the size of the list",
+        "isListEmpty - returns true if the list is empty.",
+        "printList - prints the list.",
+        "getHeadNode - returns the head node of the list.",
+        "getTailNode - returns the tail node of the list.",
+        "Note",
+        "If the node you're looking for is not in the Doubly Linked List, your search method should return -1.",
+        "The head of the list has index 0."
+      ],
+      "challengeSeed": [
+        "function DoublyLinkedList(){",
+        "  var length = 0;",
+        "  var head = new Node(null);",
+        "  var tail = new Node(null);",
+        "  head.next = tail;",
+        "  tail.prev = head;",
+        "  ",
+        "  // constructor for a list node",
+        "  function Node(element){",
+        "    this.element = element;",
+        "    this.next = null;",
+        "    this.prev = null;",
+        "  }",
+        "  ",
+        "  // get the head node of the list",
+        "  this.getHeadNode = function(){",
+        "    return head;",
+        "  }",
+        "  ",
+        "  // get the tail node of the list",
+        "  this.getTailNode = function(){",
+        "    return tail;",
+        "  }",
+        "  ",
+        "  // get the size of the list",
+        "  this.getSizeOfList = function(){",
+        "    return length;",
+        "  }",
+        "  ",
+        "  // check if a list is empty",
+        "  this.isListEmpty = function (){",
+        "    return (head.next === tail);",
+        "  }",
+        "  // insert an element at the end of the list",
+        "  this.insert = function(element){",
+        "    var node = new Node(element);",
+        "    ",
+        "    var current = head;",
+        "      ",
+        "    while(current.next !== tail){",
+        "      current = current.next; ",
+        "    }",
+        "    ",
+        "    current.next = node;",
+        "    node.prev = current;",
+        "    node.next = tail;",
+        "    tail.prev = node;",
+        "    ",
+        "    length++;",
+        "  }",
+        "  ",
+        "  // remove an element from the list",
+        "  this.remove = function(element){",
+        "    var current = head;",
+        "    ",
+        "    while(current.element !== element){",
+        "      current = current.next;",
+        "    }",
+        "    ",
+        "    current.prev.next = current.next;",
+        "    current.next.prev = current.prev;",
+        "    ",
+        "    length--;",
+        "  }",
+        "    // only add code below this line",
+        "  ",
+        "  // only add code above this line",
+        "  ",
+        "  // prints the contents of the doubly linked list",
+        "  this.printList = function(){",
+        "    var current = head;",
+        "    var list=\"[\";",
+        "    ",
+        "    while(current){",
+        "      if(current.element!==null){",
+        "        list = list + current.element;",
+        "        if(current.next.element!== null){",
+        "          list=list+",
+        ";",
+        "        }",
+        "      }",
+        "      current = current.next;",
+        "    }",
+        "      list = list + \"]\";",
+        "      return list;",
+        "    }",
+        "}",
+        "    // test your code",
+        "    var conga = new DoublyLinkedList();",
+        "  conga.insert(\"Joe\");",
+        "    console.log(conga.search(\"Joe\"));",
+        "}"
+      ],
+      "tests": [
+        "assert((function(){var conga = new DoublyLinkedList(); return (typeof conga.search === 'function')}()), 'message: Your <code>DoublyLinkedList</code> class should have a <code>search</code> method.');",
+        "assert((function(){var conga = new DoublyLinkedList(); conga.add('Joe'); return conga.search('Joe') === 1}()), 'message: Your <code>DoublyLinkedList</code> search method should find <code>Joe</code> at index 1.');",
+        "assert((function(){var conga = new DoublyLinkedList(); conga.add('Joe'); return conga.search('Cameron') === -1}()), 'message: Your <code>DoublyLinkedList</code> search method should return -1 (element not found).');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    },
+    {
+      "id": "587d825d367417b2b2512c96",
+      "title": "Depth-First Search",
+      "description": [
+        "Similar to breadth-first search, here we will learn about another graph traversal algorithm called depth-first search.",
+        "Whereas the breadth-first search searches incremental edge lengths away from the source node, depth-first search first goes down a path of edges as far as it can.",
+        "Once it reaches one end of a path, the search will backtrack to the last node with an un-visited edge path and continue searching.",
+        "Visually, this is what the algorithm is doing where the top node is the starting point of the search.",
+        "<img src='https://camo.githubusercontent.com/aaad9e39961daf34d967c616edeb50abf3bf1235/68747470733a2f2f75706c6f61642e77696b696d656469612e6f72672f77696b6970656469612f636f6d6d6f6e732f372f37662f44657074682d46697273742d5365617263682e676966'>",
+        "A simple output of this algorithm is a list of nodes which are reachable from a given node. So when implementing this algorithm, you'll need to keep track of the nodes you visit.",
+        "Instructions",
+        "Write a function dfs() that takes an undirected, adjacency matrix graph and a node label root as parameters. The node label will just be the numeric value of the node between 0 and n - 1, where n is the total number of nodes in the graph.",
+        "Your function should output an array of all nodes reachable from root."
+      ],
+      "challengeSeed": [
+        "function dfs(graph, root) {",
+        "  ",
+        "};",
+        "var exDFSGraph = [",
+        "  [0, 1, 0, 0],",
+        "  [1, 0, 1, 0],",
+        "  [0, 1, 0, 1],",
+        "  [0, 0, 1, 0]",
+        "];",
+        "console.log(dfs(exDFSGraph, 3));"
+      ],
+      "tests": [
+        "assert.deepEqual((function() { var graph = [[0, 1, 0, 0], [1, 0, 1, 0], [0, 1, 0, 1], [0, 0, 1, 0]]; return dfs(graph, 1);})(), [0, 1, 2, 3], 'message: The input graph <code>[[0, 1, 0, 0], [1, 0, 1, 0], [0, 1, 0, 1], [0, 0, 1, 0]]</code> with a start node of <code>1</code> should return <code>[0, 1, 2, 3]</code>.');",
+        "assert.deepEqual((function() { var graph = [[0, 1, 0, 0], [1, 0, 1, 0], [0, 1, 0, 0], [0, 0, 0, 0]]; return dfs(graph, 3);})(), [3], 'message: The input graph <code>[[0, 1, 0, 0], [1, 0, 1, 0], [0, 1, 0, 0], [0, 0, 0, 0]]</code> with a start node of <code>1</code> should return <code>[3]</code>.');",
+        "assert.deepEqual((function() { var graph = [[0, 1, 0, 0], [1, 0, 0, 0], [0, 0, 0, 1], [0, 0, 1, 0]]; return dfs(graph, 3);})(), [2, 3], 'message: The input graph <code>[[0, 1, 0, 0], [1, 0, 0, 0], [0, 0, 0, 1], [0, 0, 1, 0]]</code> with a start node of <code>3</code> should return <code>[2, 3]</code>.');",
+        "assert.deepEqual((function() { var graph = [[0, 1, 0, 0], [1, 0, 0, 0], [0, 0, 0, 1], [0, 0, 1, 0]]; return dfs(graph, 0);})(), [0, 1], 'message: The input graph <code>[[0, 1, 0, 0], [1, 0, 0, 0], [0, 0, 0, 1], [0, 0, 1, 0]]</code> with a start node of <code>0</code> should return <code>[0, 1]</code>.');"
+      ],
+      "type": "waypoint",
+      "solutions": [],
+      "challengeType": 0,
+      "translations": {}
+    }
+  ]
+}
\ No newline at end of file
diff --git a/seed/challenges/09-extra-practice-projects-and-challenges/extra-practice-projects.json b/seed/challenges/09-extra-practice-projects-and-challenges/extra-practice-projects.json
new file mode 100644
index 00000000000000..467f2112d2e640
--- /dev/null
+++ b/seed/challenges/09-extra-practice-projects-and-challenges/extra-practice-projects.json
@@ -0,0 +1,488 @@
+{
+  "name": "Extra Practice Projects",
+  "order": 1,
+  "time": "500 hours",
+  "helpRoom": "HelpFrontEnd",
+  "challenges": [
+    {
+      "id": "bd7158d8c442eddfaeb5bd10",
+      "title": "Show the Local Weather",
+      "description": [
+        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='http://codepen.io/FreeCodeCamp/full/bELRjV' target='_blank'>http://codepen.io/FreeCodeCamp/full/bELRjV</a>.",
+        "Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
+        "<strong>User Story:</strong> I can see the weather in my current location.",
+        "<strong>User Story:</strong> I can see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather.",
+        "<strong>User Story:</strong> I can push a button to toggle between Fahrenheit and Celsius.",
+        "We recommend using the <a href='https://openweathermap.org/current#geo' target='_blank'>Open Weather API</a>. This will require creating a free API key. Normally you want to avoid exposing API keys on CodePen, but we haven't been able to find a keyless API for weather.",
+        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
+        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen.",
+        "You can get feedback on your project by sharing it with your friends on Facebook."
+      ],
+      "challengeSeed": [
+        "GCLiJU-vvVc"
+      ],
+      "tests": [],
+      "type": "zipline",
+      "challengeType": 3,
+      "isRequired": false,
+      "translations": {
+        "es": {
+          "title": "Muestra el clima local",
+          "description": [
+            "<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='http://codepen.io/FreeCodeCamp/full/bELRjV' target='_blank'>http://codepen.io/FreeCodeCamp/full/bELRjV</a>.",
+            "Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites.",
+            "<span class='text-info'>Historia de usuario:</span> Pedo obtener información acerca del clima en mi localización actual.",
+            "<span class='text-info'>Historia de usuario:</span> Puedo ver un icono diferente o una imagen de fondo diferente (e.g. montaña con nieve, desierto caliente) dependiendo del clima.",
+            "<span class='text-info'>Historia de usuario:</span> Puedo pulsar un botón para cambiar la unidad de temperatura de grados Fahrenheit a Celsius y viceversa.",
+            "Recomendamos utilizar <a href='https://openweathermap.org/current#geo' target='_blank'>Open Weather API</a>. Al utilizarlo tendrás que crear una llave API gratuita. Normalmente debes evitar exponer llaves de API en CodePen, pero por el momento no hemos encontrado un API de clima que no requiera llave.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado.",
+            "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un enlace a tu CodePen.",
+            "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
+          ]
+        },
+        "ru": {
+          "title": "Покажите местную погоду",
+          "description": [
+            "<span class='text-info'>Задание:</span> Создайте <a href='https://codepen.io' target='_blank'>CodePen.io</a> который успешно копирует вот этот: <a href='http://codepen.io/FreeCodeCamp/full/bELRjV' target='_blank'>http://codepen.io/FreeCodeCamp/full/bELRjV</a>.",
+            "<span class='text-info'>Правило #1:</span> Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
+            "<span class='text-info'>Правило #2:</span> Можете использовать любые библиотеки или API, которые потребуются.",
+            "<span class='text-info'>Правило #3:</span> Воссоздайте функционал приведенного примера и не стесняйтесь добавить что-нибудь от себя.",
+            "Реализуйте следующие <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>пользовательские истории</a>, сделайте также бонусные по желанию:",
+            "<span class='text-info'>Пользовательская история:</span> В качестве пользователя, я могу узнать погоду с учетом моего текущего местоположения.",
+            "<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу в зависимости от погоды видеть различные температурные значки.",
+            "<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу в зависимости от погоды видеть различные фоновые изображения (снежные горы, знойная пустыня).",
+            "<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу нажать на кнопку чтобы переключится между градусами по Цельсию или по Фаренгейту.",
+            "Если что-то не получается, воспользуйтесь <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a>.",
+            "Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen. Если вы программировали с кем-то в паре, также добавьте имя вашего напарника.",
+            "Если вы хотите получить немедленную оценку вашего проекта, нажмите эту кнопку и добавьте ссылку на ваш CodePen. В противном случае мы проверим его перед тем как вы приступите к проектам для некоммерческих организаций.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
+          ]
+        }
+      }
+    },
+    {
+      "id": "bd7158d8c442eddfaeb5bd19",
+      "title": "Build a Wikipedia Viewer",
+      "description": [
+        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/FreeCodeCamp/full/wGqEga/' target='_blank'>https://codepen.io/FreeCodeCamp/full/wGqEga/</a>.",
+        "Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
+        "<strong>User Story:</strong> I can search Wikipedia entries in a search box and see the resulting Wikipedia entries.",
+        "<strong>User Story:</strong> I can click a button to see a random Wikipedia entry.",
+        "<span class='text-info'>Hint #1:</span> Here's a URL you can use to get a random Wikipedia article: <code>https://en.wikipedia.org/wiki/Special:Random</code>.",
+        "<span class='text-info'>Hint #2:</span> Here's an entry on using Wikipedia's API: <code>https://www.mediawiki.org/wiki/API:Main_page</code>.",
+        "<span class='text-info'>Hint #3:</span> Use this <a href='https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=jsonfm' target='_blank'>link</a> to experiment with Wikipedia's API.",
+        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
+        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen.",
+        "You can get feedback on your project by sharing it with your friends on Facebook."
+      ],
+      "challengeSeed": [
+        "wJhcPwVYA1g"
+      ],
+      "tests": [],
+      "type": "zipline",
+      "challengeType": 3,
+      "isRequired": false,
+      "translations": {
+        "es": {
+          "title": "Crea un buscador de Wikipedia",
+          "description": [
+            "<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/FreeCodeCamp/full/wGqEga/' target='_blank'>https://codepen.io/FreeCodeCamp/full/wGqEga/</a>.",
+            "Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.",
+            "<span class='text-info'>Historia de usuario:</span> Pedo obtener información acerca del clima en mi localización actual.",
+            "<span class='text-info'>Historia de usuario:</span> Puedo ver un icono diferente o una imagen de fondo diferente (e.g. montaña con nieve, desierto caliente) dependiendo del clima.",
+            "<span class='text-info'>Historia de usuario:</span> Puedo pulsar un botón para cambiar la unidad de temperatura de grados Fahrenheit a Celsius y viceversa.",
+            "<span class='text-info'>Historia de usuario:</span> Puedo buscar entradas en Wikipedia en un cuadro de búsqueda y ver las entradas de Wikipedia resultantes.",
+            "<span class='text-info'>Historia de usuario:</span>Puedo pulsar un botón para ver un artículo aleatorio de Wikipedia.",
+            "<span class='text-info'>Pista 1:</span> Aquí está una URL donde puedes ver una entrada aleatoria de Wikipedia: <code>https://en.wikipedia.org/wiki/Special:Random<</code>.",
+            "<span class='text-info'>Pista 2:</span> Este es un artículo muy útil relativo al uso del API de Wikipedia: <code>https://www.mediawiki.org/wiki/API:Main_page</code>.",
+            "<span class='text-info'>Pista 3:</span> Usa este <a href='https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=jsonfm' target='_blank'>enlace</a> para experimentar con el API de Wikipedia.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado.",
+            "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un enlace a tu CodePen.",
+            "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
+          ]
+        }
+      }
+    },
+    {
+      "id": "bd7158d8c442eddfaeb5bd1f",
+      "title": "Use the Twitch.tv JSON API",
+      "description": [
+        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/FreeCodeCamp/full/Myvqmo/' target='_blank'>https://codepen.io/FreeCodeCamp/full/Myvqmo/</a>.",
+        "Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
+        "<strong>User Story:</strong> I can see whether Free Code Camp is currently streaming on Twitch.tv.",
+        "<strong>User Story:</strong> I can click the status output and be sent directly to the Free Code Camp's Twitch.tv channel.",
+        "<strong>User Story:</strong> if a Twitch user is currently streaming, I can see additional details about what they are streaming.",
+        "<strong>User Story:</strong> I will see a placeholder notification if a streamer has closed their Twitch account (or the account never existed). You can verify this works by adding brunofin and comster404 to your array of Twitch streamers.",
+        "<strong>Hint:</strong> See an example call to Twitch.tv's JSONP API at <a href='http://forum.freecodecamp.com/t/use-the-twitchtv-json-api/19541' target='_blank'>http://forum.freecodecamp.com/t/use-the-twitchtv-json-api/19541</a>.",
+        "<strong>Hint:</strong> The relevant documentation about this API call is here: <a href='https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel' target='_blank'>https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel</a>.",
+        "<strong>Hint:</strong> Here's an array of the Twitch.tv usernames of people who regularly stream: <code>[\"ESL_SC2\", \"OgamingSC2\", \"cretetion\", \"freecodecamp\", \"storbeck\", \"habathcx\", \"RobotCaleb\", \"noobs2ninjas\"]</code>",
+        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
+        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen.",
+        "You can get feedback on your project by sharing it with your friends on Facebook."
+      ],
+      "challengeSeed": [
+        "6WrbY1d-IHI"
+      ],
+      "tests": [],
+      "type": "zipline",
+      "challengeType": 3,
+      "isRequired": false,
+      "translations": {
+        "es": {
+          "title": "Usa el API JSON de Twitch.tv",
+          "description": [
+            "<span class='text-info'>Objetivo:</span> Crea una aplicación con <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/FreeCodeCamp/full/Myvqmo/' target='_blank'>https://codepen.io/FreeCodeCamp/full/Myvqmo/</a>.",
+            "Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.",
+            "<span class='text-info'>Historia de usuario:</span> Puedo verificar si Free Code Camp está transmitiendo actualmente en Twitch.tv",
+            "<span class='text-info'>Historia de usuario:</span> Puedo pulsar el estatus y ser enviado directamente al canal de Free Code Camp en Twitch.tv.",
+            "<span class='text-info'>Historia de usuario:</span> Si un usuario Twitch está transmitiendo actualmente, puedo ver detalles adicionales acerca del contenido que están transmitiendo.",
+            "<span class='text-info'>Historia de usuario:</span> Puedo ver una notificación si el usuario ha cerrado su cuenta de Twitch (o si la cuenta nunca ha existido). Puedes verificar si esto funciona agregando brunofin y comster404 a tu vector de usuarios de Twitch.",
+            "<span class='text-info'>Pista:</span> Obseva una llamada de ejemplo al API JSONP de Twitch.tv en <code>http://forum.freecodecamp.com/t/use-the-twitchtv-json-api/19541</code>.",
+            "<span class='text-info'>Pista:</span> La documentación relevante sobre esta llamada al API está aquí: <a href='https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel' target='_blank'>https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel</a>.",
+            "<span class='text-info'>Pista:</span> Aquí está un vector de usuarios en Twitch.tv que regularmente transmiten sobre programación: <code>[\"ESL_SC2\", \"OgamingSC2\", \"cretetion\", \"freecodecamp\", \"storbeck\", \"habathcx\", \"RobotCaleb\", \"noobs2ninjas\"]</code>",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado.",
+            "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un enlace a tu CodePen.",
+            "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiendolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
+          ]
+        },
+        "ru": {
+          "title": "Используйте Twitch.tv JSON API",
+          "description": [
+            "<span class='text-info'>Задание:</span> Создайте <a href='https://codepen.io' target='_blank'>CodePen.io</a> который успешно копирует вот этот: <a href='https://codepen.io/FreeCodeCamp/full/Myvqmo/' target='_blank'>https://codepen.io/FreeCodeCamp/full/Myvqmo/</a>.",
+            "<span class='text-info'>Правило #1:</span> Не подсматривайте код приведенного на CodePen примера. Напишите его самостоятельно.",
+            "<span class='text-info'>Правило #2:</span> Можете использовать любые библиотеки или API, которые потребуются.",
+            "<span class='text-info'>Правило #3:</span> Воссоздайте функционал приведенного примера и не стесняйтесь добавить что-нибудь от себя.",
+            "Реализуйте следующие <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>пользовательские истории</a>, сделайте также бонусные по желанию:",
+            "<span class='text-info'>Пользовательская история:</span> В качестве пользователя, я могу увидеть идет ли в данный момент на Twitch.tv трансляция Free Code Camp.",
+            "<span class='text-info'>Пользовательская история:</span> В качестве пользователя, я могу, кликнув на описание трансляции, перейти на канал Free Code Camp.",
+            "<span class='text-info'>Пользовательская история:</span> В качестве пользователя, я могу видеть дополнительную информацию о текущей трансляции Free Code Camp.",
+            "<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу произвести поиск среди перечисленных каналов.",
+            "<span class='text-info'>Бонусная пользовательская история:</span> В качестве пользователя, я могу видеть уведомление, если создатель канала закрыл свой аккаунт на Twitch.tv. Добавьте в массив имена пользователей brunofin и comster404, чтобы убедиться, что эта функция реализована правильно.",
+            "<span class='text-info'>Подсказка:</span> Пример запроса к Twitch.tv JSON API: <code>https://api.twitch.tv/kraken/streams/freecodecamp</code>.",
+            "<span class='text-info'>Подсказка:</span> Документацию об этом запросе можно найти по ссылке: <a href='https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel' target='_blank'>https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel</a>.",
+            "<span class='text-info'>Подсказка:</span> В этом массиве приведены имена пользователей, которые регулярно пишут код онлайн: <code>[\"ESL_SC2\", \"OgamingSC2\", \"cretetion\", \"freecodecamp\", \"storbeck\", \"habathcx\", \"RobotCaleb\", \"noobs2ninjas\"]</code>",
+            "Если что-то не получается, воспользуйтесь <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a>.",
+            "Когда выполните задание кликните кнопку \"I've completed this challenge\" и добавьте ссылку на ваш CodePen. Если вы программировали с кем-то в паре, также добавьте имя вашего напарника.",
+            "Если вы хотите получить немедленную оценку вашего проекта, нажмите эту кнопку и добавьте ссылку на ваш CodePen. В противном случае мы проверим его перед тем как вы приступите к проектам для некоммерческих организаций.<br><br><a class='btn btn-primary btn-block' href='https://twitter.com/intent/tweet?text=Check%20out%20the%20project%20I%20just%20built%20with%20%40FreeCodeCamp:%20%0A%20%23LearnToCode%20%23JavaScript' target='_blank'>Click here then add your link to your tweet's text</a>"
+          ]
+        }
+      }
+    },
+    {
+      "id": "bd7158d8c442eedfaeb5bd1c",
+      "title": "Build a Tic Tac Toe Game",
+      "description": [
+        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/FreeCodeCamp/full/KzXQgy/' target='_blank'>https://codepen.io/FreeCodeCamp/full/KzXQgy/</a>.",
+        "Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
+        "<strong>User Story:</strong> I can play a game of Tic Tac Toe with the computer.",
+        "<strong>User Story:</strong> My game will reset as soon as it's over so I can play again.",
+        "<strong>User Story:</strong> I can choose whether I want to play as X or O.",
+        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
+        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen.",
+        "You can get feedback on your project by sharing it with your friends on Facebook."
+      ],
+      "challengeSeed": [
+        "Ia69O1ZNGEg"
+      ],
+      "tests": [],
+      "type": "zipline",
+      "challengeType": 3,
+      "isRequired": false,
+      "translations": {
+        "es": {
+          "title": "Crea un juego de Tic Tac Toe",
+          "description": [
+            "<span class='text-info'>Objetivo:</span> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/FreeCodeCamp/full/KzXQgy/' target='_blank'>https://codepen.io/FreeCodeCamp/full/KzXQgy/</a>.",
+            "Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.",
+            "<span class='text-info'>Historia de usuario:</span> Puedo jugar un juego de Tic Tac Toe contra el computador.",
+            "<span class='text-info'>Historia de usuario:</span> Mi juego se reiniciará tan pronto como termine para poder jugar de nuevo.",
+            "<span class='text-info'>Historia de usuario:</span> Puedo elegir si quiero jugar como X o como O.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado.",
+            "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un enlace a tu CodePen.",
+            "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
+          ]
+        }
+      }
+    },
+    {
+      "id": "bd7158d8c442eddfaeb5bd1c",
+      "title": "Build a Simon Game",
+      "description": [
+        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/Em-Ant/full/QbRyqq/' target='_blank'>https://codepen.io/FreeCodeCamp/full/obYBjE</a>.",
+        "Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
+        "<strong>User Story:</strong> I am presented with a random series of button presses.",
+        "<strong>User Story:</strong> Each time I input a series of button presses correctly, I see the same series of button presses but with an additional step.",
+        "<strong>User Story:</strong> I hear a sound that corresponds to each button both when the series of button presses plays, and when I personally press a button.",
+        "<strong>User Story:</strong> If I press the wrong button, I am notified that I have done so, and that series of button presses starts again to remind me of the pattern so I can try again.",
+        "<strong>User Story:</strong> I can see how many steps are in the current series of button presses.",
+        "<strong>User Story:</strong> If I want to restart, I can hit a button to do so, and the game will return to a single step.",
+        "<strong>User Story:</strong> I can play in strict mode where if I get a button press wrong, it notifies me that I have done so, and the game restarts at a new random series of button presses.",
+        "<strong>User Story:</strong> I can win the game by getting a series of 20 steps correct. I am notified of my victory, then the game starts over.",
+        "<strong>Hint:</strong> Here are mp3s you can use for each button: <code>https://s3.amazonaws.com/freecodecamp/simonSound1.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound2.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound3.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound4.mp3</code>.",
+        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
+        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen.",
+        "You can get feedback on your project by sharing it with your friends on Facebook."
+      ],
+      "challengeSeed": [
+        "tAPut8a47bA"
+      ],
+      "tests": [],
+      "type": "zipline",
+      "challengeType": 3,
+      "isRequired": false,
+      "translations": {
+        "es": {
+          "title": "Construye un juego de Simon",
+          "description": [
+            "<span class='text-info'>Objetivo:</span> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> cuya funcionalidad sea similar a la de esta: <a href='https://codepen.io/Em-Ant/full/QbRyqq/' target='_blank'>https://codepen.io/Em-Ant/full/QbRyqq/</a>.",
+            "Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o APIs que necesites. Dale tu estilo personal.",
+            "<span class='text-info'>Historia de usuario:</span> Se me presenta una serie aleatoria de pulsaciones a botones.",
+            "<span class='text-info'>Historia de usuario:</span> Cada vez que presiono una secuencia de pulsaciones correctamente, veo que vuelve a ejecutarse la misma serie de pulsaciones con un paso adicional.",
+            "<span class='text-info'>Historia de usuario:</span> Escucho un sonido que corresponde a cada botón cuando se ejecuta una secuencia de pulsaciones, así como cuando yo presiono un botón.",
+            "<span class='text-info'>Historia de usuario:</span> Si presiono el botón equivocado, se me notifica sobre mi error, y se ejecuta de nuevo la serie correcta de pulsaciones para recordarme cuál es la secuencia correcta, tras lo cual puedo intentar de nuevo.",
+            "<span class='text-info'>Historia de usuario:</span> Puedo ver cuántos pasos hay en la serie de pulsaciones actual.",
+            "<span class='text-info'>Historia de usuario:</span> Si deseo reiniciar, puedo pulsar un botón para hacerlo, y el juego comenzará desde una secuencia con un solo paso.",
+            "<span class='text-info'>Historia de usuario:</span> Puedo jugar en modo estricto donde si presiono el botón equivocado, se me notifica de mi error, y el juego vuelve a comenzar con una nueva serie aleatoria de colores.",
+            "<span class='text-info'>Historia de usuario:</span> Puedo ganar el juego si completo 20 pasos correctos. Se me notifica sobre mi victoria, tras lo cual el juego se reinicia.",
+            "<span class='text-info'>Pista:</span> Aquí hay algunos mp3s que puedes utilizar para tus botones: <code>https://s3.amazonaws.com/freecodecamp/simonSound1.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound2.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound3.mp3</code>, <code>https://s3.amazonaws.com/freecodecamp/simonSound4.mp3</code>.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Leer-Buscar-Preguntar</a> si te sientes atascado.",
+            "Cuando hayas terminado, pulsa el botón de \"I've completed this challenge\" e incluye un enlace a tu CodePen.",
+            "Puedes obtener retroalimentación sobre tu proyecto por parte de otros campistas, compartiéndolo en nuestra <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Sala de chat para revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
+          ]
+        }
+      }
+    },
+    {
+      "id": "bd7156d8c242eddfaeb5bd13",
+      "title": "Build a Camper Leaderboard",
+      "description": [
+        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/FreeCodeCamp/full/eZGMjp/' target='_blank'>https://codepen.io/FreeCodeCamp/full/eZGMjp/</a>.",
+        "Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
+        "<strong>User Story:</strong> I can see a table of the Free Code Camp campers who've earned the most brownie points in the past 30 days.",
+        "<strong>User Story:</strong> I can see how many brownie points they've earned in the past 30 days, and how many they've earned total.",
+        "<strong>User Story:</strong> I can toggle between sorting the list by how many brownie points they've earned in the past 30 days and by how many brownie points they've earned total.",
+        "<strong>Hint:</strong> To get the top 100 campers for the last 30 days: <a href='https://fcctop100.herokuapp.com/api/fccusers/top/recent' target='_blank'>https://fcctop100.herokuapp.com/api/fccusers/top/recent</a>.",
+        "<strong>Hint:</strong> To get the top 100 campers of all time: <a href='https://fcctop100.herokuapp.com/api/fccusers/top/alltime' target='_blank'>https://fcctop100.herokuapp.com/api/fccusers/top/alltime</a>.",
+        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
+        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. ",
+        "You can get feedback on your project by sharing it with your friends on Facebook."
+      ],
+      "releasedOn": "January 1, 2016",
+      "challengeSeed": [
+        "LJQcFNo_-QY"
+      ],
+      "tests": [],
+      "type": "zipline",
+      "isRequired": false,
+      "challengeType": 3,
+      "translations": {
+        "es": {
+          "title": "Crea un marcador para los campistas",
+          "description": [
+            "<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/FreeCodeCamp/full/eZGMjp/' target='_blank'>https://codepen.io/FreeCodeCamp/full/eZGMjp/</a>.",
+            "Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
+            "<strong>Historia de usuario:</strong> Puedo ver un tablero con los campistas de Free Code Camp que han ganado más puntos de brownie en los últimos 30 días.",
+            "<strong>Historia de usuario:</strong> Puedo ver cuántos puntos de brownie han ganado en los últimos 30 días, y cuántos han ganado en total.",
+            "<strong>Historia de usuario:</strong> Puedo elegir entre dos formas de organizar la lista: 1) En base a cuántos puntos de brownie se han ganado en los últimos 30 días. 2) En base al número de puntos de brownie que han ganado en total.",
+            "<strong>Pista:</strong> Para obtener los 100 mejores campistas para los últimos 30 días: <a href='https://fcctop100.herokuapp.com/api/fccusers/top/recent' target='_blank'>https://fcctop100.herokuapp.com/api/fccusers/top/recent</a>.",
+            "<strong>Pista:</strong> Para obtener los 100 mejores campistas de toda la historia: <a href='http://fcctop100.herokuapp.com/api/fccusers/top/alltime' target='_blank'>http://fcctop100.herokuapp.com/api/fccusers/top/alltime</a>.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
+            "Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
+            "Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
+          ]
+        },
+        "ru": {
+          "title": "Создайте таблицу Кемперов-Лидеров",
+          "description": [
+            "<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a>, функционал которого схож с этим: <a href='https://codepen.io/FreeCodeCamp/full/eZGMjp/' target='_blank'>https://codepen.io/FreeCodeCamp/full/eZGMjp/</a>.",
+            "Приложение должно удовлетворять нижеприведённым <a href='https://ru.wikipedia.org/wiki/Пользовательские_истории' target='_blank'>пользовательским историям</a>. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.",
+            "<strong>Пользовательская история:</strong> Я могу видеть таблицу кемперов Free Code Camp, которые получили наибольшее количество очков за последние 30 дней.",
+            "<strong>Пользовательская история:</strong> Я могу видеть сколько очков они получили за последние 30 дней, и сколько они получили их всего.",
+            "<strong>Пользовательская история:</strong> Я могу отсортировать список по количеству очков, которые они получили за последние 30 дней, и по общему количеству полученных очков.",
+            "<strong>Подсказка:</strong> Ссылка на топ 100 кемперов за последние 30 дней в формате JSON: <a href='https://fcctop100.herokuapp.com/api/fccusers/top/recent' target='_blank'>https://fcctop100.herokuapp.com/api/fccusers/top/recent</a>.",
+            "<strong>Подсказка:</strong> Ссылка на топ 100 кемперов за все время в формате JSON: <a href='http://fcctop100.herokuapp.com/api/fccusers/top/alltime' target='_blank'>http://fcctop100.herokuapp.com/api/fccusers/top/alltime</a>.",
+            "Если что-то не получается, не забывайте пользоваться методом <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Читай-Ищи-Спрашивай</a>.",
+            "Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.",
+            "Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
+          ]
+        }
+      }
+    },
+    {
+      "id": "bd7153d8c242eddfaeb5bd13",
+      "title": "Build a Roguelike Dungeon Crawler Game",
+      "description": [
+        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/FreeCodeCamp/full/PNJRyd/' target='_blank'>https://codepen.io/FreeCodeCamp/full/PNJRyd/</a>.",
+        "Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
+        "<strong>User Story:</strong> I have health, a level, and a weapon. I can pick up a better weapon. I can pick up health items.",
+        "<strong>User Story:</strong> All the items and enemies on the map are arranged at random.",
+        "<strong>User Story:</strong> I can move throughout a map, discovering items.",
+        "<strong>User Story:</strong> I can move anywhere within the map's boundaries, but I can't move through an enemy until I've beaten it.",
+        "<strong>User Story:</strong> Much of the map is hidden. When I take a step, all spaces that are within a certain number of spaces from me are revealed.",
+        "<strong>User Story:</strong> When I beat an enemy, the enemy goes away and I get XP, which eventually increases my level.",
+        "<strong>User Story:</strong> When I fight an enemy, we take turns damaging each other until one of us loses. I do damage based off of my level and my weapon. The enemy does damage based off of its level. Damage is somewhat random within a range.",
+        "<strong>User Story:</strong> When I find and beat the boss, I win.",
+        "<strong>User Story:</strong> The game should be challenging, but theoretically winnable.",
+        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
+        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. ",
+        "You can get feedback on your project by sharing it with your friends on Facebook."
+      ],
+      "releasedOn": "January 1, 2016",
+      "challengeSeed": [
+        "BwyKI9iePUQ"
+      ],
+      "tests": [],
+      "type": "zipline",
+      "isRequired": false,
+      "challengeType": 3,
+      "translations": {
+        "es": {
+          "title": "Crea un juego de dragones al estilo Rogue",
+          "description": [
+            "<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/FreeCodeCamp/full/PNJRyd/' target='_blank'>https://codepen.io/FreeCodeCamp/full/PNJRyd/</a>.",
+            "Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
+            "<strong>Historia de usuario:</strong> Tengo energía, nivel de habilidad y un arma. Puedo recoger un arma mejor. Puedo recoger ítems que recuperan mi energía.",
+            "<strong>Historia de usuario:</strong> Todos los ítems y los enemigos en el mapa están colocados aleatoriamente.",
+            "<strong>Historia de usuario:</strong> Puedo moverme a lo largo de un mapa y descubrir ítems.",
+            "<strong>Historia de usuario:</strong> Puedo moverme hacia cualquier parte dentro de los límites del mapa, pero no puedo moverme sobre un enemigo hasta que lo haya vencido.",
+            "<strong>Historia de usuario:</strong> Gran parte del mapa está escondido. Cuando doy un paso, todos los espacios que están a cierto número de espacios de distancia de mi son revelados.",
+            "<strong>Historia de usuario:</strong> Cuando venzo un enemigo, este desaparece y yo gano puntos de experiencia (XP), lo que eventualmente me permite aumentar de nivel.",
+            "<strong>Historia de usuario:</strong> Cuando peleo con un enemigo, tomamos turnos haciéndonos daño hasta que uno de los dos pierde. El daño que hago está basado en mi nivel de experiencia y en el arma que estoy utilizando. El enemigo hace daño basado en su nivel. El daño es aleatorio dentro de cierto márgen.",
+            "<strong>Historia de usuario:</strong> Gano el juego cuando encuentre y venza al jefe.",
+            "<strong>Historia de usuario:</strong> El juego debe representar un reto, pero ganar debe ser teóricamente posible.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
+            "Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
+            "Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
+          ]
+        },
+        "ru": {
+          "title": "Создайте Roguelike-подобную игру Подземелье",
+          "description": [
+            "<strong>Задание:</strong> Создайте приложение <a href='https://codepen.io' target='_blank'>CodePen.io</a>, функционал которого схож с этим: <a href='https://codepen.io/FreeCodeCamp/full/PNJRyd/' target='_blank'>https://codepen.io/FreeCodeCamp/full/PNJRyd/</a>.",
+            "Приложение должно удовлетворять нижеприведённым <a href='https://ru.wikipedia.org/wiki/Пользовательские_истории' target='_blank'>пользовательским историям</a>. Используйте любые библиотеки или API, которые потребуются. Придайте ему свой личный стиль.",
+            "<strong>Пользовательская история:</strong> У меня есть жизни, уровень и оружие. Я могу подобрать оружие получше. Я могу подобрать очки здоровья.",
+            "<strong>Пользовательская история:</strong> Все предметы и враги располагаются на карте случайным образом.",
+            "<strong>Пользовательская история:</strong> Я могу передвигаться по карте, обнаруживая новые предметы.",
+            "<strong>Пользовательская история:</strong> Я могу двигаться куда угодно в рамках карты, но не могу продвинуться дальше врага, пока он не будет побежден.",
+            "<strong>Пользовательская история:</strong> Большая часть карты скрыта. Когда я делаю шаг, все клетки в определенном количестве клеток от меня становятся видимы.",
+            "<strong>Пользовательская история:</strong> Когда я побеждаю врага, враг исчезает, а я получаю очки опыта (XP), что увеличивает мой уровень.",
+            "<strong>Пользовательская история:</strong> Когда я веду бой с врагом, мы поочередно наносим друг-другу повреждения, до тех пор пока кто-нибудь не победит. Я наношу повреждения, которые зависят от моего уровня и моего оружия. Враг наносит повреждения, которые зависят от его уровня. Значение повреждений распределено случайным образом в некотором диапазоне.",
+            "<strong>Пользовательская история:</strong> Когад я нахожу и побеждаю босса, я выигрываю игру.",
+            "<strong>Пользовательская история:</strong> Игра должна быть интересной и достаточно сложной, но теоретически проходимой.",
+            "Если что-то не получается, не забывайте пользоваться методом <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Читай-Ищи-Спрашивай</a>.",
+            "Когда закончите, нажмите кнопку \"I've completed this challenge\" и укажите ссылку на вашу работу на CodePen.",
+            "Вы можете получить отзыв о вашем проекте от коллег, поделившись ссылкой на него в нашем <a href='//gitter.im/freecodecamp/codereview' target='_blank'>чате для рассмотрения кода</a>. Также вы можете поделиться ею через Twitter и на странице Free Code Camp вашего города на Facebook."
+          ]
+        }
+      }
+    },
+    {
+      "id": "bd7150d8c442eddfafb5bd1c",
+      "title": "P2P Video Chat Application",
+      "description": [
+        "<strong>Objective:</strong> Build a <a href='https://hyperdev.com' target='_blank'>Hyperdev</a> app that is functionally similar to this: <a href='https://unequaled-cement.hyperdev.space' target='_blank'>https://unequaled-cement.hyperdev.space</a>.",
+        "Fulfill the below <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
+        "<strong>User Story:</strong> Upon arriving, the browser will prompt me to access my camera and microphone. ",
+        "<strong>User Story:</strong> After I give it permission, I am prompted to type in a room name.",
+        "<strong>User Story:</strong> Once I type in the room name, a room will be created if no room of that name existed before. ",
+        "<strong>User Story:</strong> A friend of mine can subsequently go to the same website, type in the same room I entered, and join the same room, then enter into a video chat with me. ",
+        "<strong>User Story:</strong> If I type in a room name, and there are already two people in that room, I get a notification that the room is full. ",
+        "<strong>User Story:</strong> Anyone can create or join any room. And there can be any number of rooms, but all of them must have unique names. ",
+        "<strong>User Story:</strong> I can choose to not permit the site to access my microphone and webcam. If I choose not to do this, if some other driver problem occurs, I see an error message saying these are required. ",
+        "<strong>User Story:</strong> When I choose to cancel the room name input step, or if I type in no name, or just spaces, it should again ask me again to type in a valid room name. ",
+        "<strong>User Story:</strong> If one of the two people in the room get disconnected, they can reconnect to the same room and continue chatting.",
+        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
+        "When you are finished, click the \"I've completed this challenge\" button and include a link to your Hyperdev App.",
+        "You can get feedback on your project by sharing it with your friends on Facebook."
+      ],
+      "challengeSeed": [],
+      "tests": [],
+      "type": "zipline",
+      "challengeType": 3,
+      "isRequired": false
+    },
+    {
+      "id": "bd7198d8c242eddfaeb5bd13",
+      "title": "Show National Contiguity with a Force Directed Graph",
+      "description": [
+        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/FreeCodeCamp/full/xVopBo' target='_blank'>https://codepen.io/FreeCodeCamp/full/xVopBo</a>.",
+        "Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
+        "<strong>User Story:</strong> I can see a Force-directed Graph that shows which countries share borders.",
+        "<strong>User Story:</strong> I can see each country's flag on its node.",
+        "<strong>Hint:</strong> Here's a dataset you can use to build this: <a href='https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json' target='_blank'>https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json</a>",
+        "<strong>Hint:</strong> You can create a spritesheet of national flags at <a href='https://www.flag-sprites.com' target='_blank'>https://www.flag-sprites.com</a>.",
+        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
+        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. ",
+        "You can get feedback on your project by sharing it with your friends on Facebook."
+      ],
+      "challengeSeed": [
+        "etBaP3IdlIE"
+      ],
+      "tests": [],
+      "isRequired": true,
+      "releasedOn": "January 1, 2016",
+      "type": "zipline",
+      "challengeType": 3,
+      "translations": {
+        "es": {
+          "title": "Muestra asociaciones utilizando un gráfico de fuerzas dirigidas",
+          "description": [
+            "<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/FreeCodeCamp/full/KVNNXY' target='_blank'>https://codepen.io/FreeCodeCamp/full/KVNNXY</a>.",
+            "<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
+            "<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
+            "<strong>Regla #3:</strong> Debes utilizar D3.js para construir este proyecto.",
+            "<strong>Historia de usuario:</strong> Puedo ver un gráfico de fuerza dirigida que muestra qué campistas están publicando enlaces en Camper News hacia qué dominios.",
+            "<strong>Historia de usuario:</strong> Puedo ver el icono de cada campista en su nodo respectivo.",
+            "<strong>Historia de usuario:</strong> Puedo ver la relación entre los campistas y los dominios que publican.",
+            "<strong>Historia de usuario:</strong> Puedo conocer aproximadamente cuántas veces los campistas han enlazado un dominio en particular a partir del tamaño del nodo respectivo.",
+            "<strong>Historia de usuario:</strong> Puedo conocer aproximadamente cuántas veces un campista específico ha publicado un enlace a partir del tamaño de su nodo.",
+            "<strong>Pista:</strong> La siguiente es la ruta del API de noticias de Camper News: <code>http://www.freecodecamp.com/news/hot</code>.",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
+            "Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
+            "Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
+          ]
+        }
+      }
+    },
+    {
+      "id": "bd7108d8c242eddfaeb5bd13",
+      "title": "Map Data Across the Globe",
+      "description": [
+        "<strong>Objective:</strong> Build a <a href='https://codepen.io' target='_blank'>CodePen.io</a> app that is functionally similar to this: <a href='https://codepen.io/FreeCodeCamp/full/mVEJag' target='_blank'>https://codepen.io/FreeCodeCamp/full/mVEJag</a>.",
+        "Fulfill the following <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a>. Use whichever libraries or APIs you need. Give it your own personal style.",
+        "<strong>User Story:</strong> I can see where all Meteorites landed on a world map.",
+        "<strong>User Story:</strong> I can tell the relative size of the meteorite, just by looking at the way it's represented on the map.",
+        "<strong>User Story:</strong> I can mouse over the meteorite's data point for additional data.",
+        "<strong>Hint:</strong> Here's a dataset you can use to build this: <a href='https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json' target='_blank'>https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json</a>",
+        "Remember to use <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> if you get stuck.",
+        "When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. ",
+        "You can get feedback on your project by sharing it with your friends on Facebook."
+      ],
+      "challengeSeed": [
+        "kSAqct10gA0"
+      ],
+      "tests": [],
+      "isRequired": true,
+      "releasedOn": "January 1, 2016",
+      "type": "zipline",
+      "challengeType": 3,
+      "translations": {
+        "es": {
+          "title": "Mapea datos a lo largo del Globo",
+          "description": [
+            "<strong>Objetivo:</strong> Construye una aplicación en <a href='https://codepen.io' target='_blank'>CodePen.io</a> que funcione de forma similar al siguiente ejemplo: <a href='https://codepen.io/FreeCodeCamp/full/mVEJag' target='_blank'>https://codepen.io/FreeCodeCamp/full/mVEJag</a>.",
+            "<strong>Regla #1:</strong> No veas el código del proyecto de ejemplo. Encuentra la forma de hacerlo por tu cuenta.",
+            "<strong>Regla #2:</strong> Satisface las siguientes <a href='https://en.wikipedia.org/wiki/User_story' target='_blank'>historias de usuario</a>. Usa cualquier librería o API que sea necesaria. ¡Ponle un toque personal!.",
+            "<strong>Regla #3:</strong> Debes utilizar D3.js para construir este proyecto.",
+            "<strong>Historia de usuario:</strong> Puedo ver a dónde cayeron todos los meteoritos en un mapa mundi.",
+            "<strong>Historia de usuario:</strong> Puedo distinguir el tamaño relativo de cada meteorito simplemente viendo la forma en que está representado en el mapa.",
+            "<strong>Historia de usuario:</strong> Puedo mover el ratón sobre el dato de cada meteorito para obtener información adicional.",
+            "<strong>Pista:</strong> Puedes utilizar el siguiente conjunto de datos para construir tu proyecto: <a href='https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json' target='_blank'>https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json</a>",
+            "Recuerda utilizar <a href='http://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask</a> si te sientes atascado.",
+            "Cuando termines, haz clic en el botón de \"I've completed this challenge\" e incluye el vínculo de tu proyecto en CodePen. ",
+            "Puedes obtener retroalimentación acerca de tu proyecto de parte de tus compañeros campistas compartiéndolo en nuestro <a href='//gitter.im/freecodecamp/codereview' target='_blank'>Cuarto de revisión de código</a>. También puedes compartirlo en Twitter y en el campamento de tu ciudad (en Facebook)."
+          ]
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file